This is a trimmed and jiggled version of things from a larger (and Work In Progress) list: More Accessible Products.
Before
- Remember the Priority of Constituencies and put our users first.
- Know the Standards:
- Know the big names
- MDN: HTML: A good basis for accessibility; HTML elements reference.
- Deque: axe; Deque university.
- WebAIM: WebAIM Million; Articles.
- TPGi: ARC toolkit; Blog.
- Microsoft: Inclusive Design; Accessibility Insights.
- Know the technology
- Think in semantic HTML
- Understand the accessibility tree
- Understand ARIA
- Know the Rules of ARIA. Use HTML if we can, and add any ARIA carefully.
- Have a handle on ARIA attributes. Know which ones we can get from the HTML, and which ones needs to be added.
- Check new ideas and patterns against the ARIA Patterns for ideas for best practice.
During
- Write semantic HTML
- Do Static Analysis
- axe Accessibility Linter for VS Code
- eslint-plugin-jsx-a11y for the command line
- Use the design system carefully
- If using Storybook, add the Accessibility Addon
- Include a11y in Code Reviews. Check that new Pull Requests are “axe clean” (there are no errors flagged by a11y automated tests).
Automated Testing
Add accessibility-related tests in our unit, integration, and end-to-end tests.
- For unit and some integration tests use jest-axe
- For End-to-End tests, use cypress-axe or axe-playwright