TIL Decorative Images
POSTED ON:
TAGS: accessibility html images
Decorative images don’t add information to the content of a page.
For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.
For example:
- Visual styling such as borders, spacers, and corners;
- Supplementary to link text to improve its appearance or increase the clickable area;
- Illustrative of adjacent text but not contributing information (“eye-candy”);
- Identified and described by surrounding text.
You should add an empty alt attribute (alt="").
Screen readers also allow the use of WAI-ARIA to hide elements by using role="presentation". However, currently, this feature is not as widely supported as using a null alt attribute. This allows you to search for images on the site with empty or missing alt attributes (so you can fill them in), but if they have role="presentation" you know you can skip over them as they are purely decorative.
via 101 Digital Accessibility (a11y) tips and tricks
Related TILs
Tagged: accessibility