🔗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.
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!
The A11Y Project is a community-driven effort to make digital accessibility easier.
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, and answers it quite well!
🔗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.
🔗Keep up to date with A11y Weekly
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
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
If you want a one book intro to the field, I suggest this one.
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.
🔗Inclusive Design Patterns by Heydon Pickering
This book aims to show how to build accessible web interfaces without extra effort and provides front-end patterns as examples
🔗Inclusive Components by Heydon Pickering
This book looks at common web design patterns through the lens of inclusion and shows more accessible, robust solutions for these common patterns. Some of the components are available for free at inclusivecomponents.design.
🔗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.
As in most areas of web development, smart, helpful people have built robust open-source libraries to help solve common accessibility problems. If you're looking to build a new component or are having trouble implementing a pattern they way you think it should be, you may find some help here
These libraries are generally framework agnostic, or may depend on jQuery.
A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin.
A more accessible multi-level dropdown navigation, with an explainer blog post here.
A11y dialog is a lightweight (1.3Kb) yet flexible script to create accessible dialog windows.
React libraries to help with common accessibility patterns.
An accessible modal dialog component for React, built and maintained by the core React team.
react-menu-button is a React component for inclusive-menu-button meant to ease the use of accessible menu buttons in React applications.
React component to add onClick to HTML elements without sacrificing accessibility.
This accordion component aims to follow the guidelines set out in the WAI-ARIA Authoring Practices 1.1 and uses the render props pattern to be as flexible as possible.
Reach UI seeks to become the accessible foundation of your React-based design system. Each component is tested with Safari + VoiceOver, Firefox + NVDA, and Edge + JAWS.
🔗Style Guides / Pattern Libraries
Rocketbelt is a UX-focused, responsive, and mobile-first pattern library collaboratively assembled at Pier 1 Imports.
This application is a living style guide or pattern library, generated from KSS documented styles, with an accessibility twist.
It comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive.
A book with corresponding examples, from the team at eBay.
A design system for the federal government
Design and build fast, accessible, mobile-friendly government websites backed by user research.
Paragon is a pattern library containing accessible React components and a SCSS foundation built on Twitter Bootstrap. Paragon is developed for the Open edX platform.
A repository of styled and “styled” form control elements and markup patterns, and how they are announced by screen readers.
- 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
A11Y Nutrition Cards from Dave Rupert are an attempt to simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.
There are examples for:
- Disclosure (Show/Hide)
- Menu & Menu Button
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.
An ESLint plugin for checking common accessibility errors.
Pa11y is your automated accessibility testing pal. It runs accessibility tests on your pages via the command line or Node.js, so you can automate your testing process.
AccessLint is a GitHub App that finds accessibility issues in your pull requests.
Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It's fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.
Get the current accessibility support status of HTML5 features across major browsers.
🔗Accessibility for Teams
🔗Four Principles of Accessibility
🔗Accessibility Auditing Tools
🔗WAVE: Website Accessibility Evaluation Tool
🔗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
🔗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/