WCAG 2.2 Demo Suite

3.3.2 Level A Guideline 3.3 Input Assistance Added in WCAG 2.0 Partly detectable automatically

Labels or Instructions

Labels or instructions are provided when content requires user input, including format requirements and which fields are required.

Who this affects

Everyone, but especially screen reader users who cannot infer a field's purpose from position, and users with cognitive disabilities who need format expectations stated rather than discovered by failing.

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.2

Open the failing example in a new tab

fail.html — the problem

<h1>Delivery details</h1>

<form>
  <!-- FAILURE 1: placeholder used as the label. The moment the user types, the
       label is gone - so anyone who is interrupted cannot check what the field
       was for. Placeholder text is also low contrast by default and is not a
       reliable accessible name. -->
  <div class="field"><input type="text" name="name" placeholder="Full name"></div>
  <div class="field"><input type="text" name="post" placeholder="Postcode"></div>

  <!-- FAILURE 2: no label at all, only a visual asterisk whose meaning is
       never explained, and no indication of the format expected. -->
  <div class="field">* <input type="text" name="phone"></div>

  <!-- FAILURE 3: a date with a strict format that is never stated. The user
       only finds out the rule by getting it wrong. -->
  <div class="field"><input type="text" name="deliver" placeholder="Preferred date"></div>

  <button type="submit" class="button">Continue</button>
</form>

Meets 3.3.2

Open the passing example in a new tab

pass.html — the fix

<h1>Delivery details</h1>

<!-- FIX 1: state the convention once, up front, instead of relying on a symbol
     the user has to decode. -->
<p>Fields marked <strong>(required)</strong> must be completed.</p>

<form>
  <!-- FIX 2: a persistent visible label, associated with for/id. It stays on
       screen after typing. autocomplete lets a password manager or browser
       fill it, which also satisfies 1.3.5 Identify Input Purpose. -->
  <div class="field">
    <label for="name">Full name (required)</label>
    <input type="text" id="name" name="name" autocomplete="name" required>
  </div>

  <div class="field">
    <label for="post">Postcode (required)</label>
    <p class="hint" id="post-hint">For example, SW1A 1AA.</p>
    <input type="text" id="post" name="post" autocomplete="postal-code"
           aria-describedby="post-hint" required>
  </div>

  <!-- FIX 3: the requirement is spelled out in the label, and the hint explains
       why the field is being asked for - which is what people actually want to
       know before handing over a phone number. -->
  <div class="field">
    <label for="phone">Mobile number (required)</label>
    <p class="hint" id="phone-hint">We only use this to text you on the day of delivery.</p>
    <input type="tel" id="phone" name="phone" autocomplete="tel"
           aria-describedby="phone-hint" required>
  </div>

  <!-- FIX 4: the expected format is stated BEFORE submission, with a worked
       example. Telling the user only in the error message is too late. -->
  <div class="field">
    <label for="deliver">Preferred delivery date (optional)</label>
    <p class="hint" id="deliver-hint">Use the format DD/MM/YYYY, for example 05/09/2026.</p>
    <input type="text" id="deliver" name="deliver" inputmode="numeric"
           aria-describedby="deliver-hint">
  </div>

  <button type="submit" class="button">Continue</button>
</form>

How to test it

Confirm every field has a persistent visible label programmatically associated with it. Check that required fields are marked in text or with required, and that format expectations are stated before submission, not only in an error.

  • Automated

    Missing labels are caught reliably. Whether instructions are adequate — say, that a date must be DD/MM/YYYY — is a human judgement. Placeholder-only labelling often passes scanners while failing users.

    Relevant axe rules:

    • label
    • form-field-multiple-labels
    • select-name

  • 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