A curated list of digital accessibility resources
This is an opinionated list of good accessibility resources for people that want to do some self-learning about accessibility. My goal is to keep this list extremely short, so I had to make hard decisions about what to include and what to leave out. There are a lot of great resources that I'm not listing here.
Your high-level goal for standards should be to learn what sort of information each standard talks about and how they are structured so that you can use them as a reference when searching for an answer. It's impossible to memorize them all.
This is completely new to me
- What the heck is WCAG?
- Give me the fundamentals
- What is a screen reader?
- Show me code examples
- Show me more code examples
- Accessibility is a civil right
- Evaluating Web Accessibility
- I prefer to watch videos (A11ycasts with Rob Dodson)
Standards
Standards can be complex and hard to read, and therefore are often only referenced as a last resort. I'd argue that they should be consulted first. They are the most authorative source of how things should work. Some browsers, screen readers, and assistive technology don't always provide full support for the standard, but more often then not, they trend in the direction of support. To provide the absolute best expierence for users, you will need to code to the standards (for forwards compatability), and shim any significant gaps in support (for example, that prevent access) in a way that is also forwards compatible.
- WCAG Quick Ref - A dynamic and easy-to-read list of WCAG success criteria (SC). WCAG is the international standard for digital accessibility, so understanding the requirements outlined in this standard is critical to meet conformance. The actual standards can be very hard to read and overwhelming, so the Quick Reference provides another way to quickly glean information. Filter by WCAG version (2.0 or 2.1), level (A, AA, or AAA), and various tags, techniques, and technologies. It also provides links to the understanding documents for each SC and links to relevant techniques.
- Understanding WCAG 2.1 - The success criteria in WCAG can often be vague or otherwise hard to understand. This is where the 'Understanding' documents come in. These documents detail each SC, discuss examples, describe the intent of the SC and dive into how meeting the SC benefits people with disabilities. If you ever have a question about an SC - go here first.
- HTML - HTML is often overlooked, but it is critical for a developer to understand what is and what is not possible in HTML. The semantics (name, role, value, states, and properties) provided by HTML elements and attributes are what makes screen readers possible. For example,
<button disabled>submit</button>
is announced something like "Button, submit, disabled". Additionally, there are rules about how elements can be nested and what attributes are allowed under different circumstances. Assistive technologies like screen readers have much better support for HTML than ARIA, so reach for HTML first. - Using ARIA - The attributes provided by the Accessible Rich Internet Applications (ARIA) standards are often overused, misunderstood, and implemented in such a way that actually worsens the user experience for people with disabilities. This 'standard' (it's more of a note) explains when to use and not use ARIA. This is a must read.
- ARIA Authoring Practices 1.1 - ARIA is designed to be malleable and flexible so that developers can make wacky and innovative designs accessible when there isn't a native way build the design (or example, if an HTML element doesn't exist). This document details some common patterns that ARIA can help with and attempts to standardize them. It provides details on expected keyboard interactions and working examples. Check here first if you have to reach for ARIA.
- ARIA in HTML - You can't just mix ARIA with HTML willy nilly. To guarantee the best possible support with assistive technologies like screen readers, you should also adhere to the restrictions defined in this document. This document describes which ARIA roles and attributes are allowed on different HTML elements. Tools like axe test against these requirements.
- ARIA 1.1 - If all else fails and you need to roll your own, or if you need to fix something and can't correct the HTML due to silly business constraints, reach for ARIA. However, just like HTML, there are rules around when and where you can use various roles and attributes. Read this before writing any ARIA.
- Accessible Name and Description Computation 1.1 - this standard describes how accessible names and descriptions are computed in various scenarios. This isn't something you will likely need to memorize as a developer, but is a fun deep dive and may help you understand why a screen reader is conveying a specific name or description in certain cirumstances.
- HTML AAM - The HTML Accessibility API Mappings describe how browsers should translate various HTML elements and attributes to system accessibility APIs for consumption by assistive technologies like screen readers. This isn't something most developers need to know about, but can be a fun read if you want a deep dive into how your code is translated into a screen reader experience. Note that there are other AAM documents, such as the Core AAM, which focuses on ARIA mappings.
Tools
- Axe - Axe from Deque Systems is a free and open source automated accessibility scanning tool. Download the browser extension and audit your websites and integrate it into your unit tests and CI testing. Also, versions are available for native iOS, Android, and Windows applications.
- Axe Pro - Axe Pro, also from Deque Systems is a more robust version of Axe that features guided manual checks.
- Colour Contrast Analyser - The CCA tool from The Paciello Group is the best color contrast analyzer on the market. Download, install, and use it to grab different colors from your screen (or input colors manually).
- Microsoft Accessibility Insights for the Web - this is a chrome extension that runs automated accessibility testing (via axe) and then walks you through a defined methodology for manual testing with consistent results.
Education and General Resources
- Deque University (paid) - I may be biased, but this is perhaps the best resource available. It is chock full of expert advice and perfect for self-learning. It covers everything from fundamentals, to web accessibility (basics and advanced), QA testing, Program management, PDF and document accessibility, and even mobile application accessibility. It's fairly inexpensive, and worth every penny.
- Deque University (free screen reader reference guides) - Deque University also provides many free resources, one of which are the screen reader keyboard shortcuts and gestures. These documents are (in my opinion) critical when learning how to use a screen reader.
- W3C Web Accessibility Initiative (WAI) - The WAI should be one of the first places you look for accessibility information. They have top-notch resources on fundamentals, policy, tutorials, testing, etc.
- Introduction to Web Accessibility - edX course on accessibility from the W3C WAI
Checklists
I need to start this with a disclaimer. Accessibility is not a checklist. Everyone always asks me for a checklist, which is why I'm including this list. Everything that is in WCAG 2.1 should be on the checklist. As much as you or I might want it to be simpler than that, it just isn't. Remember that WCAG is a minimum requirement and doesn't cover everything. You should do acceptance testing and research with people with disabilities. That being said, you might find the following helpful.
- WCAG Quick Ref - as discussed earlier.
- WAI: Easy Checks - A First Review of Web Accessibility - a great first check for accessibility.
- Accessibility Heuristics from Deque - this is a great "checklist" that is especially useful when reviewing designs.
- Deque University (free) checklist. Links to courses require a subscription, but this is still helpful without a subscription. This is a great resource because it ties each checkpoint to a specific WCAG SC or marks it as a best practice.
- Deque University (paid) - also includes various checklists for different team roles and provides a detailed testing methodology for WCAG 2.1.
More lists
- WAI: Resources
- Some accessibility resources from Scott O'Hara
- My Favorite Resources for Learning Inclusive Design and Accessible Design from Jessica Ivins
- List of accessibility courses from Mike Gifford
Honorable mentions
These are great resources that don't quite fit in the other lists. I can't include everything, but here are some more resources that are worth mentioning.
- a11ysupport.io - a tool similar to Can I Use, but for accessibility
- The business case for accessibility
- Accessibility Axioms
- The different models of disability
- Making Content Usable for People with Cognitive and Learning Disabilities
- Law office of Lainey Feingold
- ADA Title III (legal news)
- Inclusive design priciples
- WebAIM Screen reader survey
- Designing for accessibility and inclusion by Steven Lambert
- A Hidden Market: The Purchasing Power of Working-Age Adults With Disabilities (2018)
- W3C: Cognitive accessibility user research
- Accessibility interview questions by Scott O'Hara
- Abelist languge - The Ableist Jar
- Disability impacts all of us - infographic from the CDC
- Disability Statistics
- How to get keyboard focus to work in Safari and Firefox on MacOS
- Start Building Accessible Web Applications Today course by Marcy Sutton
- List of accessibility resources from the a11yproject, including tools, blogs, sites, books, etc.
- Contrast Grid
- Deque Color palette contrast tool
- Who Can Use (color contrast tool)
- Inclusively hiding and styling checkboxes and radio buttons - Sara Soueidan
Created by Michael Fairchild