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. 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.
- 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.