Technical guide
Last updated
Choosing decorative or informative images
The same picture can need a full description in one place and none in another. The test is what the picture adds to the page.
Cover the image. If the page loses meaning, the image is informative. If nothing is lost because the words beside it already say it, the image is decorative.
A scene on its own, a diagram, or an icon that is the only label for a button is informative. Use the alt text from the asset page, or adapt it to what the image means in your context. Describe what it shows, not that it is a picture.
An icon beside the words "Wheelchair access" repeats them. Hide it, so a screen reader says the words once. Disabled people drawn well are not decoration in a story about them, so think before you hide a person.
<!-- informative -->
<img src="scene.svg" alt="A woman working at a laptop in a power wheelchair.">
<!-- decorative -->
<img src="wheelchair.svg" alt="">
<svg aria-hidden="true" focusable="false">...</svg>