Website content, design and layout are three pillars web accessibility leans on. Team members responsible for these components — content editors, designers, developers — have to preach and consistently implement accessibility guidelines and standards. In turn, the responsibility of a quality assurance engineer is to prove whether they succeeded or failed in making a website accessible — both for humans and assistive technologies.
Logicify advises companies to proactively implement web accessibility strategies to accommodate as many customers as possible and reap other financial and business benefits it offers. Our firsthand knowledge is that developing a website or web app with accessibility guidelines in mind is more effective (less time and money consuming) than implementing the same guidelines after the fact.
Think of accessibility as allowing your users to understand the intended message in a way that is convenient for them.
In an offline environment, a restaurant should serve all customers — regardless of their disabilities. Blind ones should be read the menu aloud or given a Braille typed one.
In an online environment, a restaurant’s website to order in should be screen readers friendly and support Tab navigation to serve all customers too.
In previous articles, we defined web accessibility and listed its positive implications for a business. We also gave practical recommendations for making a website accessible to content editors, UI/X designers, and HTML/CSS developers. Start with these articles if you missed them:
* Accessibility in Web Development: How eCommerce and Business Websites Benefit from It
* Accessibility in Web Development: Practical Tips for HTML/CSS Developers
* Accessibility in Web Development: Practical Tips for UI/UX Designers and Content Editors
In this article, we list a few modern assistive technologies used (primarily) by people with disabilities and give a few practical recommendations about quality assurance of a website from accessibility standpoint.
Modern Assistive Technologies
People with disabilities use modern software and hardware, collectively called assistive technologies, to adapt interaction with PC and web to their specific needs. The technologies help them perceive and understand the content, navigate through it and input data.
The most commonly used assistive technologies are:
- Screen readers — software (desktop or browser-based) designed to convert web pages content into text-to-speech or Braille text (e.g., NVDA, JAWS, VoiceOver). The most tricky thing about screen readers is their shortcut keys — one needs some practice to get used to these. Apart from default keyboard shortcuts, you could create custom shortcuts for commands or their sequences using software called accelerators.
- Refreshable Braille displays — mechanical terminals that have dynamically raising and lowering dots (pins) — usually 40–80 characters — conveying the text in Braille system. Such devices are basically small personal computers, which can be used to read, take notes, calculate numbers, or even connect with other devices, such as public interactive kiosks.
- Voice recognition and voice input software, including speech synthesizers.
- Eye tracking software that eases hands-free interaction and allows to control the mouse with eye movements and click it by eye blinking.
- Alternative or customized keyboard and mouse, which are mainly used by people with cognitive and physical disabilities to interact with computers, e.g. illuminated keyboard, keyboard with larger keys, on-screen keyboards, touch-screens, sip-and-puff switches or trackballs, joysticks, touchpads, mouse sticks.
There are also keyboard and mouse filters — software or functions of the operating system that compensate for involuntary finger movements, tremor and spasms.
Some tools commonly used even by people without special needs are assistive too. These are, for instance, screen magnifiers that aid people with some types of low vision; spelling and grammar checking as well as word prediction software that help people type in correct data.
To implement accessibility guidelines, website stakeholders, especially quality assurance engineers, HTML/CSS developers and designers, should have at least a basic understanding of how these assistive technologies work.
Accessibility Tips for Quality Assurance Engineers
It is estimated that only ¼ of web accessibility standards can be robustly checked with automated testing. This includes a way to identify missing Alt text for images and/or image maps, improper table markup, and missing labels in forms. The remaining ¾ of accessibility standards should be tested manually — a heavy responsibility on QA engineers’ shoulders. So, before you start with an accessibility test plan, identify the most important and most visited pages of the website (use Google Analytics reports to identify these).
In the first line, test whether general architecture of a webpage and hierarchy of the content are clear enough even for people who read the page with CSS turned off or using assistive technologies.
Most web-browsers allow to switch to No Style mode, which automatically turns CSS off. Once you got rid of CSS, check whether:
- any important images and content, buttons, forms, or controls disappeared
- the content is still arranged in the correct order
- the interaction with the page is still possible, e.g. could a form be filled in / does the page show error messages or any other previously-visual cues.
Familiarize yourself with how assistive technologies work, but not that superficially as your colleagues-developers did. You would need to get a deeper understanding and master tricky shortcuts for your work.
Here are simulators of various kinds that you should be familiar with:
1) Screen reader simulation
The keyboard shortcuts for the most popular ones for:
A few other commonly used screen readers are TalkBack (Android applications) and Narrator (primarily used in Edge).
2) Simulation of such visual disorders as
3) Distractability simulation to try experiencing the frustration, confusion, and disorientation similar to what a person with certain cognitive disabilities may feel in the web.
In our first article about accessibility in web development, we already mentioned free Chrome Extension, axe-Coconut, which immediately points out to accessibility issues on a web page.
Mind some accessibility peculiarities when checking mobile version of a website. Particular attention should be given to such aspects as interface controls, input requirements (in forms, typing should be keep at minimum), and responsive design, including dedicated image versions for high-resolution or mobile screens. Best of luck with testing!
Helpful Resources for Accessibility Tests
A First Review of Web Accessibility — comprehensive W3C guidelines for testing accessible features
Before and After Demonstration — this is not a regular simulator but a helpful tool to master accessibility guidelines from W3C WAI. It shows the same website in an inaccessible and a retrofitted versions, i.e. with no accessibility barriers and provides useful annotations how to achieve desired accessibility effect.
Originally published at www.logicify.com on February 27, 2019.
