So far, we’ve talked about simple images needing concise alt text and complex images requiring robust long descriptions to meet WCAG Success Criterion 1.1.1. But what about images that don’t convey any meaningful information at all? What about those purely decorative images?
This is where things can get a little tricky. While WCAG 1.1.1 demands a text alternative for non-text content, it also acknowledges that some images are purely for visual flair and would clutter the experience for users who don’t rely on sight.
What is a Decorative Image?
A decorative image is an image whose sole purpose is aesthetic enhancement. It doesn’t convey any information that isn’t already available in the surrounding text, or it’s purely for visual appeal without adding any contextual meaning. Examples include:
Borders, spacers, or purely aesthetic background images.
Icons that are purely visual complements to text (e.g., a small leaf icon next to “Our Green Initiatives” where the text itself is sufficient).
Images that are part of a visual design but don’t add meaning (e.g., a swirling abstract pattern).
Stock photos that serve as visual “filler” but don’t add specific information to the adjacent content.
The Golden Rule for Decorative Images: An Empty alt Attribute
For decorative images, the correct way to comply with WCAG 1.1.1 is to provide an empty alt attribute: alt=””.
Why an empty alt attribute?
Screen Reader Behavior: When a screen reader encounters an tag with alt=””, it understands that the image is purely decorative and will skip over it entirely. This prevents unnecessary announcements that would interrupt the user’s flow and add cognitive load.
Accessibility Tree: An empty alt attribute effectively removes the image from the accessibility tree, ensuring it’s not announced to assistive technologies.
WCAG Compliance: This is the officially recommended technique for decorative images under WCAG 1.1.1.
Examples of Correct Usage for Decorative Images:
Our Green Initiatives (where “Our Green Initiatives” is the primary information)
Important Considerations and Common Mistakes:
Don’t Omit the alt Attribute Entirely: While an empty alt attribute is good, completely omitting the alt attribute is bad practice! If the alt attribute is missing, some screen readers might announce the image filename, which is unhelpful and confusing. Always include alt=”” for decorative images.
CSS Background Images for Pure Decoration: For truly purely decorative images that are not content-bearing, consider using CSS background-image property instead of an tag. Images included via CSS are inherently ignored by screen readers and don’t require an alt attribute.
Example: Use this when the image is purely presentational and adds no semantic value to the content.
Be Absolutely Sure it’s Decorative: This is the most crucial part! What you think is decorative might actually be informative for someone else.
Think critically: If removing the image would make the content less understandable or would take away meaningful information, then it’s NOT decorative, and it needs proper alt text (or a long description).
Example: An icon next to a link might seem decorative, but if it helps users quickly identify the link’s purpose (e.g., a printer icon next to “Print Page”), then it’s informative and needs appropriate alt text.
Why Get This Right?
Gracefully handling decorative images through alt=”” or CSS background images is vital for:
Improved User Experience: Prevents screen reader users from hearing unnecessary and potentially confusing announcements, allowing them to focus on meaningful content.
Efficiency: Makes navigating your website faster and less frustrating for assistive technology users.
True Accessibility: Demonstrates a nuanced understanding of accessibility principles, ensuring that your website is genuinely usable for everyone.
By mastering the art of distinguishing between simple, complex, and decorative images, and applying the appropriate WCAG 1.1.1 techniques, you’re well on your way to creating a more inclusive and user-friendly web for all!
Leave a Reply