WCAG Audit: When Good Form Labeling Meets Poor Page Structure

The Finding

The automated analysis of this checkout form test page (opens in new window) reveals a striking pattern: 16 accessibility checks pass while 2 critical structural violations remain. Every form field — from email addresses to credit card numbers — includes proper labeling that meets WCAG 2.1 Success Criterion 1.3.1 Info and Relationships (opens in new window). Yet the page fails basic navigation requirements under WCAG 2.4.1 Bypass Blocks (opens in new window).

<!-- Current problematic structure -->
<header>...</header>
<div class="checkout-content">
  <h1>Checkout</h1>
  <!-- All form content here without main landmark -->
</div>

The page lacks both a <main> landmark and a <nav> element, creating structural barriers that undermine otherwise solid form implementation.

Why This Matters

Screen reader users rely on landmark navigation to understand page structure and move efficiently through content. When Sarah, who uses NVDA, arrives at this checkout page, she can access the header landmark but cannot jump directly to the main content area. She must tab through every element or use heading navigation to reach the checkout form.

The missing navigation landmark compounds this problem. E-commerce sites typically include breadcrumbs, category navigation, or account links that screen reader users expect to find in a dedicated navigation region. Without proper landmarks, these users lose critical wayfinding tools during the checkout process — precisely when clear navigation becomes most important.

Keyboard and switch users face similar challenges. The lack of a main landmark means no quick path to bypass repeated content, forcing sequential navigation through potentially lengthy headers or promotional content before reaching the checkout form.

Best Practices

The fix requires minimal code changes that preserve the existing form structure:

<!-- Corrected structure -->
<header>...</header>
<nav aria-label="Checkout navigation">
  <!-- Breadcrumbs or account navigation -->
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/cart">Cart</a></li>
    <li aria-current="page">Checkout</li>
  </ol>
</nav>
<main>
  <h1>Checkout</h1>
  <!-- All form content moves inside main -->
</main>

The HTML specification (opens in new window) requires only one <main> element per page, containing the primary content. For checkout pages, this includes the entire form process. The <nav> element should contain any navigation aids — breadcrumbs, progress indicators, or related links that help users understand their location within the purchase flow.

Applying This

Development teams should integrate landmark validation into their accessibility testing workflow. While this audit shows that automated tools successfully catch missing landmarks, the research on testing methodology gaps demonstrates why structural issues like these often persist in production.

Code review checklists should include landmark verification:

• Does every page have exactly one <main> element?
• Are navigation areas properly marked with <nav>?
• Can screen reader users bypass repetitive content?
• Do landmarks create a logical page outline?

The form labeling success in this example — 13 properly labeled fields — shows that teams understand accessibility requirements. The landmark failures suggest a gap in understanding page-level structural requirements rather than component-level implementation.

Legal and Risk Context

From a compliance perspective, this pattern creates interesting legal exposure. The checkout process functions perfectly for users who can visually navigate the page, and all interactive elements meet technical accessibility standards. However, the structural barriers violate fundamental navigation requirements that courts increasingly recognize as essential to equal access.

The DOJ's web accessibility guidance (opens in new window) emphasizes that accessibility encompasses both individual component compliance and overall usability. A checkout form that technically meets labeling requirements but prevents efficient navigation fails this broader standard. This creates particular risk in e-commerce contexts, where checkout abandonment due to accessibility barriers directly impacts revenue and market access.

State attorneys general have specifically targeted e-commerce accessibility in recent enforcement actions, focusing on barriers that prevent completion of essential transactions. Missing landmarks in checkout flows represent exactly the type of systemic barrier that enforcement actions seek to address — not because the technical violation is severe, but because it prevents disabled users from completing purchases on equal terms.

The compliance gap here reflects a broader pattern in accessibility implementation: organizations often focus on obvious interactive elements while overlooking structural requirements that assistive technology users depend on for navigation. This creates legal vulnerability that extends beyond technical violations to fundamental usability barriers.