50+ Web Accessibility Resources for Web Developers
At 57 resources so far
- Rob Dodson a11ycasts
- Articles? The accessibility cheatsheet
- alt Decision tree
Lists to draw from:
🔗Getting Started with Web Accessibility
There are lots of different ways to get started with accessibility, and honestly, looking at a list like what I've compiled here might be more overwhelming than it needs to be. I think getting started with web accessibility can be boiled down into four simple principles, but depending on how you like to learn you may find one or more of these resources helpful. I've certainly consulted them over the years!
Amberley Romo wanted a single place to be able to point people to answer the question, "what is web accessibility and how do I get started?". She built a11y.coffee to answer it.
🔗How to use a screen reader
The Paciello Group has a really helpful quick start guide for screen readers including JAWS, Narrator, NVDA and VoiceOver.
When people ask me how to get started using a screen reader on macOS, I send them this guide from Bocoup: Getting Started with VoiceOver & Accessibility.
Sometimes I find books a helpful way to focus on a topic and cut out a lot of noise. Reading one person's longer perspective on a topic can often be more efficient than reading a bunch of isolated blog posts and cobbling them together. Here are some great books about web accessibility.
🔗Accessibility for Everyone by Laura Kalbag
This is a great overview of the web accessibility landscape. You'll learn about disabilities and impairments, how to plan for accessibility, content and design considerations, HTML and accessibility, testing, and relevant laws and guidelines.
If you want one book intro to the field, I suggest this one.
🔗Inclusive Components by Heydon Pickering
🔗Resilient Web Design by Jeremy Keith
This is more of a history book of the web than a set of tutorials, but in it Jeremy Keith provides so much helpful context for understanding why websites are built in certain ways and not in others, and longer term ideas to follow to build websites that are resilient.
You won’t find any code in here to help you build better websites. But you will find ideas and approaches. Ideas are more resilient than code. I’ve tried to combine the most resilient ideas from the history of web design into an approach for building the websites of the future.
This book explains how we can craft accessible interfaces without extra effort — and what front-end design patterns we can use to create inclusive experiences.
🔗Keeping up to date
The A11y Weekly newsletter, curated by David A. Kennedy, is a great resource for staying connected on what's happening on a weekly basis in the web accessibility community.
The format is usually:
- a featured article on accessibility
- a roundup of some of the best new accessibility writing, tools, resources, and tutorials
- another featured article
🔗Modals / Dialogs
Accessibility dialog is a lightweight (1.3Kb) yet flexible script to create accessible dialog windows.
Reach UI seeks to become the accessible foundation of your React-based design system. It’s early, so there isn’t a whole lot here yet.
🔗Style Guides / Pattern Libraries
Rocketbelt is a UX-focused, responsive, and mobile-first pattern library collaboratively assembled at Pier 1 Imports.
A design system for the federal government
Design and build fast, accessible, mobile-friendly government websites backed by user research.
- An award-winning front-end framework for building websites that are accessible, usable, interoperable, mobile friendly and multilingual
- A collection of flexible and themeable templates and reusable components
- A collaborative open source project led by the Government of Canada
Automated testing is really helpful both for learning about accessibility and making sure the sites you build are accessibile. Automated testing won't catch all issues, but is well-worth the effort to set up! For more info on different kinds of accessibility testing, check out Madalyn Parker's article, Accessibility Testing is Like Making Coffee.
🔗ESLint jsx accessibility
Get the current accessibility support status of HTML5 features across major browsers.
🔗Accessibility for Teams
🔗Four Principles of Accessibility
🔗Browser Extensions / Bookmarklets
Trashy is a bookmarklet that removes the CSS on your page, reveals the structure of your HTML and displays possible errors. All with just a few CSS files.
ANDI (Accessible Name & Description Inspector) is a bookmarklet that:
- Provides automated detection of accessibility issues
- Reveals what a screen reader should say for interactive elements
- Gives practical suggestions to improve accessibility and check 508 compliance
🔗WAVE: Website Accessibility Evaluation Tool
🔗aXe: The Accessibility Engine
AccessLint is a GitHub App that finds accessibility issues in your pull requests.
🔗Web A11y Slack
I hang out in here quite a bit :) My handle is @ben if you want to get in touch! Get an invite here: https://web-a11y.herokuapp.com/