WCAG 1.1.1: Non-Text Content (Decorative Images)
Back to all WCAG criteriaOVERVIEW
What's it about?
Decorative images that provide only visual flair and no important information do not need a text alternative. These include:
- redundant icons
- divider lines
- patterned background shapes
How to
Depending on your situation, you can implement one of the following options to meet the criterion. For a deeper dive, please refer to the linked WCAG techniques.
Empty alt attributes for
To hide images (
<img>) from screen readers, you simply leave thealt-attribute empty. An image without an alt text will be ignored.However, the
alt-attribute must never be completely missing from the<img>-tag. Otherwise, the file name of the image will be read aloud.
Hiding decorative vector graphics
(Vector) graphics embedded as SVGs (
<svg>), icon fonts (<i>), or similar do not have analtattribute.When a screen reader encounters an SVG without a name, it simply announces “image.” To ensure these graphics are ignored by the screen reader, you must hide them using
aria-hidden="true".Technique(s):
Insert decorative images via CSS
Elements that are only for presentation should ideally not appear in the HTML at all. This can be achieved by inserting decorative images through CSS, for example using the
background-imageproperty.Technique(s):
Learn accessibility with us?
Looking to implement WCAG best practices in your design, development, or content workflow? Book a workshop for your team or contact us directly to learn more.