Supporting Blind Ability

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:
  • www.ibm.com
  • greenhouse.lotus.com