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.
Presentation
Permalink "Presentation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 310 | Contrast | Layout 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. | Should | EN 301 549: 9.1.4.3, 11.1.4.3, 11.7 |
| 311 | Animation | The layout graphic may not sparkle, flash or be visually changed in any other way (see Animation). | Must | EN 301 549: 9.2.3.1, 11.2.3.1, 9.2.2.2, 11.2.2.2 |
Operation
Permalink "Operation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 312 | Role | Layout graphics must not receive the focus. | Must | EN 301 549: 9.1.1.1, 11.1.1.1 |
Programming/interfaces
Permalink "Programming/interfaces"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 313 | Role | The 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). | Must | EN 301 549: 11.5.2.5 |
Practical tip: layout graphics in Web applications
Permalink "Practical tip: layout graphics in Web applications"Screen reader output
Permalink "Screen reader output"None
HTML and ARIA
Permalink "HTML and ARIA"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 witharia-hiddenas a layout graphic (<svg aria-hidden=true>). - Graphics that are marked with the
<canvas>element should be marked witharia-hiddenas 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
beforeorafteras pseudo-elements using the CSS selectors should be marked as layout graphics witharia-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!