---
title: "Are form submission errors helpful?"
date: "2025-03-17T13:33:36+00:00"
summary: "Form error messages provide clear suggestions for correction, improving accessibility and user experience."
image:
type: "page"
url: "/web-governance/are-form-submission-errors-helpful"
id: "6d4ff5fa-0585-447c-a421-cd2fff026156"
---

Table of contents will be added

3.3.3 Error Suggestion

Introduction
------------

This document provides information about the following Acquiq Web Governance accessibility check:

*   Are form submission errors helpful?

What
----

This check aims to ensure that users receive appropriate suggestions so that they can correct form input errors. When a user submits a form with errors, the error messages must describe the issue and provide clear suggestions on how to fix it.

For example, instead of the message _Invalid password_, provide a more helpful message such as: _The password must be at least 8 characters long and include a number._

Provide specific guidance so that users can quickly understand what went wrong and how to correct it.

Why
---

Users need a way to identify errors and get the information about how to fix them with minimal effort.

Who
---

### Affected users

This check affects users who have:

*   Cognitive disabilities: Who may struggle to understand vague error messages.
*   Visual impairments: Who use screen readers to complete forms. If errors are not described clearly, these users may not know how to fix them.
*   Limited technical knowledge: Some users may not be familiar with specific format requirements.

Examples
--------

This section provides some pass and fail examples of this issue.

### Pass examples

*   **The error message identifies the problem and offers a solution**
    
        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email" required>
        <span id="email-error" style="color: red;">Please enter a valid email address in the format: example@domain.com.</span>
    
    Why this works:
    
    The error message explains the issue and the solution.
    
*   **Use** `**aria-describedby**` **for accessible error messages**
    
        <label for="phone">Phone Number:</label>
        <input type="text" id="phone" name="phone" aria-describedby="phone-error">
        <span id="phone-error" style="color: red;">Phone number must be in the format (123) 456-7890.</span>
    
    Why this works:
    
    The error message is linked to the input field so that assistive technologies can read it.
    

### Fail examples

*   **Vague error message**
    
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <span style="color: red;">Invalid input.</span>
    
    Issue:
    
    *   The message does not explain what is invalid or how to fix it.
    
    Fix: Give an informative error message such as:
    
    *   _Username must be between 5 and 15 characters long._
*   **Error message is only conveyed visually, for example a red border around the field.**
    
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required style="border: 2px solid red;">
        Issue:
    
    Issue:
    
    *   Users who are colorblind or use screen readers get no guidance on the error.
    
    Fix: Add a text-based error message such as:
    
    *   _Password must be at least 8 characters long_.

How
---

This section provides instructions on how to review and fix the issue.

### How to review it

This section provides some methods on how to review the issue.

*   **Test the form submission**
    
    Submit the form with incorrect or missing data and evaluate the response.
    
*   **Ensure that error messages explain the issue and also suggest a fix**
    
    Ensure that each input error message provides clear guidance.
    
*   **Use a screen reader**
    
    Ensure that screen readers announce error messages properly when errors occur.
    
*   **Ensure that error messages are visible and easy to understand**
    
    Error messages cannot be hidden or rely only on color cues.
    

### How to fix it

This section provides some methods on how to correct the issue.

*   **Provide specific suggestions for error correction**
    
        <label for="card">Credit Card Number:</label>
        <input type="text" id="card" name="card" required aria-describedby="card-error">
        <span id="card-error" style="color: red;">Please enter a 16-digit credit card number without spaces.</span>
    
    Why this works: The message clearly explains the correct input format.
    
*   **Use aria-live for real-time error updates**
    
        <div role="alert" aria-live="assertive" id="form-error">
        Error: Please enter a valid email address.
        </div>
    
    Why this works: The error is read aloud immediately when it appears.
    
*   **Ensure that errors are not only conveyed visually**
    
    Do not just change an input field’s border to red, but also add a text message to explain the error.
    

Additional resources
--------------------

### WCAG success criteria

[3.3.3 Error Suggestion](https://www.w3.org/WAI/WCAG21/Understanding/error-suggestion.html)