Accessibility testing

I was doing some accessibility work with a client a little while back. It was mostly giving their site the once-over, highlighting any issues that we could then discuss. It was an audit of sorts.

While I was doing this I started to realise that not all accessibility issues are created equal. I don’t just mean in their severity. I mean that some issues can—and should—be caught early on, while other issues can only be found later.

Take colour contrast. This is something that should be checked before a line of code is written. When designs are being sketched out and then refined in a graphical editor like Figma, that’s the time to check the ratio between background and foreground colours to make sure there’s enough contrast between them. You can catch this kind of thing later on, but by then it’s likely to come with a higher cost—you might have to literally go back to the drawing board. It’s better to find the issue when you’re at the drawing board the first time.

Then there’s the HTML. Most accessibility issues here can be caught before the site goes live. Usually they’re issues of ommission: form fields that don’t have an explicitly associated label element (using the for and id attributes); images that don’t have alt text; pages that don’t have sensible heading levels or landmark regions like main and nav. None of these are particularly onerous to fix and they come with the biggest bang for your buck. If you’ve got sensible forms, sensible headings, alt text on images, and a solid document structure, you’ve already covered the vast majority of accessibility issues with very little overhead. Some of these checks can also be automated: alt text for images; labels for inputs.

Then there’s interactive stuff. If you only use native HTML elements you’re probably in the clear, but chances are you’ve got some bespoke interactivity on your site: a carousel; a mega dropdown for navigation; a tabbed interface. HTML doesn’t give you any of those out of the box so you’d need to make your own using a combination of HTML, CSS, JavaScript and ARIA. There’s plenty of testing you can do before launching—I always ask myself “What would Heydon do?”—but these components really benefit from being tested by real screen reader users.

So if you commission an accessibility audit, you should hope to get feedback that’s mostly in that third category—interactive widgets.

If you get feedback on document structure and other semantic issues with the HTML, you should fix those issues, sure, but you should also see what you can do to stop those issues going live again in the future. Perhaps you can add some steps in the build process. Or maybe it’s more about making sure the devs are aware of these low-hanging fruit. Or perhaps there’s a framework or content management system that’s stopping you from improving your HTML. Then you need to execute a plan for ditching that software.

If you get feedback about colour contrast issues, just fixing the immediate problem isn’t going to address the underlying issue. There’s a process problem, or perhaps a communication issue. In that case, don’t look for a technical solution. A design system, for example, will not magically fix a workflow issue or route around the problem of designers and developers not talking to each other.

When you commission an accessibility audit, you want to make sure you’re getting the most out of it. Don’t squander it on issues that you can catch and fix yourself. Make sure that the bulk of the audit is being spent on the specific issues that are unique to your site.

Have you published a response to this? :

Responses

Denis Boudreau (he/him)

I’ve had this on repeat for 100 years ⬇️⬇️⬇️ “If you get feedback on document structure & other semantic issues with the HTML, you should fix those issues, sure, but you should also see what you can do to stop those issues going live again in the future.” adactio.com/journal/18458

1 Share

# Shared by Hadley on Friday, October 29th, 2021 at 11:30pm

1 Like

# Liked by Nick F on Tuesday, September 14th, 2021 at 2:11pm

Related posts

The intersectionality of web performance

Business, sustainability, and inclusivity.

Accessibility

Making the moral argument.

The main issue

An email to the HTML working group.

Landmark roles

Extending the semantics of HTML5 documents with some accessibility hooks.

Dark mode revisited

Adding another theme to my stylesheet switcher.

Related links

The Folly of Chasing Demographics - YouTube

I just attended this talk from Heydon at axe-con and it was great! Of course it was highly amusing, but he also makes a profound and fundamental point about how we should be going about working on the web.

Tagged with

I worry our Copilot is leaving some passengers behind - Josh Collinsworth blog

Products of all kinds are required to ensure misuse is discouraged, at a minimum, if not difficult or impossible. I don’t see why LLMs should be any different.

Tagged with

Cameron Dutro on ruby.social

Here’s the inside scoop on why Github is making a bizarre move from working web components to a legacy React stack.

Most of what I heard in favor of React was a) it’s got a good DX, b) it’s easy to hire for, and c) we only want to use it for a couple of features, not the entire website.

It’s all depressingly familiar, but it’s very weird to come across this kind of outdated thinking in 2023.

My personal prediction is that, eventually, the company (and many other companies) will realize how bad React is for most things, and abandon it. I guess we’ll see.

Tagged with

Randoma11y - Accessible color combinations

Unusual colour combinations that are also accessible—keep smashing that “New colors” button.

Tagged with

We’re still not innovating with AI-generated UI.

Prototypes and production:

It looks like it will be a great tool for prototyping. A tool to help developers that don’t have experience with CSS and layout to have a starting point. As someone who spent some time building smoke and mirrors prototypes for UX research, I welcome tools like this.

What concerns me is the assertion that this is production-grade code when it simply is not.

Tagged with

Previously on this day

7 years ago I wrote Sonic sparklines

Silly sounds.

13 years ago I wrote The Language of the Web

The Breaking Development conference was the perfect platform for discussing all things mobile.

14 years ago I wrote Alpha

A robot visits Brighton in the 1930s.

15 years ago I wrote HTML5 test results

Tabulating the results from a workshop.

15 years ago I wrote Impact

One Friday in September.

17 years ago I wrote Parroting Pareto

Where the 80/20 principle breaks down.

18 years ago I wrote Speaking at d.Construct

Happy happy, joy joy.

20 years ago I wrote No rest for the wicked

Since getting back from my (extended) holiday in Florida, it’s been go go go. My workload was piling up while I was away and now I’m making up for lost time with Message and Semantico.