Home accessibilityimagesdecorative image

Decorative image

Impact: Low to high

Users mainly impacted: Blind, severely visually impaired.

RGAA criteria: Criterion 1.2

Explanation

To be able to test, you need to know what a decorative image is.

If the image does not contain any information, the image is not intended to be restituted. Its alternative must then be empty. In addition, it must not have a title attribute.

Tip

To know if an image is decorative or informative, hide it, take into account the context and ask yourself the question:
Did I lose any information?
If so, this image conveys information.

Important

Be careful, an image with content text is not always an image that conveys information. Look at the example below.

101 things to do in London with kids

In this case, when analyzing the context, the image is only a graphical redundancy of the text below. The image is therefore decorative and the alternative should be empty.

Received ideas

Stop abuses for SEO

Some techniques to improve SEO can be a barrier for accessibility: adding useless alternative text to pictures, inserting useless keywords in title attributes, …

Indeed, a screen reader user will be given all this information. But the reading experience will be overloaded with parasitic elements and will make the site content hard to understand.

An image can have an empty alternative

An alternative text is not always necessary for all images. If an image is decorative (it does not convey any essential information to the content), it should not have alternative text. For the same reason as mentioned above, this makes it more difficult for a screen reader user to reproduce content, without gain of information.

How to integrate a decorative image

img tag without caption

  • It is simply necessary to leave the alt attribute empty;
  • The decoration image does not have a title attribute.
<img src="..." alt="">

svg tag without caption

  • Add aria-hidden is set to true;
  • The title and desc tags are absent or empty;
  • The svg tag or one of its children has no title attribute;
  • The svg tag or one of its children has no role, property or ARIA status to label the vector image (e. g. aria-label, aria-describedby, aria-labelledby).
<svg aria-hidden="true" viewBox="0 0 512 512">
    <rect x="64.38" y="149.76" width="159.24" height="27.91"></rect>
</svg>
Tip

How to integrate icons in an accessible way.

font icon

  • The aria-hidden is set to true on the icon container;
  • The title or aria-label attributes are absent.

Accessible location 

<p>
    <span class="fab fa-accessible-icon" aria-hidden="true"></span>
    <span class="text">Accessible location</span>
</p>