Accessible Design Patterns
Don't Reinvent the Wheel
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. It is by no means exhaustive and, unfortunately, they don't have functional examples of all of the patterns, but they are actively working on them. If you can find the pattern you are looking for here, you should use it.
- 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, Bryan Garaventa, is himself blind and a member of the ARIA Working Group, and 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.