What is web accessibility?
Web accessibility means that websites, tools and technologies are designed and developed so that people with disabilities can use them. Web accessibility encompasses all disabilities that affect access to the web, including vision, hearing, cognitive, learning, neurological, physical/motor and speech, as well as neurodiverse conditions such as Dyslexia, Autism, Developmental Coordination Disorder (DCD) and more…
Why accessibility matters?
The web has become an essential part of society, but 1 in 5 people have some form of disability that makes it more difficult for them to work in a digital world than the rest. It has, therefore, become increasingly important to make your web applications accessible by all, including people with disabilities.
Web accessibility also benefits people without disabilities; such as people using different devices, people with changing abilities due to ageing, temporary disabilities, situational limitations such as in bright sunlight or in an environment where they cannot listen to audio, and people with a slow internet connection or limited bandwidth.
Web content Accessibility Guidelines (WCAG) 2.1 design principles
The WCAG 2.1 are an internationally recognised set of recommendations for improving web accessibility. They explain about how to make digital services, websites and apps accessible to everyone, including users with impairments to their:
- Vision – like severely sight impaired (blind), slight impaired (partially sighted) or colour blind people.
- Hearing – like people who are deaf or hard of hearing
- Mobility – like those who find it difficult to use a mouse or keyboard
- Thinking and understanding – like people with dyslexia, autism or learning difficulties
WCAG 2.1 design principles
WCAG 2.1 is based on 4 design principles:
- Perceivable – the information and user interface components must be presented to the user in a way that they can recognise and use the service with the senses that are available to them
- Operable – the users can find and use the content, regardless of how they choose to access it (e.g. using keyboard or voice commands)
- Understandable – the users can understand the content and how the service works
- Robust – the content can be interpreted reliably by a wide variety of user agents (e.g. assistive technologies, different browsers etc.)
Web Accessibility testing techniques
Here are the accessibility testing techniques for different types of disabilities.
There are many degrees of visual impairments ranging from difficulty in reading small characters through to complete blindness and colour blindness. Here are the testing tools and techniques for testing web application for vision impairment.
- Test making text larger.
- Test that magnifying the screen (Zoom) should have a linear layout.
- Text should have sufficient colour contrast with the background (greater than 4.5:1 for WCAG 2.1 level AA). Use tools such as WCAG Color contrast checker or similar.
- Test with Keyboard only navigation
- Using the tab, enter, and space bar, navigate the page and ensure each input and interaction can be triggered.
- The keyboard focus is never trapped in a loop.
- Tab order is logical and follows the visual order of elements on the page.
- Check that the focus is always visible when moving through the page with the tab key.
- Model dialog boxes need to trap the keyboard. When a modal dialog box is triggered, the keyboard focus need to immediately move to the first actionable element in the modal.
- Check that the focus never goes to elements that won’t be available to somebody using a mouse.
- Check that all form inputs have explicit labels and descriptions. These attributes are used by Screen readers.
- Check that all relevant images use an ‘img’ tag.
- Check that all images have ‘alt’ attributes.
- Test using screen readers like JAWS, NVDA, ChromeVox, VoiceOver of mac.
- Speech recognition tools such as Dragon Naturally Speaking.
- Colour blindness simulator such as Color blinding chrome extension.
Hearing disabilities include mild to moderate hearing impairment in one or both ears. It includes hard of hearing or deafness. Here are the testing techniques for hearing impairments.
- Subtitles/captions are provided for the video content.
- The content is in simple English.
- Text transcripts of audio content are provided.
- Check that accuracy of captions.
- Check that the captions are synchronised with the audio.
- Summary of audio and video content is provided.
- Check that the audio doesn’t play automatically.
Cognitive, learning and neurological disabilities
The functional cognitive disabilities can range from memory, problem solving, attention, reading, linguistic and verbal, math and visual comprehensions. Here are the testing techniques for cognitive disabilities.
- Check that clear instructions to navigate through the website are provided
- Colour contrast for foreground and background (greater than 4.5:1 for WCAG 2.1 level AA)
- Simple user journeys.
- Progress indicators are provided.
- Error messages should be explanatory and should be in line with the fields.
- Elements are highlighted appropriately.
- Clear headings are provided
- Identify visual ‘heading’ elements.
- Check that all visual ‘heading’ elements use an ‘<h>’ tag.
- Verify that all sub heading elements have a higher number.
Physical or motor disabilities
Physical or motor disabilities are weakness and limitations of muscular control. Here are the testing techniques:
- Use of speech recognition software like Dragon Naturally Speaking.
- All content on the page should be Keyboard accessible
- All content must be keyboard accessible
- Tab order must be logical
- No keyboard traps
- Headings should be used to create a logical outline of the page to allow for quick navigation to page sections.
- Test with alternative keyboards.
- Provide shortcuts for filling up the forms (e.g. postcode lookup).
Speech disabilities include the inability to produce speech that recognisable to other people or software. The testing techniques are mostly similar to vision and hearing disabilities.
Axe-core is the accessibility engine for automated testing of HTML based User Interface (UI) of a website for accessibility violations. There are different implementations available for Axe such as Axe chrome extension, Axe firefox extension, Axe-webdriverjs, Reack-axe, Axe-selenium-java, Axe-selenium-csharp, Protractor-accessibility plugin.
I have also created an Accessibility Empathy Lab at Triad Group PLC for Accessibility testing of Web applications. You can read more about that in my blog post – Creating Triad’s Accessibility Empathy Lab.
Do you do any accessibility testing in your project, if so how do you approach it?