Make decorative images invisible to assistive technologies
no. 004
Make sure assistive technologies can safely ignore images that convey no information
Images that are purely decorative in nature or that do not convey any information are often considered irrelevant to those who cannot see them. To help users of assistive technologies focus on content that truly matters, these images are usually better off being ignored altogether.
To do this, simply provide such images with a null ALT attribute value (alt=””). Avoid other describing mechanisms, such as TITLE attributes or aria-label properties. Better yet, make sure decorative images are embedded as background images instead of being part of the HTML, using the background-image CSS property. When decorative images are only provided with a null ALT attribute, assistive technologies understand these images can be safely ignored and will therefore fail to announce them to end users.
User Story
As a visually impaired user using assistive technology, I want my tools to reliably ignore images that are purely decorative in nature or that that do not bring any relevant information, so that I can focus solely on content information.
Simple Code Example
<img src=”decorative-image.png” alt=””>
Testing Methodology
Using the Web Developer Toolbar for Firefox, select the “Display ALT Attributes” [...]