Debugging Missing alt Attributes

CSSAccessibilityPosted on

An image without a proper alt value is usually the worst idea – but of course, it is possible. We can easily debug the missing attribute or the missing value with the following lines:

img:not([alt]),
img[alt=""] {
    outline: 5px solid red;
}

Using this code in a live site is not the smartest way, but you can make an own debug toolkit with a bookmarklet – like a11y.css – or load these in a WordPress preview mode which is for only the editors.

This debugging concept is more than impressive, and there are libraries build on the top of this thinking like a11y.css which is worth to check for more CSS like visual debugging!

Need a web developer? Maybe we can help, get in touch!

Similar Posts

More content in CSS, Accessibility category