WCAG 2.1 Image Gallery Violations: E-commerce Accessibility

How can a retail website with 15 accessibility violations still pass some automated checks? This e-commerce test page reveals the gap between detection and actual user experience.

Our analysis of the Acme Shop image gallery test page (opens in new window) identified 15 distinct WCAG 2.1 violations alongside 7 passing elements — a pattern that illustrates why automated testing tools capture only 37% of accessibility barriers. The violations cluster around three critical areas: missing alternative text, inaccessible navigation elements, and structural markup gaps.

The Missing Alt Text Crisis

Eight images on this page completely lack alt attributes, violating WCAG 2.1.1 Non-text Content (opens in new window) at the most basic level. When a screen reader encounters these images, it announces only the filename or URL — meaningless strings like "photo-1523381210434-271e8be1f52b" instead of useful content descriptions.

The promotional banner image exemplifies this problem:

<!-- Current: Inaccessible -->
<img src="https://via.placeholder.com/1100x120?text=30%25+OFF+ALL+SUMMER+STYLES">

<!-- Fixed: Accessible -->
<img src="https://via.placeholder.com/1100x120?text=30%25+OFF+ALL+SUMMER+STYLES" 
     alt="30% off all summer styles promotional banner">

For users navigating by screen reader, these missing descriptions create information voids. A customer using JAWS or NVDA cannot understand what products are featured, what the promotional offers include, or which media outlets have featured the brand. The "As seen in" section becomes particularly problematic — magazine logos from Vogue, GQ, and Elle appear as unlabeled graphics, eliminating their credibility-building function.

Navigation Without Direction

Five navigation links fail WCAG 2.4.4 Link Purpose (opens in new window) by containing no accessible text. Screen readers announce these as "link" with no indication of their destination:

<!-- Current: Inaccessible -->
<a href="/product/linen-shirt">
  <img src="shirt-image.jpg">
</a>

<!-- Fixed: Accessible -->
<a href="/product/linen-shirt" aria-label="View Linen Relaxed Shirt details">
  <img src="shirt-image.jpg" alt="Linen Relaxed Shirt, $49.00">
</a>

This pattern creates a navigation maze for keyboard and screen reader users. Without descriptive link text or proper ARIA labels, users cannot efficiently browse products or understand their options. The DOJ's web accessibility guidance (opens in new window) specifically addresses this issue, noting that ambiguous link text creates barriers to equal access.

Structural Gaps and User Flow

The page lacks a <main> landmark, violating WCAG 1.3.1 Info and Relationships (opens in new window). Screen reader users rely on landmarks to navigate efficiently — the "skip to main content" function fails without proper markup:

<!-- Current: Missing structure -->
<body>
  <header>...</header>
  <div class="content">...</div>
</body>

<!-- Fixed: Proper landmarks -->
<body>
  <header>...</header>
  <main>
    <div class="content">...</div>
  </main>
</body>

Additionally, one button element contains no text content and lacks ARIA labeling, creating a "ghost button" that screen readers cannot identify or describe to users.

The Compliance Paradox

Despite these significant barriers, the page demonstrates several accessibility successes: proper heading hierarchy (H1 → H2 → H2), functional "Add to bag" buttons with clear labels, and one correctly described product image. This mixed compliance pattern reflects what our research shows about the methodology paradox in accessibility testing — organizations often implement some accessibility features while missing fundamental requirements.

Legal and Strategic Implications

From a risk assessment perspective, this violation pattern creates significant exposure under both ADA Title III and state accessibility laws. The missing alt text alone affects every product in the gallery, potentially impacting sales conversion for disabled customers. Courts have consistently held that inaccessible product catalogs constitute barriers to equal access in places of public accommodation.

The broader pattern here raises a question worth sitting with: What does it mean for digital commerce when basic accessibility implementation remains this inconsistent? These aren't edge cases or complex interaction patterns — they're fundamental HTML attributes that have existed for decades.

For organizations conducting similar audits, this case demonstrates why comprehensive testing protocols must examine both automated detection results and actual user pathways. The litigation trends we've documented show that courts focus on real barriers to access, not just technical compliance metrics.

Implementation Recommendations

Development teams should establish code review checkpoints specifically for:

Image audit protocols: Every <img> element requires either meaningful alt text or explicit alt="" for decorative images
Link accessibility verification: All interactive elements need accessible names through text content, alt text, or ARIA labels
Landmark structure validation: Pages must include proper semantic HTML5 elements (<main>, <nav>, <header>)

The technical fixes here are straightforward — the challenge lies in establishing organizational processes that catch these issues before deployment. As assistive technology continues evolving, basic implementation gaps become more pronounced, not less important.

This audit reveals how accessibility barriers compound: missing alt text combines with inaccessible navigation to create multiple failure points in a single user journey. For disabled customers, each barrier multiplies the difficulty of completing basic tasks like browsing products or understanding promotional offers. The legal framework exists to prevent these barriers — the implementation gap remains an organizational capacity issue.

When Image Galleries Become Digital Barriers: A WCAG 2.1 Analysis