The a11y Monthly: Accessibility testing for beginners

In-depth accessibility testing requires knowledge and experience. But even if you’re not a specialist, you can start testing for accessibility today. In a previous post, I’ve talked about five easy things you can do to improve accessibility. In this post, I’d like to share with you a few tools you can use to test the accessibility of your website and make it better. This is accessibility testing for beginners.

Far from pretending to be a complete list of all the available accessibility evaluation tools, these are just some of the tools I use on a daily basis.

Browser with styles disabled

I’m an old-school guy and I like simple things. Before using any specialized tool, I often use my browser to check a website without any visual “distraction”. The quality and semantics of HTML, the content structure and organization, the logical grouping of related user interface controls, etc.; they’re all fundamental aspects of website accessibility. For a first evaluation, there’s nothing better than checking the content of a web page as it’s rendered without any style.

Disabling styles in Firefox and Safari is very simple, you don’t need to be an expert:

• Firefox: View – Page Style – No Style
• Safari: go in Preferences – Advanced – Show Develop menu in the menu bar. From the “Develop” menu, choose “Disable Styles”

Even if you don’t know any HTML, you can now check your content reading it in a linearized way. That’s the standard way assistive technologies users experience content on the web. Does your content still make sense? Is the content organization logical and easily understandable? Can you easily find content? Are all links and buttons meaningful even when read out of context? Are all form elements properly labeled?

Of course, you should take into consideration that some content might be intended to be hidden and then revealed under some conditions, for example only on small screens for mobile. There might be other exceptions to take into account. Overall, I believe that looking at the content structure without the presentation layer given by CSS is the best way beginners can get an idea of the quality of their content.

Play the screen reader game

My dear colleague Rian Rietveld used to say that your website tells a story. I think that’s a wonderful way to say your content should be simple and understandable by everyone.

I’d like to suggest an interesting testing game you can play to try to tell the story of your website. Ask one of your friends to listen while you read the content of your website. Read just what appears in your browser with styles disabled. You can describe the HTML elements, for example for a link you can say “link,” for a heading say “heading,” or when there’s an image you can use the image alt text.

Doing so, you’re playing the role of a screen reader, and your friend is the screen reader user. Ask your friend to perform a task on your website and give you commands to execute based on the content you’re reading.

Far from pretending to be a scientific method, this little game can help you understand what the most common accessibility barriers are and how you can improve the quality of your content.

Keyboard

Your keyboard is the second best tool you can use to test for accessibility. Just unplug your mouse, disable your trackpad, and use only your keyboard.

Testing for keyboard accessibility is critical not only because many users use the keyboard, but because it’s a benchmark for device independence. Any user interface, including websites, should be fully operable regardless of the device used to interact with it.

When it comes to motor disabilities, there are so many alternative devices, that it’s nearly impossible to list them all. For example mouth sticks, head wands, single-switch devices, sip and puff switches, eye tracking devices, voice recognition software, and thousands of other devices. As accessibility specialists, we often talk just about the keyboard because there’s one key point to keep in mind: most of the technologies for motor disabilities work through the keyboard or emulating the keyboard. In other words: if it works with a keyboard, it’s very likely it will work with any device.

How can you test for keyboard accessibility? Pressing the Tab key, you can navigate through all the focusable elements in a web page. Pressing Shift + Tab you can navigate in the opposite direction. Note: macOS users may need to enable “All controls” under System Preferences – Keyboard – Shortcuts – Full Keyboard Access. As a beginner, you can check for two basic requirements:

• Can you see where you’re while navigating with the Tab key? Controls you navigate to with the Tab key receive focus, and there should always be a clear indication of where the focus is.
• Can you perform all the available actions on your website using only the keyboard? Any feature should be operable with keyboard only, from navigating to a new page or submitting a form, to the most complex ones.

Chrome and Firefox extensions

Going a bit more technical, there are accessibility evaluation tools that perform a series of checks on a web page and generate reports to help fix the most common accessibility issues. Caveat: as with all the automated tools, sometimes the results can be not fully accurate, and in any case, human testing is always necessary. These tools are handy for beginners to learn and understand the web accessibility standards rather than determine if a web page is compliant.

Two of the most simple to use accessibility evaluation tools are available in the form of browser extensions for Chrome and Firefox: WebAIM Wave and Deque aXe. Usage instructions are available on the download pages.

WebAIM Wave

WebAIM Wave is probably the most simple to use. Just click on the Wave icon in your browser toolbar. After the analysis has completed, Wave will display a column on the left with the results:

The results are split into errors, alerts, and implemented features. Wave is also able to highlight the results in the web page, using icons to indicate the items in the report. At the bottom, an expandable panel shows the page HTML source. Clicking on the “Details” icon in the left column gives you access to detailed information and hints on how to fix the issues.

As a beginner, you are not required to know all the details. You can start learning though. Look at the total number of errors, start learning one specific kind of issue at a time and how to solve it. Step by step, you’ll get more familiar with the accessibility standards.

Pro tip: clicking on the “Outline” icon in the left column will display a panel with the headings hierarchy of your web page. Remember: a proper headings hierarchy is tremendously important for accessibility and SEO.

Deque aXe

Deque aXe is maybe a bit more complicated to use for beginners because it requires to open up your browser’s developer tools panel. You can follow step by step instructions on how to use Deque aXe and just start using it.

Worth mentioning aXe is open source. The aXe accessibility engine is available on GitHub.

Color contrast checkers

There are dozens of color contrast ratio checkers. One of the most simple to use is the Colour Contrast Analyser by The Paciello Group, available for Windows and Mac.

Good contrast between the text color and the background is very important for low vision users. I’d say it’s essential for everyone for good readability. There are rules of course and, without entering technical details, the most adopted requirement is to guarantee a contrast ratio of at least 4.5:1 between text and background. Very big text can have a lower ratio of 3:1.

There are several rules and exceptions, also depending on the accessibility requirements to meet, but as a beginner, you don’t need to know all the details, for now. Testing for color contrast is one of the simpler accessibility tasks. It can greatly improve your users’ experience.

Screen readers

Testing with screen readers is maybe a bit too challenging for beginners. It’s a fascinating experience though. At the very least, I’d recommend searching for some demo videos on the internet. You’ll get a sense of what a screen reader user experience is. Ideally, in one of the next posts, I’d like to talk about how testing with screen readers has completely changed my perspective on web development and has made me a better professional.

Want to help?

At Yoast, accessibility matters a great deal. We know it’s a process and we’re continuously improving, testing, iterating, and developing. We’re always open to feedback and contributions. Please do not hesitate to let us hear your voice. Please report any issues or potential improvements you notice in our products.

Read more: Does accessibility slow down the development process? »