It can be hard to track down correct and up to date information on how to make a UI accessible. So I decided to create a repository of information to help me and anyone else looking for this type of information.
It covers things like:
- What WAI-ARIA to apply.
- What keyboard functionality to apply.
- Markup and in some cases CSS code examples.
- What should happen when JavaScript is disabled.
- Examples where available.
And will include components such as:
- Accordion
- Menu Button
- Autocomplete
- Carousel
- Datepicker
- Modal
- Tabs
- Tree
This is a living document and feel free to create issues for any new additions or improvements, log any issues, or just ask a question, and label appropriately. Or create a Pull Request.
x
equals any element within markup blocks.- The following conventions are used for DOM hooks:
- WAI-ARIA 1.0 Authoring Practices
- WAI-ARIA 1.0 Authoring Practices -> Design Patterns
- Using WAI-ARIA in HTML
- Techniques for WCAG 2.0
- How To Meet WCAG 2.0
- The Paciello Group -> Resources
- WebAIM
- Simply Accessible -> Articles
- The Accessibility Project
- Deque Blog
- Web Usability -> Articles
- DHTML Style Guide Working Group Recommended Keyboard Shortcuts
- Web Accessibility Testing Techniques
- Basic screen reader commands for accessibility testing
- Open AJAX Alliance Accessibility Tools
- Accessible jQuery-ui Components Demonstration
- AccDC: Accelerated Dynamic Content
- Practical ARIA Examples
Web accessibility evaluation tools can be very helpful; however, they do not replace the need for human evaluation. Evaluating for accessibility requires knowledgeable human judgment. No tool alone can determine if a site meets accessibility guidelines. (However, a tool can determine if a site does not meet accessibility guidelines.) Testing tools can increase the efficiency of evaluation. Experience with assistive technologies is required to evaluate for usable accessibility.