Using ARIA roles and background-image

Here’s something I just learned about, so I’ll make a note here so I can remember it for later.

Here’s the main source:

Often, when adding an image to a web site, I need to have particular control over the images behavior. These needs lead me to use a div with a CSS background-image property, rather than an img.

This is great because it gives access to many powerful formatting rules, like background-cover and background-clip. Unfortunately, it also lowers accessibility. Screenreaders assume that background images are ignorable and decorative.

Here’s how you can fix that. Give the div the ARIA-role of img, and alt text, like this:

<div role="img" alt="description of the background image" />

And that’s it!

I’m using JSX and TypeScript, and TypeScript doesn’t expect a div to have an alt attribute, but as far as I can tell it’s perfectly valid and necessary HTML. You’ve just got to extend the types.


Leave a comment

Filed under Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s