A compendium of accessibility resources for front end developers.
Hi there!
If you’ve come here, I’m guessing you saw my talk on accessibility at JS Conf Hawaii. If you didn’t, well that’s a bit awkward — here are my slides to help get you caught up to speed! I’ve also published a written version of the talk on our Slack Engineering blog.
Thanks for taking the time to up your accessibility game, and for doing your part to make the web a more inclusive space for everyone!
Below are some of the resources I mentioned in my talk, plus a few bonus ones. If you’ve got any feedback or want to suggest additional resources, please let me know! I’ll be updating this post as I’m able to add more.
📖 Accessibility 101
If you’re just getting started, ensuring your website or web app is fully accessible is a great and important undertaking! It can be daunting, but there are a ton of resources online to help you along the way.
- Web Content Accessibility Guidelines (WCAG)
This is the definitive resource for all things accessibility, but is very lengthy reading. Check this out to learn all about specific criteria for meeting Levels A, AA, or AAA with your web content. - WCAG Levels Checklist
For a condensed version of the above, Zag Interactive has this handy table broken up by web features. - Accessibility for Teams
This resource has a great overview for getting started with accessibility, set up for folks who work on federal websites. - Frontend Masters
This compilation of resources is particularly handy if you want to go in depth on the subject.
🔬 Testing
How do you know if your website is currently accessible? Once you’ve got an idea about the different criteria it should meet above, you can test with some of these resources:
General
For testing your full webpage against all criteria at once, you can try some of these tools:
- WAVE
Maintained by the Web Accessibility In Mind group, this tool scans your website and lists out any violations it find. - aXe Plug-in
This plug-in checks your website at the code level, looking for any missing ARIA tags or semantic inconsistencies.
Color Contrast
When evaluating colors, you’re looking at the contrast ratio of the foreground versus background specifically for body copy text, large text (which means 14pt bold and up, or 18pt non-bold and up), and user interface elements.
- Colour Contrast Analyzer
This app allows you to use the color picker or hex codes and will grade your text contrast ratios immediately. - Color Contrast Chrome Plug-in
This resource scans your page for areas that meet the various criteria or not. - Color Tool by Google
This is helpful in particular if you’re building a full color palette. - Colorblind Website Filter
This tool does an awesome job to filter an image of your website for you to check for how it might look to someone with color blindness.
User Interface Zoom
This refers to the built-in browser functionality to zoom in or out on a webpage, using CMD or CTRL + or -. Luckily, testing for this is as simple as triggering those commands to zoom in or out on your interface, and assessing from there! Think of it as similar to how you may test for responsive web design.
Keyboard Interaction Model
Testing your keyboard navigability starts with leaving your mouse aside and seeing if you can interact with your entire interface using only your keyboard. In particular, make sure you’re using semantic HTML and not overloading tab-index where it’s not needed!
- Keyboard accessibility
Introductory article by the WEBAIM group. - How and when to use tab-index
A great article outlining how tab-index is intended to be used and what you should avoid by Ire Aderinokun. - Removing that ugly :focus ring (and keeping it, too)
An article outlining why the focus ring is important, but how to programmatically apply it only while keyboard navigation is being used.
Screen Reader Support
Screen readers are just one type of assistive technology, helpful for folks who are blind or low vision. You can test this out on your Apple using the built in VoiceOver software, or on PC with a free app, NVDA. It can help to test by closing your eyes while the screen reader is on and trying to navigate your content by following it.
- VoiceOver
A guide on Apple’s VoiceOver software. - NVDA
Same but for the PC free software option. - Screen reader access
This resource from digital.gov goes over how to test with screen readers through a video tutorial.
🛠️ Building
Once you’ve isolated a few bugs or if you’re building from scratch, how do you approach accessibility from the code level?
- 9 tips to get bare minimum of web accessibility
This Medium article by Abhijeet Kumar is a great starter kit for getting started, particularly for learning tab order and keyboard interaction work. - WAI-ARIA Basics
This article provides a great overview of how to get started using ARIA labels and patterns. - Mozilla Resources for Accessibility
There’s an existing compendium of articles and resources on the Mozilla.org website as well — they’ve got a lot of great info in particular once you’re digging into complex ARIA patterns! - Mousetrap
A Javascript library for building keyboard shortcuts and interactions.
🌈 Process
Some process changes that have been helpful for us at Slack include building in linters to ensure we’re using ARIA labels where needed, we’re not introducing one-off colors that may not meet our contrast standards, etc.
- ESLint JSX A11y
A linter plug-in to check your code for accessibility mishaps. - ULTRA Testing
ULTRA is a third-party service that can conduct an audit of your web content and provide guidance on which criteria you need work on. - Inclusive Design
Microsoft has an extensive resource for how they approach inclusive design and why accessibility is important. - UI Design for Older Adults
A number of great suggestions to keep in mind to create inclusive interactive experiences for seniors. - Accessibility Training
A great step is to get your team tested on accessibility basics! You can start with this free course from Google on Udacity, or search for local workshops near you. - Accessibility Conferences
Similarly, Digital A11y put together this comprehensive list of Accessibility conferences that can be a great opportunity to learn about best practices and technologies!
Lastly, if you’re looking for the petition to help make Beyonce.com more accessible by hiring Mina Markham, click on over here. 🐝
What kinds of process methods have been helpful for you all? Where’ve you struggled in the build out? What are you interested in learning more about? I’m always down to chat or hear more about how you’re approaching accessibility, so please reach out here or find me online @feesh! 🐟
