Web a11y Cheatsheet
(cause I can't go a day without you)
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
prerequisites
Before getting started it's recommended you are familiar the following, this is introduce the concepts of how HTML and JavaScript can impact a11y:
why a11y
Accessibility standards are becoming more critical, not just legally, but are also actively becoming part of standard development, design, and product workflows.
While an immediate benefit is having a compliant site/app, other benefits include easier automation, testing, and customer support.
assistive technology
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.
Common Usage
Screen readers are a typical use case of AT.
WebAIM 2021 Screen Reader Survey
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:
- "Respondents without disabilities tend to be more positive about recent progress (47.4% thought it has become more accessible) than those with disabilities (38.6% thought it has become more accessible)"
- 79.5% of respondents have blindness as a disability
- Chrome is the majority browser used for screen readers (53.6%) followed by MS Edge (18.4%)
- The top 3 screen readers actively used on desktop/laptop: JAWS at 70%, NVDA at 58.8%, and VoiceOver at 41.3%
- Most common browser combinations for the leading screen readers: JAWS with Chrome at 32.5%, NVDA with Chrome at 16%, VoiceOver with Safari 4.7%
- What is your primary mobile/tablet platform: Apple iPhone, iPad, or iPod touch at 71.9% and Android at 25.8%
- Mobile screen readers used: VoiceOver at 71.5%, TalkBack for Android at 29.1%
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
Why not focus on JAWS?
A good strategy on how to prepare for a compliant site/app is to target with tools that are freely available. This is done solely to be pragmatic.
If you are able to fully navigate your site or application with a keyboard and screen readers such as NVDA or VoiceOver you're in a good position.
When you run into accessibility violations, they are normally triaged as browser bugs. Handle the edge cases and regressions as they come in, triage accordingly and document what combination of browser and screen reader are having the issue. If an issue arises with JAWS and Firefox, now you can justify buying a JAWS license for that specific edge case.
While ideally it would be best to have sufficient user research (people with disabilities and without) and sufficient budgeting to allow a variety of hardware and software mixtures (to account for the variety of combinations) we can make due by being pragmatic in the tools and strategies we choose.
By focusing on keyboard navigation and ensuring both screen readers NVDA and VoiceOver are able to fully navigate your site/app you're in a position to prove good faith.
How to set up various voice over tools, enable keyboard accessibility, and keyboard shortcuts
VoiceOver Keyboard Shortcuts on a Mac
Enabling Keyboard Accessibility on a Mac
extensions, plugins, and tooling
Chrome Extensions
- axe - Web Accessibility Testing
- Accessibility Insights for Web
- HTML5 Outliner
- Color Contrast Analyzer
Firefox Extensions
Plugins
Automated Tooling
- axe-core
- jest-axe
- cypress-axe
- axe-playwright
- EqualAccess
- jest-puppeteer-axe
- axe-puppeteer
- react-axe
- tota11y
- lighthouse
free resources
Sites
- 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
Blogs
- Inclusive Components
- Accessibility in Government
- a11y with Lindsey
- Journey of a Disabled Web Developer
Posts
Books
Courses
paid resources
Courses
- 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
Books
- Inclusive Components: The Book by Heydon Pickering
- The Bootcampers Guide To Web Accessibilty by Lindsey Kopacz
PLEASE NOTE: I do not know or work with the above people or organizations, simply recommending good resources.
glossary
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.