Front-End Tip: Testing Component Accessibility with CSS
A very simple technique to bring inaccessible components to the surface before they make it into production.
I love BEM. I love BEMIT even more.
Write perfectly semantic markup, add your BEM classes and BOOM. Simple? Sure, as long as you’re the only one working on that codebase.
But most likely you’re not. There will be more experienced folks, juniors and people in between. Eventually, someone with a bad day will get his/her hands on your codebase.
BEM’s nature allows for very sloppy development, often without any visual or behavioral downsides at first sight. I’m talking about those moments where you find a <div> that “works” exactly like a <button>:
<div class="button" onClick="doSomething()">Do something</div>This is not good for accessibility. Here’s what I’ve been doing to help with this issue:
Whenever you’re writing CSS for a new component, stop for a minute and think about how to make it accessible. Then, using CSS, create tests for that. For example:
img {
max-width: 100%;
vertical-align: middle;
}@if ($accessibility-testing-enabled == true) {
img:not([alt]) {
outline: 1em red solid;
}
}
That’s a very basic example. You can get a lot more complex and test for ARIA roles, labels and whatever you feel is needed for that particular component to be accessible.
If you build all of your components and objects this way, all you need to do after that is just set that $accessibility-testing-enable variable to trueand all those inaccessible components will come to the surface.
It’s not perfect, it’s not enough, but it sure helps.
