Skip to content

Your Cookie Settings.

We’re using cookies as specified in our cookies policy to give you the best experience on our website. You can find out more about which cookies we are using or switch them off by clicking Manage settings

Accept and continueManage settings

View navigation

Knowledge Hub.

Digital Accessibility: How To Ensure You Are Getting It Right.

10 November 2020

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