Over one billion people worldwide live with a disability that can affect access to the Web. This guide is a starting point for Software Engineers to make sure UI elements are accessible.
“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” —Tim Berners-Lee, W3C Director and Inventor of the World Wide Web
📖 Table of Contents
- 📘 Automated and Manual Testing
- 🎬 Take Action to Remediate Issues
- ✅ Accessibility Testing Checklist
- ❓ Resources and Training
- 📋 Related articles
📘 Automated and Manual Testing
After creating or updating a page or another frontend component, check your work by doing the following:
-
Automated Audit: Run an accessibility audit using at least one of the following tools:
- Google Chrome’s Lighthouse
- Video Tutorial (Skip to 1:22): Google Lighthouse | Automated Accessibility Tool Review
- Blog: Do an Accessibility Audit using Google Chrome LightHouse
- Accessible Web’s Extension
- Google Chrome’s Lighthouse
-
Sufficient Color Contrast Ratio: Check if the color contrast ratio is accessible with one of the following tools:
- Use the color contrast tool that is part of the Accessible Web extension
- Copy the text and background colors into this handy tool, Are My Colors Accessible, and play with the hue, saturation, and lightness meters until you find a combination of text and background colors that is accessible and use those colors on your page.
-
Screen Reader Capability: Use a screen reader to read the elements on the page. You should have the ability to read out all field labels, alternative text, headings, navigation, and error messaging. Choose your OS adventure:
- MacOS: no downloads necessary! Macs have accessibility features out of the box
- Windows
-
Keyboard Compatibility: Use only the keyboard to interact with the elements on the page. You should have the ability to navigate menus, fill out and submit forms, open links, and open/close modals. Keyboard focus should also be visible (usually with a border highlight around the element).
- Click in the browser address bar
- Take your hand off your mouse/trackpad and use only your keyboard
- Start tabbing around
- Use Shift+Tab to navigate backward, spacebar activates checkboxes and buttons
- Look for focus and tabbing order. Can you get to all interactive objects?
- Demo of browsing & interacting using a keyboard: Browsing with a keyboard
-
Zooming In: Check for loss of content or functionality by zooming in to 200% in the browser.
- Do any elements overlap other elements? i.e. an image overlaps text or navigation
🎬 Take Action to Remediate Issues
- Fix issues identified in the automated audit and manual testing.
- Run the audit and manually test again to make sure everything is fixed.
- Pat yourself on the back! You made the page more inclusive!
✅ Accessibility Testing Summary Checklist
Refer to this checklist each time you need to test for accessibility and use the instructions above as needed.
- Run an automated audit using Google Chrome Lighthouse or Accessible Web Extension.
- Check for a sufficient color contrast ratio for all text and background colors.
- Use a screen reader to read the elements on the page.
- Start in the browser address bar and use only the keyboard to interact with the elements on the page.
- Zoom in to 200% in the browser and check for any loss of content or functionality.
- Fix any issues detected.
❓ Resources and Training
W3C Web Accessibility Initiative’s more in-depth guide of easy things to do to test accessibility: Easy Checks – A First Review of Web Accessibility
W3C Web Accessibility Initiative’s official guidelines: Web Content Accessibility Guidelines (WCAG) 2.1
Cover photo by Elizabeth Woolner
Top comments (0)