These notes are unpolished collections of thoughts, unfinished ideas, and things I want to remember later. In the spirit of learning in public, I'm sharing them here. Have fun exploring, if you want!

50+ Web Accessibility Resources for Web Developers

Tags: [[Accessibility]] [[Drafts]]

At 57 resources so far

Needs sorting:

Lists to draw from:

πŸ”—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. 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!

πŸ”—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.

πŸ”—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.

πŸ”—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

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 PickeringInclusive Components by Heydon Pickering

πŸ”—Inclusive Design PatternsInclusive Design Patterns

πŸ”—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.

πŸ”—Keeping up to dateKeeping up to date

πŸ”—A11y WeeklyA11y 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

πŸ”—LibrariesLibraries

πŸ”—JavaScript LibrariesJavaScript Libraries

πŸ”—Accessible AutocompleteAccessible Autocomplete

πŸ”—Adobe Accessible Mega MenuAdobe Accessible Mega Menu

πŸ”—Accessible Dropdown NavigationAccessible Dropdown Navigation

πŸ”—Modals / DialogsModals / Dialogs

πŸ”—a11y Dialoga11y Dialog

Accessibility 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 ModalReact Modal

πŸ”—React Menu ButtonReact Menu Button

πŸ”—React Clickable BoxReact Clickable Box

πŸ”—React ARIA AccordionReact ARIA Accordion

πŸ”—Reach UIReach UI

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

http://a11y-style-guide.com/style-guide/

πŸ”—eBay MIND PatternseBay MIND Patterns

http://ebay.github.io/mindpatterns/ https://ebay.gitbooks.io/mindpatterns/content/

πŸ”—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

πŸ”—Styled Form ControlsStyled Form Controls

πŸ”—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

πŸ”—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 jsx accessibilityESLint jsx accessibility

https://github.com/evcohen/eslint-plugin-jsx-a11y

πŸ”—Pa11yPa11y

https://github.com/pa11y/pa11y

πŸ”—SitesSites

πŸ”—HTML5 AccessibilityHTML5 Accessibility

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

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

πŸ”—https://a11yproject.com/https://a11yproject.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

πŸ”—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

Img: https://www.ssa.gov/accessibility/andi/help/images/andi-overview.png

πŸ”—ToolsTools

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

πŸ”—WAI List of ToolsWAI List of Tools

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

πŸ”—SortSiteSortSite

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

πŸ”—Pa11yPa11y

πŸ”—SiteImproveSiteImprove

πŸ”—Koa11yKoa11y

πŸ”—TenonTenon

πŸ”—tota11ytota11y

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

πŸ”—https://www.accesslint.com/https://www.accesslint.com/

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

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

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

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

Β© 2021 Ben Robertson

Proudly built with Gatsby.