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:
- It improves usability
- It increases reach
- It increases ROI
- It Increases Brand Image
- It increases internal colleague productivity
- It minimises legal risk
- It increases Search Engine Ranking
- It produces cleaner code which is less likely to break
- It is cost effective
- 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
- 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/
- 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.
- Check your findings against this page: https://record-a-goose-sighting.herokuapp.com/steps/answers