For web accessibility experts, decorative images are a familiar and often debated topic. The question that often arises is whether ALT text should be applied to decorative images. To answer this, we first need to define what constitutes a decorative image and then explore the considerations when adding ALT text.
What is a Decorative Image?
Decorative images are graphics, illustrations, or images used purely for aesthetic or stylistic purposes and do not convey any meaningful content or information related to the document's context. They enhance a webpage's visual appeal but don't contribute to content comprehension.
Examples of decorative images in context may include:
- Ornamental Borders: Decorative lines or patterns that frame content but do not provide additional meaning.
- Background Images: Images are used as backgrounds for visual appeal but carry no content value.
- Spacer Images: Whitespace or transparent images used to control layout and alignment.
- Decorative Icons: Icons added purely for design purposes, with no functional or informational value.
- Bullets or Custom List Markers: Customized list bullets that serve aesthetic purposes.
Also, see the Decorative Images module of the Images Tutorial from the W3C.
Should ALT Text be Applied to Decorative Images?
Applying ALT text to decorative images is a nuanced decision and should be carefully considered. The answer is not a simple 'yes' or 'no' but depends on the context and inclusive design principles. Here are some guidelines to help you determine whether ALT text should be applied:
- Decorative Images that are Purely Aesthetic: No ALT Text
If an image serves no informative purpose and is purely decorative, it is generally advisable not to provide any ALT text. Adding ALT text in such cases may introduce unnecessary verbosity to screen reader users, causing confusion and detracting from the user experience.
For example, if your website includes decorative swirls or patterns that don't convey information, leaving the ALT attribute empty (ALT="") or omitting it altogether is a valid approach for purely aesthetic decorative images.
- Decorative Images with Minimal Information: Brief ALT Text
Sometimes, an image may have a minor decorative element but includes minimal information. For instance, if you use a decorative arrow to separate sections on a webpage, consider providing a concise ALT text that briefly describes its decorative aspect and use.
For example, ALT="Decorative arrow used to separate page sections." This allows screen reader users to understand that the image is present for visual appeal without overwhelming them with unnecessary detail.
- Images with Hidden Semantics: Meaningful ALT Text
Occasionally, an image may initially seem decorative, but upon closer examination, it's discovered to have a hidden meaning or semantic purpose.
For instance, if a university emblem appears decorative but carries historical or institutional significance. In such cases, provide ALT text, such as ALT="The University emblem with a representation of our mascot, the Spanish Imperial Eagle, and our founding year of 1975." that conveys this hidden meaning to ensure all users can access the content.
The Role of User Testing
User testing is crucial in validating your choices regarding ALT text for decorative images. Real-world feedback from individuals with disabilities, particularly those who use screen readers, can provide invaluable insights into the effectiveness of your decisions.
The question of whether to apply ALT text to decorative images should be guided by the principles of inclusive design. Recognizing when an image is purely decorative and when it has minimal meaning or hidden semantics is the key to making informed decisions. Using a custom policy, DubBot can flag current images marked "decorative" on your website, allowing you to review each image and determine if ALT text is needed to create a more accessible experience.
Striking the right balance ensures that your digital content remains accessible and engaging to all members of your educational community.
Resources
- Visit the #accessibility channel, Oct 17 @ 12:11, on HighEdWeb Slack
- Your Image Is Probably Not Decorative
- Decorative images - University of South Carolina
