Monthly Archives: November 2018

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: https://fae.disability.illinois.edu/rulesets/IMAGE_1/

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.

Advertisements

Leave a comment

Filed under Uncategorized