WAI-ARIA
- WAI-ARIA (http://www.w3.org/TR/wai-aria/) became a recommendation by the W3C in March 2014.
- ARIA markup exposes name, role, state and relationships to screen readers
- WAI-ARIA Authoring Practices (http://www.w3.org/TR/wai-aria-practices/) provide developers with guidance on implementing accessible rich internet applications.
TIPS
- Ensure fields are properly labelled using <label for=“id”>, aria-label or aria-labelledby
- Layout page using HTML5 sections and ARIA landmark roles (http://www.w3.org/TR/wai-aria/roles#landmark_roles).
- Provide 1 <main role=“main”>, navigation regions should have role=“navigation” and search regions role=“search”. Provide unique names through aria-label.
- Provide relationships to instructions and other text through aria-labelledby or aria-describedby
- Alert the user of changes using role=”alert”.
- Ensure links have meaningful link text.
- Ensure headings are coded as heading and lists as list.
- Markup tables with scope, caption and summary. See WCAG 2.0 1.3.1.
- Follow ARIA Design Patterns (http://www.w3.org/TR/wai-aria-practices/#aria_ex) to define keyboard interaction.
Testing
- NVDA is a free screen reader provided by NV Access (http://www.nvaccess.org/)
- Voiceover (http://www.apple.com/accessibility/osx/voiceover/) is a screen reader built into Mac OSX and iOS.
- IBM Bluemix Digital Content Checker: https://console.ng.bluemix.net/catalog/digital-content-checker/
Resources
- IBM Accessibility (www.ibm.com/able)
- Web Content Accessibility Guidelines (http://www.w3.org/TR/WCAG20/)
- HTML5Accessibility (http://html5accessibility.com/)
- WAIAble (accessiblerails.wordpress.com)
- Examples:
moekraft 