Cheatsheet for Web developers getting started with a11y.
a11y is a numeronym for accessibility. Pretty neat.
WIP for now, but the need is real.
Table of contents:
- prerequisites
- why a11y?
- assistive technology
- extensions, plugins, and tooling
- free resources
- paid resources
- glossary
Before getting started it's recommended you are familiar the following, this is introduce the concepts of how HTML and JavaScript can impact a11y:
Assistive technology (AT) are the tools and equipment people use to interact with your application or site. Some examples of AT include braille displays, allowing blind users to understand what's on their screen in real time, or VoiceOver, converts text to speech.
Many of these technologies can change the way a website is displayed or how a user will interact. To read or learn more about assistive technology please follow the Assistive Technology Industry Association.
Screen readers are a typical use case of AT.
Surveys done by WebAIM are a treasure trove of insight when assessing what types of tools and platforms you should be targeting to make a11y compliant sites. Some of the key take aways:
- 71.% of respondents exclusively rely on screen reader audio for their usage.
- For all major platforms (Desktop, Laptop, Mobile device/Tablet) more respondants use screen readers, ranging from 67% to 86%.
- The top 3 screen readers actively used on desktop/laptop: NVDA at 72%, JAWS at 61%, and VoiceOver at 47%,
- Most common screen reader and browser combinations: JAWS with Chrome at 21%, NVDA with Firefox at 19%, NVDA with Chrome at 18%, JAWS with Internet Explorer at 11%, VoiceOver with Safari at 9%
- What is your primary mobile/tablet platform: Apple iPhone, iPad, or iPod touch at 69% and Android at 27%
- Mobile screen readers used: VoiceOver at 71%, TalkBack for Android at 33%
While JAWS is a paid tool, usage of NVDA and VoiceOver are more than sufficient to cover the largest audience for both mobile and non-mobile platforms. This provides the most coverage for the least costs.
NVDA is freely available on Windows
VoiceOver Keyboard Shortcuts on a Mac
Enabling Keyboard Accessibility on a Mac
- axe - Web Accessibility Testing
- Accessibility Insights for Web
- HTML5 Outliner
- Color Contrast Analyzer
- axe-core
- jest-axe
- cypress-axe
- axe-playwright
- jest-puppeteer-axe
- axe-puppeteer
- react-axe
- tota11y
- lighthouse
- Learn Accessibility by MDN
- Microsoft Inclusive Design Methodology
- Inclusive Design Principles
- Gov.uk Accessible Design System
- Gov.uk Accessible Service Manual
- accessibilitysupported/a11ysupport.io
- w3c/silver
- Inclusive Components
- Accessibility in Government
- a11y with Lindsey
- Journey of a Disabled Web Developer
- Accessibility in JavaScript Applications by Marcy Sutton - frontendmasters.com
- Deque University Full Curriculum - dequeuniveristy.com
- Start Building Accessible Web Applications Today by Marcy Sutton - egghead.io
PLEASE NOTE: I do not know or work with the above people or organizations, simply recommending good resources.
glossary
- a11y (accessibility)
- a11y is a numeronym for accessibility
- assistive technology
- the tools and equipment people use to interact with your application or site. examples include: screen readers, screen magnification software, or alternative input displays suchas head pointers, motion tracking, or large-print and tactile keyboards
- accessibility tree (accessibility object model)
- contains accessiblity-related information for most HTML elements.