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
Photo: Accor group

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.

Image taken from https://www.microsoft.com/design/inclusive/

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.

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/.

Viewing Mac accessibility options

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

Viewing Windows accessibility feature options

Built in to the 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.

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:

  1. Open up DevTools within Chrome
  2. Use Cmd + Shift + P to open up the Command Menu
  3. Select Show rendering to open up the Rendering Pane
  4. 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

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:

  1. Right click an element on the page and select ‘Inspect’
  2. Click on the Styles pane within DevTools
  3. 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

Inspecting an element and viewing it’s colour contrast within the Styles pane

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.

Hovering over an element to check it’s contrast ratio

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:

  1. Open up DevTools within Chrome
  2. Click on the Console pane
  3. Paste the following snippet and then press enter:

Array.prototype.slice.call (document.styleSheets).map(function(el){el.disabled true;});

Viewing a webpage with no stylesheets enabled

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

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:

  1. Navigate to settings
  2. Click on content
  3. Select Images
  4. Use the toggle and turn off images
Displaying the Chrome image settings: chrome://settings/content/images
Viewing the facebook homepage with ‘Show all’ images toggled off within Chrome settings

Use this link to see how to do this on other browsers, https://kb.iu.edu/d/acpv#chrome.

The network throttle check:

  1. Open DevTools
  2. Select Network
  3. Select a preset. Here you can throttle using one of the presets; fast 3g, slow 3g or offline.
Viewing the Network pane within Chrome DevTools
Viewing the throttling options within Chrome DevTools

For further information on throttling, visit the Chrome DevTools page https://developers.google.com/web/tools/chrome-devtools/network

Browser extensions

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.

Image from ChromeLens showing the page tab flow

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

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.

Using the Chrome axe extension to find potential accessibility violations.

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

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.

Using the WAVE Chrome extension to check for accessibility issues.

With wave you can also remove styling to see if your application is still working as expected by toggling the styles to off.

Viewing the WAVE stylesheet toogle to switch styles off and on
Viewing a webpage with no style sheets enabled via WAVE

For further information on the extension and to download it, visit the official WAVE website https://wave.webaim.org/extension/.

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?

Image taken from https://elgl.org/digital-accessibility-is-your-local-government-compliant/

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:

https://www.microsoft.com/design/inclusive/

--

--

--

I am a vibrant, motivated and committed individual, whose main aim towards the IT industry is to apply myself and dedicate my energy to becoming the best hire.

Love podcasts or audiobooks? Learn on the go with our new app.

Deconstructing Suburbia: It’s Time to Change the Way We Look at Architecture

UIUX Project- Atunlo Recycling App

UX DESIGN

READ/DOWNLOAD%* Comprehensive Quality by Design for Pharmaceutical Product Development and…

Mixed methods in design research

What Is the Prevailing Philosophy on OCR in Translation?

Day 26 Training at Ryaz

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Laveenaramchandani

Laveenaramchandani

I am a vibrant, motivated and committed individual, whose main aim towards the IT industry is to apply myself and dedicate my energy to becoming the best hire.

More from Medium

Important Takeaways From The Software Testing Conference 2021

Building a Strong Functional Testing Plan, Why is it Critical?

Critics and confusion about testing

Tester’s Credibility — The struggles of a QA in a fully-remote world.