50+ Web Accessibility Resources for Web Developers
Tags: [[Accessibility]] [[Drafts]]
At 57 resources so far
Needs sorting:
- Rob Dodson a11ycasts
- Articles? The accessibility cheatsheet
- alt Decision tree
- https://madalyn.dev/blog/a11y-testing-coffee/
Lists to draw from:
- https://github.com/brunopulis/awesome-a11y
- https://github.com/topics/accessibility
- https://dynomapper.com/blog/27-accessibility-testing/246-top-25-awesome-accessibility-testing-tools-for-websites
- https://www.shopify.com/partners/blog/website-accessibility-testing
π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. 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 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 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.
πBooks
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
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 Pickering
πInclusive Design Patterns
π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.
πKeeping up to date
π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
πLibraries
π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.
π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/
πWeb Accessibility Initiative Component Gallery
π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
πAutomated 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 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
π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/