Accessible Design Patterns

Don’t Reinvent the Wheel

It can be difficult to custom code complex, composite widgets that are not defined natively in the HTML5 specification, such as tree views or tabbed interfaces, in a way that is accessible. To do so usually requires significant coding experience, since you will often need to manage focus, visibility, and other attributes dynamically using JavaScript. In addition, you will usually need to understand what ARIA roles, states, and properties have to be set and updated in response to user input. If you don't handle this properly, you can wind up with widgets that are inaccessible to some users, because they will not be provided with the correct cues and affordances needed to interact with them.

To save time and effort, it is often best to find existing widgets that have been designed to be maximally accessible and use them, where possible. Here are a few places where you can find such widgets and/or pattern descriptions:

WAI-ARIA Authoring Practices 1.1

This resource from the W3C gives examples of common design patterns and how you might implement them in an accessible way using ARIA. These examples are intended as reference implementations and assistive technologies may not yet support the techniques used.  You'll want to test them out before you use them in production, but they should give you place to start.

Cauldron

This is the open source accessible pattern library developed by Deque, probably one of the top three accessibility services companies.

AccDC Technical Style Guide

This describes the implementation of another set of accessible design patterns. The developer has tested them in a relatively exhaustive list of screen readers.

Ebay MIND Patterns

Describes patterns for a number of possible custom-coded interface elements, using a progressive enhancement-based approach, where possible.

Web Experience Toolkit (WET)

Advertises itself as an award-winning front-end framework for building websites that are accessible, usable, interoperable, mobile-friendly, and multilingual.

Assets Framework

Developed in association with the Centers for Medicare & Medicaid Services, it advertises itself as the Section 508 compliant responsive framework for front-end development that is compatible with Twitter Bootstrap 3.3.1.

Inclusive Components

A website developed by accessibility guru, Heydon Pickering, that not only makes available a pattern library, but provides in-depth, step-by-step descriptions of how and why each pattern was designed the way it is.