Bug 93: Decorative Images with Alt Text (F39)

WCAG 1.1.1 (Text Alternatives) | Decorative images described, causing redundancy and confusion.

Failure F39: Spacer/Decoration Described in Alt Text

Product Showcase

Decorative blue star icon for visual enhancement

Premium Laptop Stand

Ergonomic design for better posture. Price: $49.99

Issue: Screen reader announces "Decorative blue star icon for visual enhancement" (redundant noise). The star is purely visual and doesn't add meaning.

Failure F39: Ornamental Borders/Separators with Alt Text

Important Announcement

System maintenance scheduled for Saturday 2-4 AM.

Horizontal dotted line separator to divide content sections

All services will be temporarily unavailable.

Issue: Decorative separator described, screen readers announce meaningless phrase. The line is visual only.

Failure F39: Newsletter Header with Ornament Alt Text

Monthly Newsletter - October 2024

Small gold circle decorative ornament Small gold circle decorative ornament Small gold circle decorative ornament

Issue: Three identical decorative ornaments, each announced by screen reader. Verbose and distracting.

Better Approach (For Reference)

Treat decorative images as invisible to screen readers:

Option 1: Use alt="" (preferred for <img>)

<img src="star.svg" alt="" aria-hidden="true">

Option 2: Use aria-hidden="true" + role="presentation"

<img src="ornament.svg" alt="" aria-hidden="true" role="presentation">

Option 3: Use CSS background-image for decorative graphics

<div style="background-image: url('ornament.svg');"></div>
HAL Fixes: HAL detects decorative images with lengthy alt text and converts to alt="" with aria-hidden="true". HAL removes redundant alt text from repeated decorative elements. HAL recommends CSS background-images for pure decoration. HAL preserves alt text only for content-bearing images.