Accessibility tips and tools

README.md

General Web Accessibility tips and tools

HTML Semantics

Good HTML semantics makes for good accessibility. This means using links, buttons, form elements, and labels appropriately, including:

• <label> element for form controls with appropriate for / htmlFor (React) and id pairings
• <fieldset> for groups of related inputs
• <button> elements for UI controls

More info on semantic HTML as basis for accessibility on this MDN article: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

Keyboard Focus Management

Tabbing through to focusable UI controls happens natively with appropriate semantic markup.

Applying explicit tabindex / tabIndex (React) settings on non-standard UI elements will sometimes be all extra nudge needed.

"Keyboard traps" like navigation, as well as UI widgets that fall a bit out of the standard convention may require more dynamic, explicit focus management. You may find the following resources helpful:

• MDN guide on keyboard navigable widgets: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
• Google guide on managing keyboard focus: https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex#managing_focus_in_components
• React-specific focus management techniques: https://simplyaccessible.com/article/react-a11y/

WAI-ARIA

WAI-ARIA is a technology for adding further semantics that browsers and assistive technologies can recognize. It is particularly helpful with dynamic content and advanced, non-standard UI controls and widgets that involve unsemantic HTML.

Resources for more info:

• WAI-ARIA documentation: https://www.w3.org/TR/wai-aria/
• W3C guide on using WAI-ARIA: https://www.w3.org/TR/aria-in-html/
• MDN guide on WAI-ARIA basics: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

Testing

Linting in React apps is our first defense! Automated accessibility testing is also integral (and we need to do more of it).

But there are some issues that require manual testing. To get a truly comprehensive testing process, bite the bullet and experience the page with:

• A screen reader
• Speakers and microphone off
• No mouse, navigating with keyboard only

Some resources on manual testing guidelines and checklists:

• Use a screen reader and/or built-in VoiceOver: https://simplyaccessible.com/article/listening-web-part-three-working-screen-readers/
• Testing Web Content for Accessibility by WebAIM: https://webaim.org/resources/evalquickref/
• Web Accessibility Testing 101 Checklist by Atlassian: https://openedx.atlassian.net/wiki/spaces/A11Y/pages/666338139/Web+Accessibility+Testing+101+A+Checklist+for+Beginners

Browser tools:

• axe browser extentions by Deque: https://www.deque.com/axe/
• WAVE Evaluation Tool for Chrome, by WebAIM https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
• WAVE Accessibility Extension for Firefox: https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/
• Lighthouse audit, built-in Chrome devtools panel: https://developers.google.com/web/tools/lighthouse/

Resources

• React Docs on Accessibility https://reactjs.org/docs/accessibility.html

• W3C's WCAG Guides https://www.w3.org/WAI/tutorials/

• Google Accessibility Fundamentals https://developers.google.com/web/fundamentals/accessibility

• Web Accessibility Cookbook by Paciello Group https://files.paciellogroup.com/customers/WF/Cookbook2018/Accessibility-cookbook-Web-content%20%2B%20WCAG-tests%2012.04.2018/Accessibility-cookbook-Web-content/

• Accessibility | MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility

--

todo

• Testing and tools resources here: https://www.24a11y.com/2017/reacts-accessibility-code-linter/

• More useful WAI-ARIA resource link?