Web-browser Accessibility Tools

Khan Academy celebrates Global Accessibility Awareness Day with a whole week of activities. Yesterday on GAAD proper, we were encouraged to set aside our normal work and pick up some accessibility tasks from the backlog or do some a11y-focused professional development.

They also hosted four accessibility lightning talks, and I was happy to give one on a11y tools built into modern web browser. The talk consisted of quick tours through Chrome, Edge, Firefox, and Safari that highlighted some of their accessibility features.

I enjoy preparing presentations about the browser dev tools because it is a perfect excuse for me to learn more about the tools that I have at my disposal. Some of the cool new features that I learned about were:

• Vision-deficiency emulators in Chrome (Rendering tab) and Firefox (Accessibility panel)
• Interactive accessibility trees in Firefox (Accessibility panel) and Chrome (experimental - Inspect panel)
• Targeted accessibility audits in Firefox (Accessibility panel) and Safari (Audit panel)
• Visualized tab order in Firefox (Accessibility panel)
• Automatic Axe scans in Edge (Issues tab)

The recording is private, but my outline for the talk is available at /talks/browser-a11y-tools/. I might re-record the talk for YouTube, so subscribe if you’re so inclined.

Overall, its encouraging to see all of the major browsers putting time and effort into creating tools to help developers built accessible applications. Now we all just need to use them!