3 CSS Tricks to uncover Accessibility Issues
Tags: css, html, webdev, a11y
Published: 2019-11-05 12:30:32

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**!

{% link https://dev.to/raddevon/why-should-i-care-about-web-accessibility-5a86 %}

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](https://www.w3.org/International/geo/html-tech/tech-lang.html#ri20030112.213801634) it is considered best practice to use the [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) 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:

```css
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:

```css
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](chartjs.org), simulate [tearable cloth](https://codepen.io/dissimulate/pen/KrAwx) or [demonstrate gravity](https://codepen.io/akm2/pen/rHIsa) 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](https://developer.mozilla.org/en-US/docs/Web/Accessibility/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.:

```html
<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:

```css
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:

{% codepen https://codepen.io/devmount/pen/ZEErgqJ default-tab=css,result %}

*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](https://jsfiddle.net/devmount/g4cj36yL/).*

## 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:

```css
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*