Accessibility Resources and Code Examples
Accessibility Resources and Code Examples
Accessibility Video Tutorials
- Accessible Page Title
- Designating the Page Language and Language of Parts
- A Web Accessibility Assessment Hands-on Tutorial (4-part video series): Watch as an accessibility professional performs an accessibility evaluation, or audit, in real time, with both manual and automated testing techniques. Topics include keyboard, mouse, color contrast, headings, landmarks, links, images, and more, including Deque's axe DevTools browser extension.
WCAG (Web Content Accessibility Guidelines) 2.1
New success criteria in WCAG 2.1 — Learn how WCAG 2.1 differs from WCAG 2.0, with explanations and examples.
WCAG (Web Content Accessibility Guidelines) 2.2
9 new success criteria in WCAG 2.2 (officially released in October 2023) — 1 criterion has also been deprecated.
Web Accessibility Checklist
Deque's Web Accessibility Checklist — Based on WCAG 2.2 Level AA requirements.
Screen Reader References
- Desktop
- Windows
- Mac
- Mobile
IAAP Certification Exam Preparation
Deque Accessibility Tools
- Axe Tools overview — Built on the world’s most popular accessibility testing library, axe-core. Deque’s suite of axe tools offers full coverage for your testing and compliance needs.
- Axe DevTools — Empower development teams to find, prevent, and fix accessibility issues while they code.
- Free — Fast, lightweight, automated accessibility testing browser extensions.
- Pro — Catch more issues with this Chrome extension upgrade. Learn more and try it for free today.
- Enterprise - Comprehensive testing at scale.
- Axe Auditor — Bring efficient, full-coverage auditing capabilities to your testing teams with this step-by-step manual accessibility testing tool.
- Axe Monitor — Dynamically scan, monitor and report on the accessibility status of your site across business and development teams.
Other Accessibility Utilities
- Online Color Contrast Analyzer
- HTML DOM Validator Bookmarklet (to validate single-page apps, AJAX, dynamic content, password-protected pages, and more). Also on this page: a partial HTML page validator.
ARIA Examples
Cauldron Pattern Library
Deque's open source Cauldron pattern library, written in React, contains many good examples of accessible JavaScript and ARIA widgets.
Deque University Examples
Within the Deque University courses are several examples of accessible JavaScript and ARIA widgets, within an instructional context.
Note:
For more detailed explanations and instruction, subscribe to the Custom JavaScript/ARIA Widgets class, or other classes from the Full Accessibility Curriculum.
- Accordion (Multiselect)
- Accordion (Tabbed)
- Alert
- Button
- Button (Toggle)
- Carousel (based on a tabpanel)
- Checkbox (Single)
- Checkbox (Tri-State)
- Datepicker
- Dialog (Message Alert Dialog)
- Dialog (Message Dialog)
- Dialog (Simple Alert Dialog)
- Dialog (Simple Dialog)
- Expand/Collapse
- Expand/Collapse (based on Details/Summary)
- Link
- Live Region Playground
- Navigation (Hierarchical) with Expand/Collapse
- Predictive Text
- Progress Bar (Bounded)
- Progress Bar (Unbounded)
- Radio and Radio Group
- Shopping Cart
- Slider
- Slider (Multirange)
- Table (Responsive, Collapsible)
- Table (Sortable)
- Tabpanel
- Tooltip
- Tree View
- Tooltip Dialog
Accessibility Support
Can you use it? The open source Accessibility Support project (a11ysupport.io) tracks support for accessibility features in ARIA and HTML across browsers and assistive technologies like screen readers. You can contribute to a11ysupport.io via GitHub.