Marked as decorative

An element is marked as decorative> if:

  • it has a role attribute whose first valid token is either none or presentation; or
  • it specifies or leaves out a native markup language attribute whose presence or absence removes, without replacing, the implicit semantic role of the element, and its role attribute (if it exists) contains no valid token.

Elements should be marked as decorative if and only if they serve an aesthetic purpose, provide no information, and have no functionality.

An element is marked as decorative as a way to convey the intention of the author that the element is pure decoration. It is different from the element actually being pure decoration as authors may make mistakes. It is also different from the element being ignored by assistive technologies as presentational roles conflict resolution may ignore this intention.

Elements can also be ignored by assistive technologies if they are hidden. This is different from marking the element as decorative and does not convey the same intention. Notably, users interacting with the page may show and hide elements, while elements that are marked as decorative should stay so through all states of the page.

Examples

This <img> element is marked as decorative as it contains an alt attribute that is equal to the empty string, removing its implicit role of img:

<img src="https://picsum.photos/200/300" alt="" />

Like all other HTML and SVG elements, an <img> element can also be marked as decorative by assigning it a semantic role of none or presentation:

<img src="https://picsum.photos/200/300" role="presentation" />

This <a> element is marked as decorative as it does not contain an href attribute, removing its implicit role of link:

<a>Hello world</a>