The accessibility testing toolbag

23 May 2020

Image by  Ryan McGuire @gratisography

There’s a lot of tools out there to test accessibility – browser extensions, bookmarklets and apps all designed to make testing accessibility easier. However, and this is really important to note – automated testing will not pick up every error.

If you’re testing for accessibility be prepared to roll up your sleeves for some good old fashioned manual testing. That will involve having to adjust the accessibility settings on your laptop or mobile from time to time. But approach this with caution and make sure you turn the settings straight back when you’re done. I don’t want you to repeat my mistake and wake up to a mobile stuck in zoom mode. A panicked tapping frenzy to try and get my phone screen back to normal resulted in a call to the emergency services. It was not my finest moment.

Here’s a short list of the tools that I’ve found most useful.

Before and After Demo Site

The Introduction to Web Accessibility course provided a link to W3C’ s before and after demo site. This is a really useful practice to explore the problems of an inaccessible site, play around with the testing tools, and learn from the fixes implemented to make the site accessible.

Browser extensions

High Contrast

This High Contrast extension makes it easy to quickly increase contrast or invert colours. The same effect can be achieved from within the system settings for your laptop/desktop.

Lighthouse

Lighthouse is an open source automated tool that runs several audit checks on performance, accessibility, progressive web apps and SEO. I use it from within the Chrome dev tools but it can also be run from the command line.

WAVE

WAVE is a useful tool that carries out multiple web accessibility checks on a page. It won’t catch everything but their goal is to not give false positives. Watch the WAVE webinar on what’s new and what’s coming for more information.

Web Developer

The Web Developer browser extension is available for Chrome, Firefox and Opera and will runs on Windows, macOS and Linux.

Useful checks:

To check the structure of a page –

  • turn off images to show text alts
    images > replace image with alt attributes
  • turn off stylesheets
    css > disable all styles
  • linearize the page
    miscellaneous > linearize page

Zoom Text Only

Zoom text only pretty much does what it says. Zooms text whilst leaving images untouched.

Applications

Contrast Checker

The Contrast Checker tool is useful to double-check colour contrast ratios on a granular level for example when building out individual components. However, it’s easier to check all the elements at once using the WAVE browser extension.

Bookmarklets

To install a bookmarklet, first make sure you have your browser bookmarks bar visible, then drag the bookmarket link up to the bookmarks bar.

Text spacing

To use Text Spacing, visit a site and then click the bookmarklet. It uses css to apply the following text transformations:

  • Ensures the margin spacing between two paragraphs is 2 times the font size.
  • Adjusts the line height to 1.5 times the font size.
  • Adjusts the letter spacing to 0.12 times the font size.
  • Adjusts the word spacing to 0.16 times the font size.

The CSS will be temporarily applied to the page. You can clear the settings by refreshing the browser.

Manual testing

Just a couple more notes. I mentioned manual testing at the start.

Using a keyboard only

First, enable keyboard navigation to all controls

  • system prefs > keyboard > shortcuts > select “all controls”

Then click in the address bar and stop using the mouse.

  • tab – to move forward through elements
  • shift + tab – to move back through elements
  • arrow keys – to move within elements

Screen readers

For now, I’m using the native MacOs VoiceOver. Aftr having read an accessibility report that listed findings relevant to NVDA I am planning to set up a windos virtual environment so I can also test with NVDA on a mac. I’ll document that here when I do it.

Testing on a mobile device

iOS VoiceOver

  • To activate VoiceOver
    Settings > General > Accessibility > VoiceOver
  • To activate the accessibility shortcut menu
    Settings > General > Accessibility > Accessibility Shortcuts
    Triple click the side button (home button on older devices) to toggle accessibility voice over and zoom.

To navigate your mobile with VoiceOver turned on

  • Explore by touch: tap around the screen with one finger to explore a page.
  • Gesture navigation: swipe left or right with a single finger to move from one element to the next in sequence.
  • Focus on an element: single tap selects and sets focus on an element so it is announced.
  • Activate an element: double-tap a single finger to open selected elements – links, press buttons.

Using the rotor to navigate

  • rotate two fingers clockwise or anticlockwise to select the Rotor settings.
  • Gesture navigation with rotor: swipe up or down to jump between elements.

Screen Curtain turns off your display. Quickly triple tap with three fingers to turn on or off. If the Zoom feature is in use, tap four times.

Android TalkBack

1. Switch Talkback on and off

  • To activate TalkBack
    Settings > Accessibility > TalkBack
    Make sure the device volume is turned up as TalkBack doesn’t automatically adjust the volume if muted.
  • To activate the accessibility shortcut key
    Settings > Accessibility > Accessibility shortcut 
    Press and hold the Power button until you hear a sound or feel a vibration or touch and hold two fingers on the screen until you hear spoken confirmation.

To navigate your mobile with TalkBack turned on

  • Explore by touch: drag your finger over the screen to have TalkBack describe the items under your finger.
  • Gesture navigation: swipe left or right with a single finger to move from one element to the next in sequence.
  • Focus on an element: single tap selects and sets focus on an element so it is announced.
  • Activate an element: double-tap a single finger to open selected elements – links, press buttons.

Next Steps

All tooled up and ready to test? Great, give me a couple of days and I will have written up an accessibility checklist. But if you can’t wait, here’s a useful reference from GDS (Government Digital Services) on doing a basic accessibility check.