Digital Accessibility: How To Ensure You Are Getting It Right

Marisa Bhagwandin
10 Nov 2020

“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)

Digital Accessibility is about ensuring that content produced is accessible to all. This is not just a moral and legal requirement but is also just good business. Below we show 10 basic benefits of ensuring content is digitally accessible from a business standpoint:

  1. It improves usability
  2. It increases reach
  3. It increases ROI
  4. It Increases Brand Image
  5. It increases internal colleague productivity
  6. It minimises legal risk
  7. It increases Search Engine Ranking
  8. It produces cleaner code which is less likely to break
  9. It is cost effective
  10. It results in increased Market Penetration

For more benefits, please follow this link: https://www.w3.org/WAI/business-case/

How do we test for accessibility?

Automated Tools

Most automated tools run a suite of accessibility rules at the code level to find any possible oversights. An example of such a tool is WAVE.

WAVE is an evaluation tool that identifies any code-level and styling issues, such as insufficient colour contrast ratios, missing area properties/alternative texts which makes it harder or even impossible for screen reader software to describe what is on the screen, or any interactive element which is not accessible to keyboard-only users.

Other Automated Tools include:

Manual Testing Methods

The UK Government recommends that companies use the 18F Accessibility Guide when conducting a manual accessibility test. This checklist includes:

  • All interactions can be accessed with a keyboard
  • The keyboard focus is never trapped in a loop
  • All form inputs have explicit labels
  • All relevant images use an img tag
  • All images have alt attribute
  • All multimedia has appropriate captioning and audio description
  • All text has a contrast ratio of 4.5:1 with the background
  • Focus is always visible when moving through the page with the keyboard
  • Tab order is logical
  • Form instructions are associated with inputs
  • Identify elements that may “timeout” and verify that the user can request more time
  • Tables have proper headers and column attributes
  • Heading elements are nested in a logical way
  • All frames have a name element
  • Elements that flash on screen do so at a rate of less than 3 Hz
  • The language for the page is set
  • The language for sections on the page that differ from the site language are set
  • The page makes sense with or without CSS

Interactive Exercise

  1. Click on the link attached, provided by Beverley Newing (Front-end developer at the Ministry of Justice, at the time of writing and former OCC employee): https://record-a-goose-sighting.herokuapp.com/
  2. Go through each page/step of the “Record A Goose Sighting” site and test it with the TAB key and WAVE plugin. Make a note of all the issues you find.
  3. Check your findings against this page: https://record-a-goose-sighting.herokuapp.com/steps/answers

Tabbing might be disabled by default on Firefox. If it is, please refer to the following article: https://www.scottohara.me/blog/2014/10/03/link-tabbing-firefox-osx.html

For more information on the business case for digital accessibility, accessibility guidelines and implementation, please visit the links below:

  1. https://www.w3.org/WAI/standards-guidelines/wcag/
  2. https://www.gov.uk/service-manual/helping-people-to-use-your-service/testing-for-accessibility
  3. https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction
  4. https://www.accenture.com/_acnmedia/pdf-91/accenture-accessibility-advantage-pov-final.pdf