Developing for Accessibility

This repository covers the content for the Developing for Accessibility academy session.

This app is built on top of Create React App and Reactstrap

🏅 #Goals/Learning Outcomes

• Learn guiding principles for developing for accessiblity
  • Use accessible HTML
  • Use a pattern/component library so it's easy to be consistently accessible
  • Use automated tools to test the accessibility of your app
  • Manually audit your site because automated tools can't catch everything 😅
• Learn how to use automated tools for developing accessible apps
  • Static code analysis
  • Automated tests
  • Browser extensions
• Learn to fix common accessibility mistakes

🚀 Starting the project

The fixme branch has a bunch of accessibility violations to fix.

git checkout fixme

Install dependencies

npm install

Start the app

npm start

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Note that if there are Typescript errors, the app won't compile. To bypass this set the environment variable TSC_COMPILE_ONERROR=true, e.g.

TSC_COMPILE_ONERROR=true npm start

Run the linter

npm run lint

Run tests

This project uses axe-core to automate accessibility testing.

npm test

⚠️ Fixing Violations

• Page Title
• Cards
• Skip navigation links
  • Bootstrap screeen reader utilities (v4)
  • Bootstrap visually hidden utilities (v5)
• Button - don't add click handlers to <div>s - just use a button 🙂
• Link - great for navigating to another page or to a section of the current page. Links != buttons
• Main landmark
• Forms
  • <label>
    • Placeholders are not labels
    • <label> and <input> need to be siblings because of Bootstrap
  • Grouping items in select elements
• Disclosure - an element for showing and hiding text
• Tooltips
• Tables
  • main focus is using semantic HTML
• Images
• Page Language
• aria-hidden

🎓 Resources

Learn More

• WAI-ARIA Authoring Practices 1.1
• Web Content Accessibility (WCAG) Guidelines 2.1
• Web Accessibility Tutorials
• a11y project

Browser Tools/Extensions

• axe (Chrome, Firefox)
• WAVE Browser Extensions (Chrome, Firefox)
• Accessibility Insights (Chrome)
• Lighthouse (built into Chrome)
• Web Inspector Audits (built into Safari Technology Preview)

Development Tools

• eslint-plulgin-jsx-a11y - ESLint plugin for accessibility rules on JSX elements
• axe-core - an accessibility testing engine
• axe Linter (VSCode) - an editor plugin that checks for accessibility issues
• axe Linter (GitHub app) - automatically finds and fixes issues on GitHub pull requests

Core Library Accessibility Docs

• Bootstrap Accessibility
  • v4 docs
  • v5 docs
• React Accessibility

Other Libraries

• React Testing Libary - a general purpose testing library for React (replacement for Enzyme) with accessibility as a first class concern

Other Stuff

• VoiceOver Keyboard Shortcuts on a Mac

This project was inspired by Marcy Sutton's Empathy Driven Development project and her talk at JSConf EU 2018.

Special thanks to Brianna Koch and Nic Bertino for their help in developing this course.