I recently read a great article by Devon Campbell that reminded me once again how important it is to build awesome websites which are accessible at the same time!
And that made me want to share some lines of CSS that I like to add to my projects from time to time. It's a quick and easy way to see, if there are some accessibility issues in my markup. I can imagine, that the majority of us don't spend enough time improving accessibility on their web projects - but if I have a clear visualization of elements that are difficult to access (e.g. for people that rely on a screen-reader), I am much more motivated to fix all accessibility flaws.
1. Missing html language attribute
According to the w3c it is considered best practice to use the lang attribute on the <html> tag (which is the only reason to even use the <html> tag anymore since it is optional). They state that it's "important for applications such as accessibility and searching". So if you have a lot of static html pages, this might be a good addition to your CSS for showing with a red top border, if a page has the language attribute set or not:
html:not([lang]),
html[lang=""] {
border-top: 20px solid red;
}
Note, that there is also a xml:lang attribute which can be considered here.
2. Missing alternative text for images
This is a major accessibility issue on a lot of websites. Screen-readers cannot guess the content of an <img /> unless it is described by text. Here's the CSS to highlight all images with a red border that have no or an empty alt attribute:
img:not([alt]),
img[alt=""] {
border: 5px dashed red;
}
Note, that image elements with an empty alt attribute are commonly used for images that are not relevant for the content and purely decorative. If you are using images like that, feel free to modify the above CSS.
3. Missing role and aria label for canvas
The <canvas> element is now widely used for very different purposes. You can e.g. draw a doughnut chart on it with Chart.js, simulate tearable cloth or demonstrate gravity with it. Just as with images, a screen-reader cannot know what's going on here without proper description. In case you didn't know: There is a technical specification published by W3C that specifies how to increase the accessibility of web pages - the WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). There are a lot of aria- attributes specified, in case of the canvas the attributes role and aria-label would be suitable, e.g.:
<canvas role="img" aria-label="A doughnut chart showing A 51%, B 32% and C 17%"></canvas>
So when canvas elements are missing those two attributes, they can be marked with a red border like this:
canvas:not([role]),
canvas:not([aria-label]),
canvas[role=""],
canvas[aria-label=""] {
border: 5px dashed red;
}
Try it for yourself
You can play around with the above CSS rules in the following Pen:
Note, that no top red border appears in Codepen, as the lang attribute is automatically set here. You can see its effect in this fiddle.
Wrap it up
So with a little bit of CSS you can quickly find issues in your markup making your website less usable for people with limitations.
These CSS rules are just meant to be visual helpers to detect missing attributes that are relevant for accessibility. Of course you could and should use your IDE or external tools to check the accessibility of your website!
And (this should be obvious but I rather say it again): please only use these CSS rules in development!
It's also fun to secretly insert it in your friends or coworkers project 😄 It's definitely a way to draw their attention to accessibility! For that case, I've minimized the examples above for you:
html:not([lang]),html[lang=""] { border-top: 20px solid red; }
img:not([alt]),img[alt=""] { border: 5px dashed red; }
canvas:not([role]),canvas:not([aria-label]),canvas[role=""],canvas[aria-label=""] { border: 5px dashed red; }
You're welcome! If you have other suggestions where CSS can visualize accessibility issues, I would love to read them in the comments!
Published: 5th November 2019
Top comments (0)