Bug 82: Error Messages Vague + Required Fields Not Marked (Chaos: F82 + F86)

WCAG 3.3.1 (Error Identification) + 3.3.2 (Labels/Instructions) | Multiple failures combined.

Failure F86: Required Fields Not Indicated

Account Registration

Invalid
Wrong format

Issues:

  • No indication which fields are required
  • Only "Phone (Optional)" indicates optional status
  • No asterisk (*) or visual marker
  • Error messages vague ("Invalid", "Wrong format")
  • No aria-required on inputs
Failure F82: Error Messages Not Specific

Contact Form - With Errors

Error
Invalid input
Bad format
Problem detected

Issues:

  • "Error" - not helpful (what's wrong?)
  • "Invalid input" - doesn't explain why
  • "Bad format" - what format is correct?
  • "Problem detected" - vague (what problem?)
  • No aria-describedby linking errors to fields
  • No suggestion for correction
CHAOS: Combination - Required Not Marked + Vague Errors

Complex Form Issues

Personal Information
Invalid
Address
Required field
Wrong

Issues:

  • HTML5 "required" attribute on some inputs but not others
  • No visual indication of required fields
  • Error messages range from vague to slightly helpful
  • "Invalid" - doesn't explain why Last Name is invalid
  • "Required field" - users already know, but why?
  • "Wrong" - what's wrong about ZIP? Format? Range?
Better Error Messages (For Reference)
Poor Message Better Message
Error Email address is not valid. Use format: user@example.com
Invalid Password must be at least 8 characters
Wrong format Phone number format: (XXX) XXX-XXXX
Problem detected This email is already registered. Try logging in or use "Forgot Password"
HAL Fixes: HAL marks required fields with aria-required="true" and visual indicator (*). HAL ensures error messages are linked to fields via aria-describedby. HAL replaces vague messages with specific, actionable guidance. HAL suggests examples or requirements upfront.