πŸ”—Getting Started with Web AccessibilityGetting 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 ProjectThe A11y Project

The A11Y Project is a community-driven effort to make digital accessibility easier.

It features articles on accessibility, a checklist based on WCAG, and other resources.

πŸ”—A11y CoffeeA11y Coffee

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 readerHow 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 WeeklyKeep 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

πŸ”—BooksBooks

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 KalbagAccessibility 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 PickeringInclusive 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 PickeringInclusive 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 KeithResilient 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.


πŸ”—LibrariesLibraries

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

I've grouped these here into general JavaScript libraries, React libraries, and more fully featured style guides / pattern libraries.

πŸ”—General JavaScript LibrariesGeneral JavaScript Libraries

These libraries are generally framework agnostic, or may depend on jQuery.

πŸ”—Accessible AutocompleteAccessible Autocomplete

A JavaScript autocomplete built from the ground up to be accessible.

πŸ”—Adobe Accessible Mega MenuAdobe Accessible Mega Menu

A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin.

πŸ”—Accessible Dropdown NavigationAccessible Dropdown Navigation

A more accessible multi-level dropdown navigation, with an explainer blog post here.

πŸ”—a11y Dialoga11y Dialog

A11y dialog is a lightweight (1.3Kb) yet flexible script to create accessible dialog windows.

πŸ”—MicromodalMicromodal

Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript

πŸ”—React LibrariesReact Libraries

React libraries to help with common accessibility patterns.

πŸ”—React ModalReact Modal

An accessible modal dialog component for React, built and maintained by the core React team.

πŸ”—React Menu ButtonReact Menu Button

react-menu-button is a React component for inclusive-menu-button meant to ease the use of accessible menu buttons in React applications.

πŸ”—React Clickable BoxReact Clickable Box

React component to add onClick to HTML elements without sacrificing accessibility.

πŸ”—React ARIA AccordionReact ARIA Accordion

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 UIReach UI

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 LibrariesStyle Guides / Pattern Libraries

πŸ”—RocketbeltRocketbelt

Rocketbelt is a UX-focused, responsive, and mobile-first pattern library collaboratively assembled at Pier 1 Imports.

πŸ”—A11y Style GuideA11y Style Guide

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.

πŸ”—eBay MIND PatternseBay MIND Patterns

A book with corresponding examples, from the team at eBay.

πŸ”—United State Web Design SystemUnited State Web Design System

A design system for the federal government

Design and build fast, accessible, mobile-friendly government websites backed by user research.

πŸ”—Paragon, the Open edX React Pattern LibraryParagon, the Open edX React Pattern Library

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.

πŸ”—Styled Form ControlsStyled Form Controls

A repository of styled and β€œstyled” form control elements and markup patterns, and how they are announced by screen readers.

πŸ”—Web Experience Toolkit (WET)Web Experience Toolkit (WET)

  • 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

πŸ”—LΓ©onie Watson's Accessible Design PatternsLΓ©onie Watson's Accessible Design Patterns

πŸ”—A11y Nutrition CardsA11y Nutrition Cards

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:

  • Accordion
  • Button
  • Disclosure (Show/Hide)
  • Menu & Menu Button
  • Tabs
  • Tooltip

πŸ”—Automated TestingAutomated Testing

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 & AccessibilityESLint & Accessibility

An ESLint plugin for checking common accessibility errors.

πŸ”—Pa11yPa11y

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.

πŸ”—AccessLintAccessLint

AccessLint is a GitHub App that finds accessibility issues in your pull requests.

πŸ”—aXe: The Accessibility EngineaXe: The Accessibility Engine

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.


πŸ”—SitesSites

πŸ”—HTML5 AccessibilityHTML5 Accessibility

Get the current accessibility support status of HTML5 features across major browsers.

πŸ”—https://axesslab.com/https://axesslab.com/

πŸ”—https://www.accessibility-developer-guide.com/https://www.accessibility-developer-guide.com/

πŸ”—Accessibility for TeamsAccessibility for Teams

https://accessibility.digital.gov/

πŸ”—Four Principles of AccessibilityFour Principles of Accessibility

https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head

πŸ”—https://developers.google.com/web/tools/chrome-devtools/accessibility/referencehttps://developers.google.com/web/tools/chrome-devtools/accessibility/reference

πŸ”—CSS Tricks Accessibility PostsCSS Tricks Accessibility Posts

πŸ”—Inclusive Components - Heydon PickeringInclusive Components - Heydon Pickering


πŸ”—ToolsTools

πŸ”—Accessibility Auditing ToolsAccessibility Auditing Tools

πŸ”—SortSiteSortSite

πŸ”—WAVE: Website Accessibility Evaluation ToolWAVE: Website Accessibility Evaluation Tool

πŸ”—18F list of tools18F list of tools

πŸ”—WAI List of ToolsWAI List of Tools

πŸ”—SiteImproveSiteImprove

πŸ”—Koa11yKoa11y

πŸ”—TenonTenon

πŸ”—tota11ytota11y

πŸ”—https://github.com/liip/TheA11yMachinehttps://github.com/liip/TheA11yMachine

πŸ”—https://github.com/ffoodd/a11y.csshttps://github.com/ffoodd/a11y.css

πŸ”—https://achecker.ca/checker/index.phphttps://achecker.ca/checker/index.php

πŸ”—Browser Extensions / BookmarkletsBrowser Extensions / Bookmarklets

πŸ”—Trashy.cssTrashy.css

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.

πŸ”—ANDIANDI

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


πŸ”—CommunitiesCommunities

πŸ”—Web A11y SlackWeb 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/