Rule

Images or graphics that do not provide additional context or meaning should not be given alternative text.

How to annotate a decorative image

1. Locate at all images, icons, and graphics
2. If an image is not interactive and does not provide meaningful information, then mark the image as decorative

Using HTML to declare a decorative image may be more clear to developers. Below, we’ll explore what HTML / ARIA attributes can be used to hide decorative images from assistive technology.

User avatar with annotation reading “decorative.” Although important, it may is one method of marking an image as decorative may not be entirely clear for developers unfamiliar with accessibility. In that case, you may want to use HTML markup to make this more clear.

How to hide images from assistive technology

Leaving alt attribute null

Images displayed using the img element, can be hidden from assistive technology using an empty alt="" attribute. Leaving the attribute empty will make the value null, thus hiding it from assistive tech.

Keep in mind that img elements that do not contain an alt attribute will fail Name, Role, Value. If and alt attribute contains a space, the image will still be exposed to screen readers.

<!-- DO THIS -->
<img src="..." alt="">

<!-- DON'T DO THIS -->

<img src="...">
<img src="..." alt=" ">

Using ARIA

aria-hidden hides content only from assistive technology (e.g. screen readers. This should not be confused with the HTML hidden attribute which visibly hides content.

<svg ... aria-hidden="true"></svg>

role=”none” and role=”presentation” are synonymous. Since role=”none” is a newer attribute, some suggest using the attribute with presentation until there is full adoption amongst browsers.

<img src="..." alt=" " role="none">
<img src="..." alt=" " role="presentation">
<img src="..." alt=" " role="none presentation">