Testing on a computer
Keyboard Navigation
Note: If you’re on a Mac, you may need to change some settings for the Tab key to work as described here. Adrian Roselli has helpfully compiled a few links to guides for this.
Use the Tab key to cycle through the page you want to look at.
Ask yourself these questions:
- Is there a visible focus indicator at all? If there is, can you spot it easily or is it too subtle?
- Does the focus move in the order you’d expect? This should typically be the same as the order you’d naturally read the page in, i.e. top down, left to right.
- Can you actually reach every button, link and interactive element you see?
- Can you activate the focused elements with the Enter or Space key?
Mouse Navigation
Point at the various interactive elements with your mouse. Can you see any visual indication that they’re interactive when you do?
Zooming in
Try zooming in on the website by holding down Ctrl (Windows) or Command (Mac), then pressing the + key. Zoom until the indicator says you’re at 400%.
Can you still read and navigate on the website? Is it a reasonably pleasant experience?
Testing on a phone
Target size
Have a quick look at the interactive elements on the page, like buttons. Do they feel large enough to comfortably press with your fingers, even if you’re on a shaking bus or similar?
Pinch to zoom
Touch the screen with two fingers, then move them apart to zoom in. Does this work, or is nothing happening? If nothing happens, is there a good reason to prevent users from zooming in? Hint: There usually isn’t.
Landscape mode
First, make sure your phone’s “auto-rotate” setting is enabled. Then flip your phone sideways and look around the site in this mode. Does it automatically adjust to your phone’s orientation and otherwise work properly? Can you see every part of it, or are there things “hidden” outside the screen?
In the image above everything is visible and usable. That’s what we want! Sure, there is some wasted space and some may not like the look and feel of it in landscape mode – but that’s fine!
And… that’s it for now! By spending ten minutes or so going through these steps, you can catch a whole lot of accessibility issues. Of course, this won’t catch everything (or even most things), but it’s a great way to look for low-hanging fruit without much effort.
What’s next?
If going through these quick tests made you want to fix and improve things, here are a few great options for further steps!
Solving known issues
A natural next step after finding accessibility issues could be to fix them. Maybe you and/or the people you work with can do that, or maybe you could use some help. We’d be more than happy to help with this!
Conducting a full accessibility review
As you already know, these quick tests won’t find all the accessibility issues on a website. One of the services we provide is accessibility audits, where we’ll thoroughly review your website and compose a clear, helpful list of the problems we find along with detailed descriptions, suggested solutions, estimates of each problem’s impact and the effort needed to solve it, and references to established accessibility guidelines such as WCAG. You could even combine this with the previous point, letting us help fix the issues we detect during the audit!
Educating and up-skilling your staff
If you really want to get a handle on accessibility, it needs to become an integral part of your workflow. We offer workshops, seminars and courses that can help your staff improve their expertise in accessibility, enabling you to identify and address issues autonomously as well as reducing the amount of accessibility issues that make it onto your websites and other services to begin with.
If you’d like our help with any of this, have a look at our services!