3.3.8Accessible Authentication (Minimum)

Why is "Accessible Authentication" needed?

Login screens exist in nearly every web service. Yet their design can sometimesprevent certain users from accessing the service at all.

The main problem is reliance on "cognitive function tests."A cognitive function test is any mechanism that requires users to memorize, transcribe, calculate, or decipher information. The prime examples are memorizing passwords and CAPTCHA (transcribing characters from an image).

• People with dyslexia take significantly longer to visually read random character strings.
• People with short-term memory difficulties (post-stroke, dementia, ADHD, etc.) make repeated errors when transcribing from screen to another field.
• People with visual impairments simply cannot read CAPTCHA images that lack alternative text.

WCAG 2.2 Success Criterion 3.3.8 requires "at least one authentication method that does not rely on a cognitive test."In practice, this means: don't block password pasting, don't interfere with password managers, allow pasting email OTPs, and offer passkeys as alternatives.

Failing Example (Paste Blocked + Memorization/Transcription)

In the form below, pasting into the password field is blocked. Additionally, login requires a cognitive test (CAPTCHA) where you must read and transcribe characters from an image. Even if you use a password manager, you cannot paste.

Passing Example (Paste Allowed, Auto-fill, Passkey)

In the form below, pasting into the password field is allowed, andautocomplete="current-password" enables password manager auto-fill. There is no cognitive test; instead, you can paste a one-time code from emailor choose to sign in with a passkey (biometric authentication).

Implementation (Code)

<!-- ✅ Password manager friendly, paste allowed -->
<form method="post" action="/login">
  <div class="field">
    <label for="login-email">Email</label>
    <input
      type="email"
      id="login-email"
      name="email"
      autocomplete="username"
      required
    />
  </div>

  <div class="field">
    <label for="login-password">Password</label>
    <!-- No onpaste handler → paste and password managers work -->
    <input
      type="password"
      id="login-password"
      name="password"
      autocomplete="current-password"
      required
    />
  </div>

  <!-- Alternative ①: Email OTP (pasteable, autocomplete-supported) -->
  <div class="field">
    <label for="otp-code">Verification code (you can paste it from email)</label>
    <input
      type="text"
      id="otp-code"
      name="otp"
      inputmode="numeric"
      autocomplete="one-time-code"
    />
  </div>

  <button type="submit">Sign In</button>
</form>

<!-- Alternative ②: Passkey / biometric authentication (no memorization needed) -->
<button type="button" id="passkey-btn">
  Sign in with Passkey (Touch ID / Face ID)
</button>

<!-- ❌ Paste blocked + cognitive test required -->
<form>
  <label for="password">Password</label>
  <!-- onpaste="return false" blocks all pasting -->
  <input
    type="password"
    id="password"
    name="password"
    onpaste="return false"
  />

  <!-- Cognitive test: read and transcribe an image -->
  <p>Read the characters in the image below and enter them:</p>
  <img src="/captcha.png" alt="">
  <!-- alt="" → screen readers cannot read the content at all -->
  <label for="captcha">Character verification (required)</label>
  <input type="text" id="captcha" autocomplete="off" />

  <button type="submit">Sign In</button>
</form>

Practical Ways to Avoid Cognitive Tests

Adopt one or more of the following combinations to satisfy WCAG 3.3.8.

Allow password copy & paste

Don't cancel onpaste events or block pasting via JavaScript. Keep fields in a state where password managers can auto-fill.

Set autocomplete attributes correctly

Use autocomplete="current-password" for password fields,autocomplete="new-password" for registration fields, andautocomplete="username" for email fields. This enables browsers, the OS, and password managers to recognize fields accurately.

Allow pasting email/SMS one-time codes (OTP)

Add autocomplete="one-time-code" to OTP input fields. iOS and Android will auto-suggest codes from email/SMS, eliminating transcription. Don't block pasting either.

Offer passkeys / biometric authentication as an alternative

Passkeys via WebAuthn API (navigator.credentials.get()) require no password or CAPTCHA. Users authenticate with Touch ID, Face ID, or PIN, completely eliminating the memorization and transcription burden.

Object recognition (selecting from photos) is conditionally acceptable

"Click the images with cats"-style CAPTCHAs are not subject to this criterion. However, image recognition without alt text violates 1.1.1. The key benefit is that transcribing English characters is not required.

Checklist

• The onpaste event is not cancelled on password fields
• JavaScript paste event listeners do not block pasting either
• Password fields have autocomplete="current-password" (or new-password)
• OTP fields (if present) have autocomplete="one-time-code"
• Email fields have autocomplete="username"
• CAPTCHA is not the sole authentication method; alternatives exist
• Password managers (1Password, Bitwarden, etc.) can recognize the fields — verified
• At least one of passkey, biometric authentication, or email OTP is provided as an alternative (ideal)