Developing with Accessibility in mind

Accessibility is often one part of the software development process which is “an additional” feature just like adding unit and integration tests later on which should be taken into account from the start. It’s not enough that it works or that it looks nice if the user  doesn’t know how to use it or even can’t use it. But how do you, as a developer, start with accessibility? Developing software with accessibility in (technical) mind is easier than you think and here are some tips to help you on the way.

“Developer, accessibility is also your responsibility!”

This article covers some resources and tools which you can use to test your web application or application for accessibility.

tl:dr;

• A11Y Project’s Checklist and Web Accessibility Checklist
• Deque’s Axe and WebAIM’s WAVE
• VoiceOver and NVDA

Resources

• ARIA Authoring Practices Guide (APG) Home
• How to Meet WCAG (Quickref Reference)
• Checklist for WCAG
• Checklist – The A11Y Project
• Web Accessibility Checklist
• WebAim: Resources for reading about Web accessibility.
• Accessibility: Improving accessibility for web pages
• Inclusive Components: Blog which writes about designing inclusive web interfaces, piece by piece. Trying to be a pattern library.

Tools

• Axe: Deque’s excellent accessibility testing tool, Chrome extension and Firefox Add-on
• WAVE Web Accessibility Evaluation Tools
• Accessibility Checker – ADA & WCAG Compliance (Free Scan)
• Web Accessibility Checker for WCAG 2.0 ADA, AODA, EQA Compliance Monitoring

Using screen readers

Developing for better accessibility is easier when you can test how end users “see” things. You can test your software with screen readers on macOS with VoiceOver and on Windows you can use NVDA which can be downloaded free of charge.

Using VoiceOver screen reader

Apple macOS has VoiceOver screen reader which works nicely and lets you see how your application works for users with visual impairment. Using screen reader is quite straightforward but needs some practice. These commands and gestures help you on the way.

As a developer checking your application with VoiceOver is easy but as I personally noticed using it would be easier if you have someone with more experience to show you how it should be used.

Testing NVDA screen reader behaviour on a Mac

Different screen reades behave differently so you need to test also other tools like NVDA. NVDA (NonVisual Desktop Access) is a free screen reader for Windows which enables blind and vision impaired people to use computers.

Although the tool is for Windows you can test it also on Mac with some extra steps on a Virtual Machine.

There’s a bit outdated Gist which explains how to use NVDA on Microsoft Windows Virtual Machine. Here’s the updated steps.

1. Download Microsoft Windows 11 virtual machine
2. Download Virtualbox and import the Edge VM image.

Then in the Virtual Machine:

1. Install guest addons in the VM
2. Download & install latest NVDA from nvaccess.org
3. Download & install SharpKeys and use it to map left an alternative key (eg. Left Ctrl) to the Insert key. This is needed because Macs do not typically have an “Insert” key which is the prefix for many NVDA commands.
4. Log out and log in again for SharpKeys changes to take effect. Pressing Ctrl+N should now launch NVDA.
5. Configure NVDA to use “Laptop” keyboard layout in the NVDA menu (NVDA+n) => Preferences => Keyboard Settings since the desktop layout relies on many keys which do not exist on a standard Mac keyboard.
6. Install the Focus Highlight addon for NVDA which makes it easier to see what object currently has each of NVDA’s different focus targets.
7. Enable the “Speech Viewer” log window via NVDA Menu => Tools => Speech Viewer so you can see what NVDA is saying more easily.

When testing, you may want to try different browsers and in particular Firefox which has historically been the best supported browser by NVDA.

A few performance tips:

1. In Finder, browse to Applications/VirtualBox.app/Contents/Resources, control click VirtualBoxVM.app, select Get Info > Open in Low Resolution.
2. In VirtualBox:
   a. Select Machine > Settings > Storage > Add optical drive > VBoxGuestAdditions.iso > Choose.
   b. Select Machine > Settings > Display:
   i. Video Memory > 128 MB.
   ii. Graphics Controller > VBoxSVGA.
3. When the virtual machine is running:
   a. Select View > Virtual Screen 1 > Scale to 100%.
   b. Select View > Auto-resize Guest Display.

“Virtual machines expire after 90 days. We recommend setting a snapshot when you first install the virtual machine which you can roll back to later. The password to your VM is “Passw0rd!””

Using static analysis for accessibility checks

You can also use static analysis for some easy to find accessibility issues.

Some static AST checker for a11y rules:

• JSX: eslint-plugin-jsx-a11y
• Vue: eslint-plugin-vuejs-accessibility
• Vue: @vue-a11y/axe

Pairing these plugins with an editor lint plugin, you can bake accessibility standards into your application in real-time.