Decorative or redundant images
Designing with decorative or redundant images
Decorative images do not add useful information to a page, while redundant images have content already conveyed in adjacent text. Examples of decorative:
- Images used for visual styling such as borders and spacers
- Images used to add ambiance or visual interest (eye-candy)
A redundant image is adjacent to text that already communicates the information the image conveys. For example, an image of a product is an online store is directly beneath a heading of the product name. Image alt text identifying the product would be redundant.
Follow these best practices for decorative and redundant images:
- Implement decorative images as CSS backgrounds if possible.
- Do not leave out the
altattribute of<img>elements. - Use "null" alt attributes (
alt="") to hide decorative or redundant images from assistive technology. - The
role=presentationattribute also hides the image, though it's not as widely supported as a nullalt.
Good example: Decorative image
In this example, a stock photo of office employees qualifies as decorative if it contains no information relevant to the accompanying page. A stock photo of employees of various ethnicities would be informative if the intent is to show the employer values equity, diversity and inclusivity; in that case, the alt text might be something like "At [organization name] we value diversity". But generally, stock photos are decorative.
HTML
Code begins
<img src="staff.jpg" alt="">Code ends
Good example: Image with redundant adjacent text
The image below is already sufficiently described by the adjacent text. A null (empty) alt value can be used since there is no need to repeat this information.
Example begins
In those days, a circus performer could control three horses with their reins, standing on horseback.
Example ends
HTML
Code begins
<img src="horses.jpg" alt="">
<p>In those days, a circus performer could control three horses with their reins, standing on horseback.</p>
Code ends