🏬 Chapter 100: Capstone 3 — High-Performance Multi-Page E-Commerce Platform & Master Graduation

Accessible One-Page Checkout Form

Engineering a WCAG 2.2 Level AA compliant, one-page checkout form with standard autocomplete tokens, HTML5 Constraint Validation API, credit card masking, postal validation, and accessible error summaries.

LEARNING OBJECTIVES ⌵

Implement WCAG 1.3.5 (Identify Input Purpose) compliance using standardized autocomplete tokens (shipping given-name, address-line1, postal-code, cc-number).
Utilize the HTML5 Constraint Validation API (checkValidity(), reportValidity(), setCustomValidity()) to build accessible form verification without intrusive alerts.
Build a top-level accessible Error Summary component (<div role="alert">) that shifts keyboard focus dynamically to invalid form fields upon submission.
Format and mask credit card numbers and expiration dates with inputmode="numeric" and regex pattern constraints.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine walking up to the customs declaration desk at an international airport. The border agent hands you a clipboard with a five-page form.

The form has tiny illegible boxes.
There is no indication of whether your home address needs a postal code or country code.
When you hand the form back, the agent stamps a giant red "REJECTED" across the page without telling you what went wrong, forcing you to start over from scratch at the back of a two-hour line.

In e-commerce, the Checkout Form is that customs desk.

Over 70% of digital shopping carts are abandoned during the final checkout stage. The overwhelming majority of drop-offs occur because of friction: form fields that don't trigger mobile numeric keypads, autofill failures that scramble shipping addresses, and cryptic red border highlights that fail to explain what error occurred to a screen reader user.

An accessible, high-performance checkout form respects the customer's time and cognitive load. It supports browser autofill with standardized tokens, invokes mobile numeric keyboards with inputmode="numeric", validates fields smoothly, and provides immediate, polite error explanations.

Technical Deep Dive & Specifications

Standard WCAG 1.3.5 Autocomplete Tokens for E-Commerce

To satisfy WCAG 2.2 Level AA (Success Criterion 1.3.5), browsers and password managers (1Password, Apple Keychain, Google Autofill) require exact token strings:

Field Purpose	Standard HTML `autocomplete` Value	Recommended `inputmode`	`pattern` Regex Example
Customer Full Name	`autocomplete="name"`	`text`	—
Email Address	`autocomplete="email"`	`email`	Standard HTML5 `type="email"`
Shipping Address Line 1	`autocomplete="shipping address-line1"`	`text`	—
Shipping City / Locality	`autocomplete="shipping address-level2"`	`text`	—
Shipping State / Province	`autocomplete="shipping address-level1"`	`text`	—
Postal / ZIP Code	`autocomplete="shipping postal-code"`	`numeric` or `text`	`^[0-9]{5}(-[0-9]{4})?$` (US)
Credit Card Number	`autocomplete="cc-number"`	`numeric`	`^[0-9]{13,19}$`
Card Expiration (MM/YY)	`autocomplete="cc-exp"`	`numeric`	`^(0[1-9]
Card Security Code (CVV)	`autocomplete="cc-csc"`	`numeric`	`^[0-9]{3,4}$`

+----------------------------------------------------------------------------------------------------+
|                               ACCESSIBLE FORM ERROR SUMMARY WORKFLOW                               |
+----------------------------------------------------------------------------------------------------+
|                                                                                                    |
|  User clicks [ Complete Purchase ]                                                                 |
|     │                                                                                              |
|     ▼                                                                                              |
|  Form Submit Intercepted (`novalidate` on <form>)                                                  |
|     │                                                                                              |
|     ├── 1. Iterate over form controls with form.elements                                          |
|     ├── 2. Test validity with field.checkValidity()                                                |
|     ├── 3. If invalid:                                                                             |
|     │      - Mark input: aria-invalid="true"                                                       |
|     │      - Associate error message: aria-describedby="error-[id]"                                |
|     │      - Collect errors into Error Summary array                                               |
|     │                                                                                              |
|     ▼                                                                                              |
|  Render Error Summary in `<div role="alert" tabindex="-1">` at top of form                         |
|     │                                                                                              |
|     ▼                                                                                              |
|  Programmatically move focus to Error Summary: `summaryContainer.focus()`                          |
|     │                                                                                              |
|     ▼                                                                                              |
|  Screen reader immediately reads: "There are 2 errors in your submission. Link: Missing ZIP Code"  |
+----------------------------------------------------------------------------------------------------+

💻 Interactive Code Playground

Starter Code: Production Accessible One-Page Checkout (`checkout.html`)

Line-by-Line Code Breakdown

Line 160 (<form ... novalidate>): Disables the browser's default, inconsistent popup bubbles, allowing our custom, fully accessible validation script to execute.
Lines 167–172 (autocomplete="email", aria-describedby): Associates both helpful hint text and conditional error messages with the input using aria-describedby="email-hint email-error".
Lines 205–208 (inputmode="numeric" pattern="^[0-9]{5}(-[0-9]{4})?$"): Forces mobile operating systems (iOS / Android) to display a numeric keypad while enforcing ZIP code regex patterns.
Lines 224–226 (inputmode="numeric" autocomplete="cc-csc"): Specifies type="password" with numeric inputmode for CVV codes, protecting sensitive card validation codes from screen observers.
Lines 267–304 (Accessible Focus Shift to Error Summary): When validation fails, the script populates <div id="error-summary" role="alert" tabindex="-1"> and executes summary.focus(). Non-sighted users are informed instantly of all form errors, with clickable anchor links focusing directly into invalid inputs.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aura Luxe | Secure Express Checkout</title>

*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      padding: 2rem 1rem;
      line-height: 1.5;
    }

.checkout-container {
      max-width: 760px;
      margin: 0 auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 2.5rem;
    }

.checkout-header {
      margin-bottom: 2rem;
      border-bottom: 1px solid var(--border);
      padding-bottom: 1rem;
    }
    .checkout-header h1 {
      font-size: 1.75rem;
      font-weight: 800;
    }

/* Error Summary Box */
    .error-summary {
      background: var(--danger-bg);
      border: 2px solid var(--danger);
      border-radius: var(--radius);
      padding: 1.25rem;
      margin-bottom: 2rem;
      display: none;
    }
    .error-summary:focus {
      outline: 3px solid var(--danger);
      outline-offset: 2px;
    }
    .error-summary h2 {
      font-size: 1.125rem;
      color: var(--danger);
      margin-bottom: 0.5rem;
    }
    .error-summary ul {
      margin-left: 1.25rem;
      color: var(--text);
    }
    .error-summary a {
      color: #ff8080;
      text-decoration: underline;
      font-weight: 600;
    }

fieldset {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.5rem;
      margin-bottom: 2rem;
    }

legend {
      padding: 0 0.5rem;
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      font-size: 0.875rem;
      letter-spacing: 0.05em;
    }

.form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }
    .form-group-full {
      grid-column: 1 / -1;
    }

.form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text);
    }

input, select {
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.75rem 1rem;
      border-radius: 6px;
      font-size: 0.9375rem;
      transition: border-color 0.2s, box-shadow 0.2s;
      width: 100%;
    }

input:focus, select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
    }

input[aria-invalid="true"] {
      border-color: var(--danger);
      box-shadow: 0 0 0 3px var(--danger-bg);
    }

.field-error {
      color: var(--danger);
      font-size: 0.8125rem;
      display: none;
    }
    input[aria-invalid="true"] ~ .field-error {
      display: block;
    }

.btn-submit {
      width: 100%;
      background: var(--accent);
      color: #000;
      border: none;
      padding: 1rem;
      font-size: 1.125rem;
      font-weight: 800;
      border-radius: var(--radius);
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn-submit:hover {
      background: #b8972e;
    }
  </style>
</head>
<body>
  <div class="checkout-container">
    
    <header class="checkout-header">
      <h1>Aura Luxe Checkout</h1>
      <p style="color: var(--text-muted); font-size: 0.875rem;">Step 1 of 1 — Finalize Courier Delivery & Payment</p>
    </header>

<div id="error-summary" class="error-summary" role="alert" tabindex="-1" aria-labelledby="summary-title">
      <h2 id="summary-title">There was a problem with your order submission</h2>
      <ul id="error-list"></ul>
    </div>

<form id="checkout-form" action="/api/checkout" method="POST" novalidate>

<fieldset>
        <legend>Contact Information</legend>
        <div class="form-grid">
          <div class="form-group form-group-full">
            <label for="cust-email">Email Address <span aria-hidden="true">*</span></label>
            <input type="email" id="cust-email" name="email" autocomplete="email" required
                   aria-describedby="email-hint email-error">
            <span id="email-hint" style="font-size: 0.75rem; color: var(--text-muted);">We'll send order tracking and insured courier updates here.</span>
            <span id="email-error" class="field-error" role="alert">Please enter a valid email address (e.g. name@domain.com).</span>
          </div>
        </div>
      </fieldset>

<fieldset>
        <legend>Insured Courier Shipping Address</legend>
        <div class="form-grid">
          <div class="form-group form-group-full">
            <label for="ship-name">Full Legal Name <span aria-hidden="true">*</span></label>
            <input type="text" id="ship-name" name="name" autocomplete="shipping name" required
                   aria-describedby="name-error">
            <span id="name-error" class="field-error" role="alert">Full name is required for signature delivery.</span>
          </div>

<div class="form-group form-group-full">
            <label for="ship-street">Street Address <span aria-hidden="true">*</span></label>
            <input type="text" id="ship-street" name="street" autocomplete="shipping address-line1" required
                   aria-describedby="street-error">
            <span id="street-error" class="field-error" role="alert">Street address is required.</span>
          </div>

<div class="form-group">
            <label for="ship-city">City <span aria-hidden="true">*</span></label>
            <input type="text" id="ship-city" name="city" autocomplete="shipping address-level2" required
                   aria-describedby="city-error">
            <span id="city-error" class="field-error" role="alert">City is required.</span>
          </div>

<div class="form-group">
            <label for="ship-zip">Postal / ZIP Code <span aria-hidden="true">*</span></label>
            <input type="text" id="ship-zip" name="zip" autocomplete="shipping postal-code" 
                   inputmode="numeric" pattern="^[0-9]{5}(-[0-9]{4})?$" required
                   aria-describedby="zip-error">
            <span id="zip-error" class="field-error" role="alert">Enter a valid 5-digit ZIP code (e.g. 90210).</span>
          </div>
        </div>
      </fieldset>

<fieldset>
        <legend>Payment Method</legend>
        <div class="form-grid">
          <div class="form-group form-group-full">
            <label for="cc-num">Card Number <span aria-hidden="true">*</span></label>
            <input type="text" id="cc-num" name="cardnumber" autocomplete="cc-number" 
                   inputmode="numeric" pattern="^[0-9\s]{15,19}$" placeholder="•••• •••• •••• ••••" required
                   aria-describedby="cc-error">
            <span id="cc-error" class="field-error" role="alert">Please enter a valid 16-digit card number.</span>
          </div>

<div class="form-group">
            <label for="cc-exp">Expiration (MM/YY) <span aria-hidden="true">*</span></label>
            <input type="text" id="cc-exp" name="exp" autocomplete="cc-exp" 
                   inputmode="numeric" pattern="^(0[1-9]|1[0-2])\/[0-9]{2}$" placeholder="MM/YY" required
                   aria-describedby="exp-error">
            <span id="exp-error" class="field-error" role="alert">Format as MM/YY (e.g. 08/28).</span>
          </div>

<div class="form-group">
            <label for="cc-cvv">Security Code (CVV) <span aria-hidden="true">*</span></label>
            <input type="password" id="cc-cvv" name="cvv" autocomplete="cc-csc" 
                   inputmode="numeric" pattern="^[0-9]{3,4}$" maxlength="4" placeholder="123" required
                   aria-describedby="cvv-error">
            <span id="cvv-error" class="field-error" role="alert">Enter 3 or 4 digit security code.</span>
          </div>
        </div>
      </fieldset>

<button type="submit" class="btn-submit">Authorize & Pay $3,270.00 USD</button>
    </form>
  </div>

// Credit Card Auto-Spacing Formatter
    const ccInput = document.getElementById('cc-num');
    ccInput.addEventListener('input', (e) => {
      let val = e.target.value.replace(/\D/g, '').substring(0, 16);
      val = val.replace(/(.{4})/g, '$1 ').trim();
      e.target.value = val;
    });

// Expiration Date Auto-Slash Formatter
    const expInput = document.getElementById('cc-exp');
    expInput.addEventListener('input', (e) => {
      let val = e.target.value.replace(/\D/g, '').substring(0, 4);
      if (val.length >= 2) {
        val = val.substring(0, 2) + '/' + val.substring(2);
      }
      e.target.value = val;
    });

// Accessible Constraint Validation Submission Handler
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      errorList.innerHTML = '';
      let hasError = false;
      const invalidInputs = [];

Array.from(form.elements).forEach(field => {
        if (!field.willValidate) return;

if (!field.checkValidity()) {
          hasError = true;
          field.setAttribute('aria-invalid', 'true');
          invalidInputs.push(field);

// Build link in Error Summary
          const label = form.querySelector(`label[for="${field.id}"]`).textContent.replace('*', '').trim();
          const li = document.createElement('li');
          const a = document.createElement('a');
          a.href = `#${field.id}`;
          a.textContent = `${label}: Required or formatted incorrectly`;
          
          a.addEventListener('click', (ev) => {
            ev.preventDefault();
            field.focus();
          });

li.appendChild(a);
          errorList.appendChild(li);
        } else {
          field.removeAttribute('aria-invalid');
        }
      });

if (hasError) {
        summary.style.display = 'block';
        summary.focus(); // Shift focus to the error summary
      } else {
        summary.style.display = 'none';
        alert('🎉 Order Authorized Successfully! Courier tracking initialized.');
      }
    });
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+---------------------------------------------------------------------------------------------------------+
| AURA LUXE CHECKOUT                                                                                      |
| Step 1 of 1 — Finalize Courier Delivery & Payment                                                       |
+---------------------------------------------------------------------------------------------------------+
| [!] THERE WAS A PROBLEM WITH YOUR ORDER SUBMISSION                                                      |
|  • Email Address: Required or formatted incorrectly                                                     |
|  • Postal / ZIP Code: Required or formatted incorrectly                                                 |
+---------------------------------------------------------------------------------------------------------+
| CONTACT INFORMATION                                                                                     |
| Email Address * [ [email protected]                                             ]                        |
| We'll send order tracking and insured courier updates here.                                             |
+---------------------------------------------------------------------------------------------------------+
| INSURED COURIER SHIPPING ADDRESS                                                                        |
| Full Legal Name * [ Laurent Mercier                                            ]                        |
| Street Address  * [ 742 Evergreen Terrace                                      ]                        |
| City            * [ Springfield            ]  Postal / ZIP Code * [ 97201      ]                        |
+---------------------------------------------------------------------------------------------------------+
| PAYMENT METHOD                                                                                          |
| Card Number * [ 4111 2222 3333 4444                                            ]                        |
| Expiration  * [ 12/28            ]  Security Code * [ •••                      ]                        |
+---------------------------------------------------------------------------------------------------------+
| [                       Authorize & Pay $3,270.00 USD                           ]                       |
+---------------------------------------------------------------------------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Add Real-Time Inline Input Sanitization & Live Error Clearance

Instructions:

Attach an input event listener to all required fields.
If an input previously had aria-invalid="true" and the user edits it to a valid value, immediately remove aria-invalid and hide the corresponding .field-error.
If all fields become valid, automatically hide the top #error-summary alert box.

🏁 Starter Code Sandbox

form.querySelectorAll('input').forEach(input => {
  input.addEventListener('input', () => {
    if (input.hasAttribute('aria-invalid') && input.checkValidity()) {
      input.removeAttribute('aria-invalid');
    }

    // Check if any errors remain across the entire form
    const remainingErrors = form.querySelectorAll('input[aria-invalid="true"]');
    if (remainingErrors.length === 0) {
      summary.style.display = 'none';
      errorList.innerHTML = '';
    }
  });
});

Why this works:

It provides immediate positive feedback as soon as the user corrects their input, reducing checkout abandonment anxiety.
It automatically dismisses the error summary box once all invalid entries are corrected.

⚠️ Common Pitfalls

Omitting autocomplete Attributes on Checkout Inputs: Forcing users to manually type 16-digit credit cards and addresses. Mobile conversion drops by over 30% without autofill support.
Using Alert Modals for Form Errors: Calling alert('Invalid ZIP code!'). Standard JavaScript alerts freeze the thread, destroy screen reader context, and frustrate users. Always use inline Error Summaries with focus management.
Forgetting inputmode="numeric" on Number Fields: Using type="number" for credit cards and ZIP codes. type="number" causes stepper arrows to appear and strips leading zeros. Use type="text" inputmode="numeric" pattern="[0-9]*".

💡 Pro Tips

Implement aria-describedby Multi-ID Association: Separate the helpful field instruction hint ID and the dynamic error message ID (e.g. aria-describedby="hint-id error-id"). Assistive technology reads both in logical sequence.
Apply autocomplete="cc-csc" for CVV Fields: While historically neglected, modern browser autofill engines can securely populate CVVs from biometric-authenticated hardware tokens (Touch ID, Face ID, Windows Hello).

📌 Key Takeaways

Implement WCAG 1.3.5 autocomplete tokens (shipping address-line1, cc-number, cc-exp, cc-csc).
Use inputmode="numeric" with regex pattern for card numbers and postal codes instead of type="number".
Add novalidate to <form> and handle submission via the Constraint Validation API (checkValidity()).
Build an accessible Error Summary with role="alert", tabindex="-1", and programmatic .focus() shifts.
Connect labels, hints, and error strings using aria-describedby and aria-invalid.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Why should credit card number inputs use `type="text" inputmode="numeric"` rather than `type="number"`?

Topic: HTML Fundamentals

? Question 2 / 3

What is the role of `tabindex="-1"` on the `<div id="error-summary" role="alert">` element?

Topic: HTML Fundamentals

? Question 3 / 3

Which autocomplete attribute string correctly signals a shipping street address line according to the WHATWG and WCAG 1.3.5 specifications?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

Standard WCAG 1.3.5 Autocomplete Tokens for E-Commerce

💻 Interactive Code Playground

Starter Code: Production Accessible One-Page Checkout (checkout.html)

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Add Real-Time Inline Input Sanitization & Live Error Clearance

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Why should credit card number inputs use type="text" inputmode="numeric" rather than type="number"?

What is the role of tabindex="-1" on the <div id="error-summary" role="alert"> element?

Which autocomplete attribute string correctly signals a shipping street address line according to the WHATWG and WCAG 1.3.5 specifications?

Starter Code: Production Accessible One-Page Checkout (`checkout.html`)

Why should credit card number inputs use `type="text" inputmode="numeric"` rather than `type="number"`?

What is the role of `tabindex="-1"` on the `<div id="error-summary" role="alert">` element?