Identify Input Errors Clearly in Text

Disabilities Affected: Cognitive, Mobility, Visual

Success Criterion: 3.3.1

Level: A

If an input error is automatically detected (like a required field left blank or invalid data entered), the error must be identified, and the item(s) in error must be described to the user in text.

Why It Matters

Users need to know that an error occurred and where it occurred to correct it. Simply highlighting a field in red is insufficient for screen reader users or those with color blindness. Clear text descriptions ensure all users understand what needs fixing. Identifying the specific field helps users locate the error quickly.

Fixing the Issue

When a form submission fails due to validation errors:

Clearly indicate that errors occurred (e.g., with a summary message at the top of the form).
Identify each field containing an error (e.g., by adding “(Error)” to the label, using an icon, changing the border color – ensuring color is not the only indicator).
Provide a specific text description of the error near the field (e.g., “Email address is required,” “Please enter a valid date”).
Use ARIA attributes like aria-invalid=”true” on the erroneous input field and potentially aria-describedby to link the input to its error message programmatically. Consider moving focus to the first field with an error or to the error summary.

Good Code Example

Identifying an error on a required field:

Markup
Preview

<form action="/submit" method="post">
  <div role="alert" id="error-summary" style="color: red; border: 1px solid red; padding: 10px; margin-bottom: 15px;">
     Please correct the errors below.
  </div>

  <div>
    <label for="user-email">Email: <span class="required-indicator">*</span></label>
    <input type="email" id="user-email" name="email"
           required aria-required="true"
           aria-invalid="true" aria-describedby="email-error"> <span id="email-error" style="color: red; display: block;">
       Error: Email address is required.
    </span>
  </div>

  <button type="submit">Register</button>

  <style>
   input[aria-invalid="true"] {
     border: 2px solid red; /* Visual indication */
     background-color: #ffeeee;
   }
   .required-indicator { color: red; }
  </style>
</form>

Please correct the errors below.

Email: * Error: Email address is required.

Bad Code Example

Error indication relies only on color, lacks text description:

Markup
Preview

<form action="/submit" method="post">
  <div>
    <label for="user-email">Email: <span style="color: red;">*</span></label>
    <input type="email" id="user-email" name="email" required
           style="border: 1px solid red;"> </div>
  <button type="submit">Register</button>
</form>

Email: *

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