Skip to main content

Content design

Errors and messages need to be noticed and understood by everyone. Content designers write these messages and UX designers note their behavior in the wireframes. This coordinated approach ensures that important text updates are understandable and accessible to all.

Level 1

Describe and identify errors, and offer suggestions

  • What to do

    Error messages should clearly identify the input in error and describe the issue. Use the text of the input’s label to identify the error. Do not generically describe the error when it is possible to provide a specific, useful description of the problem. Vague errors are especially problematic for some people with disabilities, who may struggle to find, understand, and fix them.

    Depending on the design of feedback, errors might be reported in a dialog, at the top of a form, or inline with fields. Regardless of the implementation, when multiple errors exist, write error messages so that it is easy for the user to distinguish between them.

    text in red that says: Incorrect username or password

    Provide helpful feedback so users understand that either the username or password was entered incorrectly.

    text in red that says: Unable to sign in

    Don’t provide little or no guidance where users understand that they are unable to sign in but don't know why there is an error.

    Resources

    Requirements

  • What to do

    Make it easy for the user to understand how to correct input errors. If an input requires a specific input format, error messages need to include the expected format, potentially with an example. When a user does not provide input for required fields, ensure that the error message indicates which fields are incomplete.

    text in red that says: Enter username in the format: yourname@example.com

    Provide suggestions so users know the proper format they need.

    text in red that says: The username is not entered in the correct format

    Don't provide ambiguous information in an error message that doesn't tell users how to fix it.

    Resources

    Requirements

Help avoid unintended user consequences

  • What to do

    Provide users with a summary of any interaction before final submission. This is especially important where a wrong transaction may have serious consequences. WCAG emphasizes this must take place for any transaction involving money, legal commitments, or user-controlled data. Allow the user to review their input data in a form that is concise and understandable. This way they can make sure their input is correct and potentially update it before confirming or cancelling the completion of the transaction.

    Delete data? dialog with message that says, 'This action CANNOT be undone. This action will permanently delete the selected data.', followed by black Cancel and red Delete buttons

    A dialog box confirms with the user whether or not to go through with the permanent result of deleting selected data.

    Resources

    Requirements

  • What to do

    Some interations allow a user to reverse an action. This is in addition to offering users ways of confirming important transactions before they take place. If users can undo an action, content designers must write clear instructions on how to undo. Inform the user if there’s a certain time period after which the action can’t be reversed.

    Potential instructions for reversing an action include:

    • Whether the reversal has to be immediate or within a certain period
    • The method of reversing the action, whether online, through an e-mail, or with a phone call
    • The method of returning purchases and the terms of the return
    • The location of backup data, such as a trash folder for deleted data
    message that says 'The email was moved to Trash', next to Undo and X (Close) buttons

    Users can reverse deleting an email by selecting Undo button.

    Resources

    Requirements

Level 2

Flag status messages and hover text

  • What to do

    Content designers need to distinguish between error and status messages. Work with UX to determine the importance of different feedback, then indicate where it should be non-disruptive. This will allow the developers to apply the proper roles and states to the messages when they build.

    Requirements

  • What to do

    Not all feedback on the page requires the user’s immediate attention. Take for example submitting a Search. The feedback to the user might be “5 results returned”. Content designers should flag this content as a status message. The developer can then add the role of “status”. Doing so will let the users of screen readers hear the feedback without having to move their focus to the message.

    Resources

    Requirements