WCAG 2.2 Demo Suite

3.3.7 Level A Guideline 3.3 Input Assistance Added in WCAG 2.2 Not detectable automatically

Redundant Entry

Information previously entered by the user in the same process is auto-populated or available to select, unless re-entry is essential, the information is security-sensitive, or the earlier value is no longer valid.

Who this affects

Users with cognitive disabilities who must hold a value in working memory across steps. Users with motor disabilities for whom every keystroke costs effort. Typing an address twice in a checkout is the standard 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.7

Open the failing example in a new tab

fail.html — the problem

<h1>Checkout</h1>

<div class="step">
  <h2>Step 1: Delivery address</h2>
  <div class="field">
    <label for="d-name">Full name</label>
    <input type="text" id="d-name" autocomplete="name">
  </div>
  <div class="field">
    <label for="d-addr">Address</label>
    <input type="text" id="d-addr" autocomplete="street-address">
  </div>
</div>

<!-- FAILURE 1: the same address is asked for a second time in the same process,
     with no way to reuse what was already entered. For a user with a memory or
     motor disability this doubles the cost of the task and doubles the chance
     of a mismatch that fails validation later. -->
<div class="step">
  <h2>Step 2: Billing address</h2>
  <div class="field">
    <label for="b-name">Full name</label>
    <input type="text" id="b-name">
  </div>
  <div class="field">
    <label for="b-addr">Address</label>
    <input type="text" id="b-addr">
  </div>
</div>

<!-- FAILURE 2: information the user already gave, asked again at the end. -->
<div class="step">
  <h2>Step 3: Confirm</h2>
  <div class="field">
    <label for="c-email">Re-enter your email address</label>
    <input type="email" id="c-email">
  </div>
</div>

Meets 3.3.7

Open the passing example in a new tab

pass.html — the fix

<h1>Checkout</h1>

<div class="step">
  <h2>Step 1: Delivery address</h2>
  <div class="field">
    <label for="d-name">Full name</label>
    <input type="text" id="d-name" autocomplete="name" value="A. Marsh">
  </div>
  <div class="field">
    <label for="d-addr">Address</label>
    <input type="text" id="d-addr" autocomplete="street-address" value="12 River Street">
  </div>
</div>

<!-- FIX 1: offer the earlier answer instead of asking for it again. The
     checkbox is checked by default because "same as delivery" is the common
     case, and the fields stay available for the minority who need to change
     them - so nobody is locked out either way. -->
<div class="step">
  <h2>Step 2: Billing address</h2>
  <p class="field">
    <input type="checkbox" id="same" checked onchange="syncBilling()">
    <label for="same">Same as my delivery address</label>
  </p>
  <div id="billing-fields" hidden>
    <div class="field">
      <label for="b-name">Full name</label>
      <input type="text" id="b-name" autocomplete="billing name">
    </div>
    <div class="field">
      <label for="b-addr">Address</label>
      <input type="text" id="b-addr" autocomplete="billing street-address">
    </div>
  </div>
</div>

<!-- FIX 2: show what was entered rather than asking for it again, with a link
     to change it. -->
<div class="step">
  <h2>Step 3: Confirm</h2>
  <p>Email address: <strong>a.marsh@example.org</strong>
     <a href="#step1">Change your email address</a></p>
</div>

<!-- Note the exceptions 3.3.7 allows: re-entry IS permitted when it is
     essential (confirming a new password), when the information is
     security-sensitive, or when the earlier value is no longer valid.
     "It is easier for us to build" is not among them. -->

<p id="step1">Step 1.</p>

How to test it

Walk a multi-step process and note anything asked for twice. A shipping address repeated as a billing address must offer a Same as shipping option or be pre-filled. Password confirmation is an allowed exception.

  • Automated

    Requires walking a multi-step process and tracking what is asked more than once.

    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