A11Y for all
The importance of accessibility
Accessibility testing :- “Accessibility testing is a subset of usability testing where in the users under consideration are people with all abilities and disabilities. The significance of this testing is to verify both usability and accessibility.”
Accessibility aims to cater for people of different abilities such as:
- Visual Impairments
- Physical Impairment
- Hearing Impairment
- Cognitive Impairment
- Learning Impairment
Current UK figures show:
There are 14.1 million disabled people in the UK. About 15% of the world’s population lives with some form of disability.
- 8% of children are disabled.
- 19% of working age adults are disabled.
- 44% of pension age adults are disabled.
Accessible practices can be good for everyone and including more people in your business can give you access to a larger pool of potential customers. There are many benefits that come with accessibility that are beyond legal protections, such as the good will such an act creates, and the relationships you can build in your community. Including everyone is more than just the right thing to do and accessibility can be seen as a smart business decision overall.
In this blog myself (Laveena Ramchandani) a Senior Tester and Viv Richards who is a Test Lead, will take you over how we could include accessibility testing in our teams within budget and without any barriers. You don’t need to spend money to make your site accessible.
The A’s recap
Level A:
For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided
Level AA:
For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided
Level AAA:
For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided
Accessible for all
When it comes to making things accessible for everyone, there are four main areas that we should focus on; touch, see, hear and speak.
Things already on your machine you can use
There are a number of tools that come pre-installed depending on the operating system that you are using.
Not only are these a great aid to users who require them but you can also use these options in order to test how somebody with a need may use the web application for example that you might provide on their machine.
Mac Accessibility Options
Apple Mac offers a good range of accessibility options available to assist users in operating their computer. These range from how things are displayed, read out to a user or how they may navigate.
You can view a complete list of these options and how to use them by visiting the official Mac page https://www.apple.com/uk/accessibility/mac/.
Windows Accessibility Features
The latest Windows operating system also offers a number of accessibility options available to assist users in operating their computer. Some examples of these features are how things are displayed, colour contrasts and also how things are read out to the user.
You can view a complete list of these features and how to use them by visiting the official Microsoft page https://www.microsoft.com/en-us/accessibility/windows?activetab=pivot_1%3aprimaryr2
Built in to the browser
Chrome web browser
Most modern browsers provide some great tools in order for you to improve how you develop your web applications but for this blog post we are going to focus on the Google Chrome web browser.
Provided you have the Google Chrome web browser installed, you will have a number of tools available to you which you could use to help you test with accessibility in mind. Below are some of the things you can start to test.
Checking vision deficiencies
Web developer tooling to improve accessibility has improved rapidly over the years. Emulating vision deficiencies on your website can help improve the design and user experience of your website to ensure it is accessible to as many people as possible.
To emulate a vision deficiency:
- Open up DevTools within Chrome
- Use Cmd + Shift + P to open up the Command Menu
- Select Show rendering to open up the Rendering Pane
- Select a vision deficiency from the Emulate vision deficiencies section
The available options are:
- No emulation — Does not apply any vision deficiency emulation
- Blurred vision — Where vision is less precise
- Protanopia — Colour blindness resulting from insensitivity to red light
- Deuteranopia — Red-green colourblindness
- Tritanopia — Impaired blue and yellow vision
- Achromatopsia — Total absence of colour vision
Checking colour contrasts
All text displayed should be readable by all users, checking that the colour contrast between a foreground and it is background colour is one way to ensure that this is the case.
To check colour contrasts:
- Right click an element on the page and select ‘Inspect’
- Click on the Styles pane within DevTools
- Click on the color property
Here you will be shown a popup which shows the colour contrast ratio for the chosen element along with a ed contrast ratio by dragging the marker below the white lines drawn above the colour pallet.
You can find a step by step guide of how to do this by visiting the following page: https://webaim.org/articles/contrast/devtools
Chrome also has recently introduced a neat popup which displays where you inspect and hover over an element, here you can get a quick peek at the colour contrast ratio for the hovered over element without having to go to the Elements pane.
Removing styles
Sometimes you might want to test how a page looks and reads without any styling being applied. This can be useful in ensuring the page flows well and everything still makes sense. Sometimes though you may be working on a computer where you might be unable to install third party extensions or tools. This check can still be achieved within the browser by using some JavaScript within the Chrome browsers console.
To check:
- Open up DevTools within Chrome
- Click on the Console pane
- Paste the following snippet and then press enter:
Array.prototype.slice.call (document.styleSheets).map(function(el){el.disabled true;});
Generating an accessibility report
Lighthouse is an open-source tool available within the Chrome Browser. Not only does this tool provide a way for you to generate responsiveness, performance, best practices and an SEO report but it also can generate an accessibility report for you. As part of the accessibility report it also provides a manual check list of things which you should consider checking with accessibility in mind.
You can view a complete list of Lighthouse features and how to use them by visiting the DevTools Lighthouse page https://developers.google.com/web/tools/lighthouse
Working on a lower bandwidth?
Some individuals prefer working on a lower bandwidth and prefer removing images from websites or changing the network settings. We should still expect our application to work accurately when images are removed. Furthermore DevTools offers a network throttle, which helps simulate a lower bandwidth to see how well your page is being displayed to the users.
To remove images:
- Navigate to settings
- Click on content
- Select Images
- Use the toggle and turn off images
Use this link to see how to do this on other browsers, https://kb.iu.edu/d/acpv#chrome.
The network throttle check:
- Open DevTools
- Select Network
- Select a preset. Here you can throttle using one of the presets; fast 3g, slow 3g or offline.
For further information on throttling, visit the Chrome DevTools page https://developers.google.com/web/tools/chrome-devtools/network
Browser extensions
Checking for tabability
ChromeLens is a free Google Chrome extension that provides a number of tools to assist users with testing with accessibility in mind. This extension offers a vision similar to the one offered within DevTools as well as providing an accessibility audit for you but one of the nice tools provided is a ‘tab tracker’.
The tab tracker enables you to check the tabability of your page, visually tracking the flow of navigation as you tab through the page.
To view the tools offered by this extension and download it you can visit the official extension page https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?hl=en
Analysing your page for potential accessibility issues
Axe offers a free Google Chrome extension which enables you to analyse a page to find any potential accessibility issues within your website.
Potential violations are displayed and users are provided with reasons as to why this could be an issue and give you ways in which you can start to resolve these potential issues.
Another great thing with axe is that they offer a CLI (Command-line Interface) which enables you to start to automate the checking of potential accessibility violations within your web applications.
To view the official website of axe and download the extension you can visit the official extension page https://www.deque.com/axe/
For further information on the axe CLI, visit their GitHub page https://github.com/dequelabs/axe-cli
Getting an overview of potential issues
The WAVE extension is available for free for both Chrome and Firefox web browsers. This extension allows you to very quickly and easily evaluate web pages to check for accessibility issues directly within your browser.
The extension neatly displays any issues and also explains what the violation means, matters and how to potentially resolve this problem.
With wave you can also remove styling to see if your application is still working as expected by toggling the styles to off.
For further information on the extension and to download it, visit the official WAVE website https://wave.webaim.org/extension/.
Screen Readers
Screen readers are useful not only for people who have a visual impairment but also to test how things are read, ensuring things read out as expected and would make sense to the end user.
As previously mentioned, MacBook (and iPad) comes with a built in screen reader called VoiceOver which is really popular and Windows offers Narrator, but often people might want to test with more than one screen reader to test how something works using a different operating system for example.
Some of the things to consider when looking at using a third party screen reader are what operating systems can they be installed and run on, and is there a cost in order to be able to use it. For example one of the most popular third party screen readers without a doubt is JAWS.
JAWS is a great tool but it unfortunately comes at a cost, and so sadly this accessibility tool may not actually be accessible to some people’s pockets. Another downside of JAWS is that it also doesn’t work on a Mac.
Visit the official JAWS website https://www.freedomscientific.com/products/software/jaws/
Another popular tool is NVDA, this is a free tool which is also another popular choice, unfortunately this tool is targeted for Windows users and also doesn’t work on a Mac.
Visit the official NVDA website https://www.nvaccess.org/
If you are a Mac user and would like to use either JAWS or NVDA it is possible to get these working by using a VM (Virtual Machine) to run the Windows operating system and installing within that VM.
Benefits:
- Reach a wider audience
- Increasing usability
- Writing a higher quality code
- Satisfies current and future legal requirements and ethics
- Improves maintainability and efficiency
Handy checklist:
- What conformance level are you working towards?
- If I remove images from the page for lower bandwidth can I still use the application?
- The labels are correctly written and placed or not
- Are the labels following the given structure?
- The audio/video content is properly audible/visible or not
- The colour contrast ratio is maintained or not
- Can I tab through the content
- The colours being used on the user interface are accessible
- If the link text is written with content description instead of creating ambiguity
- If a meaningful multimedia caption is provided or not
- If the instructions are clearly given or not
- Are the error messages informative or not
- If the content is clear, concise and understandable or not
- Do input elements have corresponding “for” labels, this is useful for screen readers
Conclusion
In a nutshell can you confirm the following in your product as a user?
We hope the above options are something you might want to consider introducing in your teams.
Sometimes it’s not accessible to purchase tools and this generates a barrier. Many factors contribute to creating accessible solutions;
- Quality assurance
- Accuracy
- Checking for compliance against applicable laws
- Best practices
Accessibility testing ensures that the job gets done right, that your message is free from errors and meets the standards of accessible communication. It is vital to take up social responsibility and improve the business awareness. Bear in mind if the user does not feel comfortable with a product, they won’t use it.
Useful resources
An introduction to making your service accessible:
https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction
Testing for accessibility: https://www.gov.uk/service-manual/helping-people-to-use-your-service/testing-for-accessibility
How to perform a basic accessibility audit yourself:
https://www.gov.uk/government/publications/doing-a-basic-accessibility-check-if-you-cant-do-a-detailed-one
Microsoft inclusive design:
