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!

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.

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

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

🔗Modals / DialogsModals / Dialogs

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

🔗Micromodal Micromodal

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

🔗React LibrariesReact Libraries

🔗React Clickable Box React Clickable Box

🔗React ARIA Accordion React ARIA Accordion

🔗Reach UI Reach 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

🔗Rocketbelt Rocketbelt

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

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

🔗eBay MIND Patterns eBay MIND Patterns

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

🔗Web Accessibility Initiative Component Gallery Web Accessibility Initiative Component Gallery

🔗United State Web Design System United 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 Library Paragon, the Open edX React Pattern Library

🔗Styled Form Controls Styled 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 Patterns Léonie Watson's Accessible Design Patterns

🔗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

🔗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/reference https://developers.google.com/web/tools/chrome-devtools/accessibility/reference

🔗CSS Tricks Accessibility Posts CSS Tricks Accessibility Posts

🔗Inclusive Components - Heydon Pickering Inclusive Components - Heydon Pickering

🔗Browser Extensions / BookmarkletsBrowser Extensions / Bookmarklets

🔗Trashy.css Trashy.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.