Category: design

Categories
code design roundup

Web Accessible Code Libraries and Design Patterns

Within a web development organization, it’s ideal to maintain (and enforce usage of) design patterns and a components library. And they should work together; design patterns create consistency among visual elements across projects and the components library creates consistent implementation of those patterns during development. This is especially important on several levels including accessibility.

Here is an extensive list of recommended code libraries, patterns, and design systems. It’s one list instead of separating by category as many have elements of each. There are also some related articles below. Please leave a comment for any updates, corrections, additions, etc.

Related resources:

Categories
code design

Resources for developing accessible cards/tiles

The card pattern (also know as tiles and blades) has become quite popular over the last several years. There are many accessibility challenges that may arise quickly when web developers attempt to build them including:

  • Providing keyboard access
  • Providing an adequate visible focus indicator
  • Link text that’s not overly verbose for screen reader users
  • Using correct semantic markup, especially for the heading
  • Maintaining proper reading order
  • Not duplicating content
  • Making entire card a hit area for pointing devices

Here are a several great resources on building accessible cards/tiles and address these issues:

collage of 3 tiles

Categories
color design

High Contrast Option for Color Contrast

Most of use are aware of the color contrast guideline in WCAG 2.0 AA which states:

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

This can be a big problem for websites when the color scheme uses the brand colors which do not meet the above requirement. This can be especially troublesome for medium orange and green tones.

A technique to meet this guideline is G174:

Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

You may want (or need) to consider this technique for your website, at least temporarily. The control for this option should be in a global nav bar or settings (if available). A longer term goal is to correct your brand’s colors so that it meets the 4.5:1 color contrast requirement.

Here are some examples of websites that have a high contrast option available (the control is in the top horizontal bar in all examples).

partial screen shot of Choice Hotels website; arrows points to text increase contrast
Example of providing an increased contrast setting on a website.
Categories
book design roundup

Web Accessibility Books

Here’s a great list of accessibility books. Feel free to submit any others in comments. (Updated October 2024)

Related:

book cover: Accessibility For Everyone
book cover: Inclusive Design Patterns
book: A Web for Everyone
Categories
color design roundup tools

Color Contrast Tools

Here are some tools that specifically check for color contrast accessibility issues on websites. And a few related links below. Know any others?

Updated April 2024. Please feel free to comment with additions and corrections.

color wheel