Testing for accessibility
The world of accessibility can be a bit of a minefield. Discover the best tips, tricks and tools that'll help ensure your website is accessible for all.
With updated accessibility regulations for Public Sector websites having been in place for the past 12 months, online accessibility is now firmly on the agenda of many Public Sector organisations. As many of you know, poor accessibility can lead to poor online service adoption, and thus keep disadvantaged members of society feeling abandoned and resorting to traditional methods to resolve their requests.
Whilst we have previously covered tips and tricks for designing websites and online services for accessibility, this article looks at testing for accessibility. If you're having a difficult time ensuring your website is as accessible as it could be, look no further than our useful checklist of things you should keep in mind when testing your website for accessibility.
Become familiar with your users' accessibility requirements
First off, it is essential to ensure you have covered the requirements of all types of disadvantaged users visiting your website. Knowing how they'll perceive, operate, and understand the information you provide is a must. The following is a list of the common accessible users you'll need to cater for and consider when testing for accessibility...
- Blind screen-reader users
- Screen magnification users
- Deaf British sign language users
- Keyboard-only users
- Speech-recognition software users
- Dyslexic users
- Asperger's or autistic users
Not all web browsers are the same
A really important step that is often overlooked is checking your website across a multitude of different website browsers. Testing your website on different website browsers will enable you to highlight small, and in some cases bigger issues your website may have in different browser scenarios - some of which may be essential to how an accessible user interacts with your website. Users' experience of your service will vary according to the technical capabilities of their browsers and devices and not all browsers will show pages in the same way because they all handle different technologies. The following table lists the most common operating systems and browsers that users have, so be sure to check your website works in all of them.
|Windows||Internet Explorer 11|
|Windows||Edge (latest versions)|
|Windows||Google Chrome (latest versions)|
|Windows||Mozilla Firefox (latest versions)|
|macOS||Safari 12 and later|
|macOS||Google Chrome (latest versions)|
|macOS||Mozilla Firefox (latest versions)|
|iOS||Safari for iOS 12.1 and later|
|iOS||Google Chrome (latest versions)|
|Android||Google Chrome (latest versions)|
|Android||Samsung Internet (latest versions)|
Don't rely just on the human eye
Whilst relying on our ability to see will cover a vast range of accessibly barriers that need testing, some barriers are naked to the human eye. Since accessibility has become even more of a necessity for modern-day websites, a range of accessibility checking tools have cropped up across the internet offering the ability to check your website for a range of barriers. Some of the examples these tools highlight include things like...
- Content not being organised into well-defined groups
- Wide pages force users to scroll horizontally
- Colour being used alone to convey content
- All caps text
- Blink elements
- Very small text
- Empty page title
Similar to testing across a range of web browsers, we also recommend running your website across a range of these accessibility testing tools. The following table compares 13 of these accessibility testing tools and details their results when the same common accessibility barriers were checked using them. The first column details the percentage of barriers that each tool found, whilst the second column accounts for any potential barriers that need to be manually checked by the human eye.
|Tool:||Barriers Found:||Barriers and Potential Barriers Found:|
|Nu Html Checker||13%||16%|
The results displayed on the table show that while SortSite identified 40% of the accessibility barriers, Nu HTML Checker only found 13%. This is a great example of why we would encourage testing pages with a wide range of automated checks since often issues will only be detected by one individual tool and not the others.
Think about the technology used to browse
Lastly, when we think about accessibility testing, we'll often imagine just the human individual. In many cases, accessible users will require the use of additional assistive technology to enable their digital user experience. Assistive technologies will help individuals with disabilities, restricted mobility, or other impairments to perform functions that might otherwise be difficult or impossible, this could include things such as screen readers or magnifiers. The table below shows the assistive technologies that are commonly used. As part of your accessibility testing, we recommend testing your site using the following assistive technologies...
|JAWS (desktop screen reader)||18 or later - Chrome (latest version)|
|NVDA (desktop screen reader)||Latest - Firefox (latest version)|
|VoiceOver on iOS (mobile screen reader)||Latest - Safari (version 12 or later)|
|TalkBack (mobile screen reader)||Latest - Chrome (latest version)|
|Windows Magnifier or Apple Zoom (screen magnifiers)||Latest - Any|
|Dragon (speech recognition)||15 of later - Internet Explorer 11|
Looking at some of the specific assistive technologies, the following list will provide you with some additional pointers for checking accessibility for those users using them.
Testing screen readers
A screen reader is a piece of assistive technology frequently used by people with visual impairments or learning disabilities. Typically, the screen reader will start at the top of a website and read the text in order or as indicated with the keyboard. You should test with screen readers by using them to...
- Read every element and header
- Tab through every link
- Check every landmark, for example your footer and any navigation
- Check your use of Accessible Rich Internet Applications (ARIA)
- Check you can fill in any editable fields, for example writing and submitting a form
Testing screen magnifiers
A screen magnifier is a type of assistive technology suitable for visually impaired people with some functional vision. It works by interfacing with a computer's graphical output to present enlarged screen content. When using screen magnifiers, test up to at least 4 times magnification and check for...
- The spacing between elements, for example the gap between a form label and field
- That page elements display consistently on different page layouts - so someone who is zoomed in to a page can always find the search box, for example
- That users know when something happens outside the viewport - for example, with modals or error messages
Testing speech recognition
Speech recognition is an assistive technology that effectively identifies, captures words, and phrases of the spoken language, and turns them into written text. It also allows computer systems to act upon such spoken language. This technology helps people with learning and physical disabilities. To test your service with speech recognition technology, use speech to...
- Navigate to each feature
- Activate every link, button, or interactive element, for example form controls or a media player
- Enter text into any forms if applicable to your service
Testing your website for accessibility doesn't need to be a difficult task. Using the right tools and following our suggested methods, you'll be on your way to ensure your website is complying with all current accessibility regulations. For further reading on accessibility for Public Sector website check out the variety of resources on the GOV.UK website. Useful articles include designing for different browsers and devices and testing with assistive technologies.