Synonyms: Decoration graphic, decorative graphic, non-content-bearing graphic, possibly also background graphic

See also: Graphic

Layout graphics serve the purpose of the visual design of the application, but without conveying information. Layout graphics can be purely decorative, for example, or displayed in text form in parallel with information, but without communicating information in addition to the text.

No.PropertyDescriptionClassificationReference
310ContrastLayout graphics should not be used as background graphics for text, as this affects their readability.

Note: This can lead to insufficient contrast, especially when users adjust the text color or font size according to their requirements.

ShouldEN 301 549: 9.1.4.3, 11.1.4.3, 11.7
311AnimationThe layout graphic may not sparkle, flash or be visually changed in any other way (see Animation
9.2.3.1, 11.2.3.1, 9.2.2.2, 11.2.2.2
No.PropertyDescriptionClassificationReference
312RoleLayout graphics must not receive the focus.MustEN 301 549: 9.1.1.1, 11.1.1.1
No.PropertyDescriptionClassificationReference
313RoleThe layout graphic role must be communicated to the Accessibility API. Alternatively, the layout graphic should not be communicated to the Accessibility API (see Accessibility API
11.5.2.5

Practical tip: layout graphics in Web applications

Permalink "Practical tip: layout graphics in Web applications"

None

The way in which layout graphics are marked depends on the method which is used for the presentation of the graphic:

  • Graphics that are marked with the <img> element should be marked with a blank alternative text as a layout graphic (<img src=… alt="">).
  • Graphics that are marked with the <svg> element should be marked with aria-hidden as a layout graphic (<svg aria-hidden=true>).
  • Graphics that are marked with the <canvas> element should be marked with aria-hidden as a layout graphic (<canvas aria-hidden=true>).
  • Font characters that are purely decorative should be marked as a layout graphic with aria-hidden (<span aria-hidden=true>~~~</span>).
  • Font icons or graphics that are shown before or after as pseudo-elements using the CSS selectors should be marked as layout graphics with aria-hidden (<span class=… aria-hidden=true></span>). In the future, it will be possible for these pseudo-elements to be directly marked as layout graphics in the CSS ( 1.2. Alternative Text for Accessibility - CSS Generated Content Module Level 3 (w3.org) (External Link)). At present, this is not yet reliably supported by the assistive technology, however.
  • Font icons should be marked as a layout graphic with aria-hidden (<span aria-hidden=true>i</span>).
  • Graphics for list characters (list-style-image) cannot be provided with an alternative text or marked as layout graphics and should not therefore be used.
  • CSS background graphics (background-image) are automatically layout graphics.
  • Other CSS graphics (e.g. those created with border) are automatically layout graphics.

Layout graphics should not receive the keyboard focus, i.e. the graphic itself or its descendant elements should not be marked with tabindex or as control elements (e.g. <button>).

Further information: Decorative Images | Web Accessibility Initiative (WAI) | W3C

Information about this article

You are welcome to send feedback by email about our handout!