My Accessible Website

Confused by accessibility?
Online testing tools only finding the really basic issues?

MAWD combines automated testing with your input to find everything you need to fix

Try MAWD Free
Back to Tips

How do I set alt text for an image in a CSS background?

Adding alternative text to <img> tags is simple, it goes in the alt attribute. But what do you do if you've included the image as a CSS background?

.search-button
    {
        background: url('search.jpg');
    }

First off, you only need to include alt text if your image is non-decorative and serves a purpose on the page. If it's just a cute cat in the background, you don't need to worry, as explaining that it is there is unnecessary.

If the image serves a purpose and is included on the page via CSS, well I'm sorry but you're doing it wrong.

This fails the WCAG guidelines and the reason is that there is basically no easy way to provide the alt text.

Also, assistive technologies like screen readers will probably not even notice that there is an image present at all.
This is a huge problem if the image is something like a button, or it contains some text that the user may not be able to see.

All non-decorative images must be included using regular <img> tags, and then the alt text can be set as per usual:

<img src="search.jpg" alt="Search" />

Share this

Share on Twitter Share on Facebook Share on Google+

How do you make images accessible?
It's not just about alt text.
Get a printable poster of the full infographic.

Get Poster

Comments

This site uses cookies as described in our Privacy Policy.
By continuing to use our site, you consent to these cookies.