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:

Table of Contents

{:.no_toc}

  • TOC {:toc}

Style Guides / Pattern Libraries

Rocketbelt

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

A11y Style Guide

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

eBay MIND Patterns

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

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

Styled Form Controls

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

A11y Nutrition Cards

How to use a screen reader

Basic screen reader commands for accessibility testing

A quick start guide for JAWS, Narrator, NVDA and VoiceOver

Getting Started with VoiceOver & Accessibility

This is the article I send to everyone who asks me how to get started using their screen reader on macOS.

JavaScript Libraries

Accessible Autocomplete

Adobe Accessible Mega Menu

Accessible Dropdown Navigation

Modals / Dialogs

a11y Dialog

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

Micromodal

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

React Libraries

React Modal

React Menu Button

React Clickable Box

React ARIA Accordion

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.

Automated Testing Tools

ESLint jsx accessibility

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

Pa11y

https://github.com/pa11y/pa11y

Sites

HTML5 Accessibility

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

https://axesslab.com/

https://a11yproject.com/

https://www.accessibility-developer-guide.com/

Accessibility for Teams

https://accessibility.digital.gov/

Four 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

CSS Tricks Accessibility Posts

Inclusive Components - Heydon Pickering

Browser Extensions / Bookmarklets

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.

ANDI

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

Tools

18F list of tools

WAI List of Tools

WAVE: Website Accessibility Evaluation Tool

SortSite

aXe: The Accessibility Engine

Pa11y

SiteImprove

Koa11y

Tenon

tota11y

https://github.com/liip/TheA11yMachine

https://www.accesslint.com/

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

https://github.com/ffoodd/a11y.css

https://achecker.ca/checker/index.php

Books

Resilient Web Design

Accessibility for Everyone

Inclusive Design Patterns

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.

Communities

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/

© 2020 Ben Robertson

Proudly built with Gatsby.