Accessible Authentication (Minimum)

Who this affects

Users with cognitive disabilities affecting memory, reading, or numeracy. Users with dyslexia facing a distorted-text CAPTCHA. Blocking password managers by disabling paste turns a minor barrier into an impassable one.

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.

<h1>Sign in</h1>

<form>
  <div class="field">
    <label for="u">Email address</label>
    <!-- FAILURE 1: no autocomplete token, so a password manager cannot fill it. -->
    <input type="email" id="u">
  </div>

  <div class="field">
    <label for="p">Password</label>
    <!-- FAILURE 2: paste is blocked. This is usually added "for security", but
         it does the opposite: it forces people to choose passwords they can
         remember and retype, and it breaks every password manager. For a user
         with a memory or motor disability it can make the account unreachable. -->
    <input type="password" id="p" onpaste="return false" autocomplete="off">
  </div>

  <!-- FAILURE 3: a transcription CAPTCHA. Reading distorted text is a cognitive
       function test - exactly what 3.3.8 prohibits - and there is no
       alternative offered. -->
  <div class="captcha">
    <p>Type the characters you see:</p>
    <p><span class="distorted" aria-hidden="true">x7Kp9m</span></p>
    <div class="field">
      <label for="c">Characters</label>
      <input type="text" id="c">
    </div>
  </div>

  <button type="submit" class="button">Sign in</button>
</form>

<h1>Sign in</h1>

<form>
  <div class="field">
    <label for="u">Email address</label>
    <!-- FIX 1: the correct autocomplete tokens let the browser and any password
         manager fill both fields. This is the single highest-value change on
         the page, and it also satisfies 1.3.5 Identify Input Purpose. -->
    <input type="email" id="u" autocomplete="username">
  </div>

  <div class="field">
    <label for="p">Password</label>
    <!-- FIX 2: paste works. Never block it. -->
    <input type="password" id="p" autocomplete="current-password">
  </div>

  <button type="submit" class="button">Sign in</button>
</form>

<!-- FIX 3: an authentication route with no cognitive function test at all.
     A one-time link sent by email requires no recall and no puzzle. -->
<div class="alt">
  <h2>Or sign in without a password</h2>
  <p>We will email you a link that signs you in. Nothing to remember, nothing to type.</p>
  <button type="button" class="button button--secondary">Email me a sign-in link</button>
</div>

<!-- No CAPTCHA. If you must have one, 3.3.8 allows only:
       - object recognition ("select all the images with a bus"), or
       - identifying non-text content the user provided themselves,
     and even those are removed at AAA by 3.3.9. Better options exist:
     server-side risk scoring, rate limiting, or a hardware/passkey factor -
     none of which ask the user to prove anything with their memory.

     Note that "remember your password" is itself a cognitive function test.
     It is permitted only because the password manager route is available -
     which is exactly why breaking password managers breaks conformance. -->

How to test it

Check every authentication step. Confirm paste is permitted in password fields, autocomplete tokens are present so password managers work, and any CAPTCHA offers a non-cognitive alternative. Transcribing a code from another device also fails if it cannot be pasted.

• Automated

  Missing autocomplete tokens on credential fields are detectable, but whether a cognitive function test is required must be assessed by hand.

  This demo's failure is not machine-detectable. autocomplete="off" is a perfectly valid token, so axe's autocomplete-valid rule is satisfied by it. Blocking paste with onpaste="return false", and requiring a transcription CAPTCHA, are both invisible to every scanner - yet they are what actually locks people out of their accounts.

  Relevant axe rules:

  • autocomplete-valid

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

Related criteria

• 3.3.9 Accessible Authentication (Enhanced) (Level AAA)
• 3.3.7 Redundant Entry (Level A)
• 1.3.5 Identify Input Purpose (Level AA)

In the specification

• Understanding 3.3.8 Accessible Authentication (Minimum) — the W3C explanation, intent and exceptions
• 3.3.8 in the WCAG 2.2 Recommendation — the normative wording