Bug 83: Password Reset with Weak Requirements Display (F82)

WCAG 3.3.1 (Error Identification) + 3.3.5 (Help) | Password requirements unclear or inaccessible.

Failure F82: Requirements Hidden Behind Icon/Tooltip

Reset Your Password

ℹ️

Requirements shown on icon hover (not accessible)

Issues:

  • Requirements only shown on hover/tooltip
  • Screen readers may not announce title attribute
  • Users don't know why password is rejected
  • Icon with no aria-label
Failure F82: Requirements Color-Coded Only

Create New Password

• Uppercase letter (A-Z)
• Lowercase letter (a-z)
• Number (0-9)
✓ At least 8 characters
• Special character (!@#$%)

Issue: Requirements shown but color alone indicates status. Screen reader users hear all items regardless of met/unmet status. Should use checkmarks and text labels.

Failure F82: Strength Meter Visual Only (No Text)

Password Strength

Strength:
<!-- BUG: Strength shown by color only --> 25% - Red (Weak) 50% - Yellow (Fair) 75% - Light Green (Good) 100% - Green (Strong) <!-- Screen readers only see bar, not description -->
Failure F82 + Password Not Shown (No Verify Option)

Reset Password

Issues:

  • Password fields hidden, can't verify typing
  • No "show password" checkbox (accessibility must have)
  • High error rate when confirming password
  • Especially problematic for users with low vision or motor impairments
Better Approach (For Reference)
<!-- BETTER: Show requirements clearly, text + visual --> <fieldset> <legend>Password Requirements</legend> <ul aria-label="Password strength requirements"> <li aria-label="Uppercase letter: required">✓ Uppercase letter (A-Z)</li> <li aria-label="Lowercase letter: not met">○ Lowercase letter (a-z)</li> <li aria-label="Number: not met">○ Number (0-9)</li> <li aria-label="8+ characters: required, met">✓ At least 8 characters</li> </ul> </fieldset> <div role="status" aria-live="polite"> Password strength: Strong (80%) </div> <!-- Show password toggle --> <input type="checkbox" id="toggle"> <label for="toggle">Show password</label>
HAL Fixes: HAL displays password requirements visually and makes them accessible (aria-label). HAL adds "Show Password" checkbox. HAL provides text descriptions for strength meter (aria-live). HAL ensures requirements are announced upfront, not hidden behind hover/tooltip. HAL uses checkmarks + text, not color alone.