WCAG 2.2 Demo Suite

3.3.4 Level AA Guideline 3.3 Input Assistance Added in WCAG 2.0 Not detectable automatically

Error Prevention (Legal, Financial, Data)

For pages causing legal commitments or financial transactions, modifying user-controllable data, or submitting test responses, submissions are reversible, checked and correctable, or confirmed before finalising.

Who this affects

Users with cognitive and motor disabilities, for whom an accidental irreversible action carries real financial or legal cost. A one-click Delete Account with no confirmation is the archetypal failure.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 3.3.4

Open the failing example in a new tab

fail.html — the problem

<h1>Confirm your order</h1>

<!-- FAILURE 1: a financial transaction committed in one click, with no review
     step, no confirmation, and no way to reverse it. The user cannot check
     what they are about to buy or correct a mistake before it costs money. -->
<p>Total: £48.97</p>
<button type="button" class="button" onclick="pay()">Pay now</button>

<!-- FAILURE 2: an irreversible data deletion with no confirmation. -->
<h2>Account</h2>
<button type="button" class="button" onclick="wipe()">Delete all my order history</button>

<!-- FAILURE 3: a legal commitment accepted implicitly, with the terms not
     shown and no explicit act of agreement. -->
<p><small>By pressing Pay now you agree to our terms of sale.</small></p>

<p id="log" role="status"></p>

Meets 3.3.4

Open the passing example in a new tab

pass.html — the fix

<h1>Confirm your order</h1>

<!-- FIX 1 — CHECKED AND CORRECTABLE: everything the user is committing to is
     shown, itemised, with a way to change each part before paying. -->
<div class="review">
  <h2>What you are ordering</h2>
  <table>
    <caption>Order summary</caption>
    <thead><tr><th scope="col">Item</th><th scope="col">Qty</th><th scope="col">Price</th></tr></thead>
    <tbody>
      <tr><th scope="row">Tidal Flats</th><td>1</td><td>£12.99</td></tr>
      <tr><th scope="row">The Long Field</th><td>2</td><td>£35.98</td></tr>
    </tbody>
  </table>
  <p><strong>Total: £48.97</strong></p>
  <p><a href="#basket">Change your basket</a> · <a href="#addr">Change delivery address</a></p>
</div>

<!-- FIX 2 — CONFIRMED: an explicit act of agreement, with the terms reachable
     before agreeing rather than referenced after the fact. -->
<p class="field">
  <input type="checkbox" id="agree">
  <label for="agree">I agree to the <a href="#terms">terms of sale</a></label>
</p>
<button type="button" class="button" onclick="review()">Review and pay</button>

<!-- FIX 3 — REVERSIBLE, and confirmed before the fact. Destructive actions get
     a confirmation naming exactly what will be lost. -->
<h2>Account</h2>
<button type="button" class="button button--secondary" onclick="askWipe()">Delete all my order history</button>
<div id="confirm" hidden>
  <p><strong>Delete 14 orders going back to 2019?</strong>
     You will not be able to recover them, and you will lose your purchase history
     for warranty claims.</p>
  <button type="button" class="button" onclick="doWipe()">Yes, delete 14 orders</button>
  <button type="button" class="button button--secondary" onclick="cancelWipe()">Keep my order history</button>
</div>

<p id="log" role="status"></p>

<h2 id="basket">Your basket</h2>
<p>2 titles, 3 items.</p>
<h2 id="addr">Delivery address</h2>
<p>12 River Street, Riverside.</p>

<h2 id="terms">Terms of sale</h2>
<p>Goods are sold subject to availability. Returns accepted within 30 days.</p>

<!-- 3.3.4 is satisfied by ANY ONE of three routes:
       REVERSIBLE   - the submission can be undone (a cancellation window)
       CHECKED      - data is validated and the user can correct it
       CONFIRMED    - a review step with an explicit opportunity to confirm

     It applies to pages that create a legal commitment, take a financial
     transaction, modify or delete user-controllable data, or submit test
     responses. At AAA, 3.3.6 extends the same protection to EVERY form. -->

How to test it

Identify consequential actions — purchases, contract acceptance, account deletion, data overwrites. Each needs at least one of: reversibility, validation with a chance to correct, or a review-and-confirm step.

  • Automated

    Requires walking the transactional flows to the point of commitment.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification