Provide Accessible Alternatives or Assistance for Cognitive Function Tests in Authentication

Disabilities Affected: Cognitive, Visual

Success Criterion: 2.2.7

Level: AA

If an authentication process relies on a cognitive function test (like remembering a password, solving a puzzle, transcription), at least one other authentication method must be available that does not rely on a cognitive function test, OR a mechanism must be available to assist the user in completing the cognitive function test.

Why It Matters

Authentication methods requiring memory (passwords), transcription (typing characters from an image/audio CAPTCHA), or puzzle-solving can be significant barriers for users with various cognitive disabilities. Providing alternatives or assistance makes login accessible.

Fixing the Issue

Offer Alternatives: Provide authentication options that don’t rely on recalling or transcribing codes, such as:

Using third-party login providers (OAuth – e.g., “Login with Google/Facebook”).
WebAuthn / FIDO2 (using device biometrics or security keys).
Email link authentication (“magic links”).
Object recognition CAPTCHAs (though these can have other issues).

Provide Assistance: If using password fields, allow copy-paste and permit use of password managers (don’t disable paste). If using CAPTCHAs requiring transcription, ensure accessible alternatives like audio CAPTCHAs (with clear audio) or alternative tests are available. Avoid complex puzzles.

Good Code Example

Allowing password pasting and offering alternative login:

Markup

<h2>Login</h2>
<form action="/login" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="user" autocomplete="username">
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="pass" autocomplete="current-password">
  <br>
  <button type="submit">Login</button>
</form>

<hr>
<p>Or log in using:</p>
<button onclick="loginWithGoogle()">Login with Google</button>
<script>
   function loginWithGoogle() { /* Redirect to Google OAuth flow */ }
   // function loginWithWebAuthn() { /* Initiate WebAuthn flow */ }
</script>

Bad Code Example

Authentication relies solely on transcribing a visual CAPTCHA with no accessible alternative:

Markup

<form action="/login" method="post">
   <label for="captcha">Enter the text from the image:</label>
   <img src="/captcha-image.php" alt="CAPTCHA image">
   <input type="text" id="captcha" name="captcha_code">
   <br>
   <button type="submit">Login</button>
</form>

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Learn More

Need Help with Compliance?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult