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
This is great because it gives access to many powerful formatting rules, like
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.