Input assistance
WCAG Guideline 3.3 (AA) and success criteria
Learn how to help users avoid and correct mistakes.
Last updated on
Tell users if they’ve made an input error (Level A, 3.3.1)
An input error is information the user enters that’s not accepted. For example:
- Missing a required field, text box, drop-down or radio button
- Using unaccepted values, such as a letter in a number field
- Entering data using a different format than the one accepted, such as typing ‘Sep’ instead of ’09’ in a field meant to capture a month
If a user makes an error when entering information, the site should automatically detect it and notify them. That means letting them know where and what the problem is. This allows users to fix errors without having to guess where and what went wrong.
For example, if a user forgot to fill out a required field on a form, the website should display a message saying something like “Please fill out all required fields” and highlight the missed field. This makes it clear to the user what they need to do to correct the error.
How to identify input errors
- Set up mechanisms to automatically detect input errors. This can include validating form fields, checking for required information or verifying data formats
- When an error is detected, it’s essential to identify the specific item or field that contains the error. This can be done by associating an error message or indication with the corresponding form field
- Clearly describe the error to the user in text. The error message should be in plain language and specifically relate to the input error. It should inform the user about the nature of the error and provide guidance on how to fix it. Use visual cues or symbols, in addition to text, to indicate the presence of an error
- Make sure error messages are presented in a noticeable and prominent manner. They should be visually distinguishable from other content and placed near the associated form field to provide clear context
- Test the content with people who rely on various assistive technology such as screen readers and keyboard-only navigation to ensure input errors are correctly identified and described to the user. Verify the error messages are displayed accurately and are easily understood
Give clear and helpful input instructions or labels (Level A, 3.3.2)
Users need clear instructions and labels to understand what input to provide. To do this, content authors need to present the information next to the correct input field. For example, if a question on a form gives multiple options using radio buttons, each radio button must have an appropriate label so users know they’re choosing the right one for them.
Similarly, if a form asks for a user’s email address, there should be a clear label next to the field indicating what to enter.
If there’s a required data format, it should be clear in the instructions or labels. Such as ‘DD-MM-YYYY’ representing how to enter a date of birth.
It’s important to note this guideline focuses on data entry and does not extend to links or other controls like expand/collapse widgets or similar interactive components.
How to provide clear input instructions and labels
- Identify the sections or elements that require user input, such as form fields, checkboxes, dropdown menus or interactive elements. Assign clear and concise labels to each of them. The labels should accurately describe the purpose or expected input for the corresponding field. For example, ‘Email Address’ or ‘Password’
- Ensure each label is programmatically associated with a corresponding form control using appropriate markup techniques. This can be achieved using HTML attributes like ‘for’ and ‘id’ or by nesting the label element within the form control element
- Do not use placeholders as a replacement for labels
- For complex input fields or when specific formatting is needed, provide instructions or tooltips to clarify the requirements
- Maintain consistency in the formatting and placement of labels and instructions across your content. People should be able to easily recognize and locate labels and instructions, regardless of the page or section they’re on
- Test with people who rely on assistive technologies, such as screen readers, to ensure labels and instructions are accessible and properly conveyed
- Do user testing to evaluate the effectiveness of the labels and instructions. Observe how users interact with your website and gather feedback to identify any confusion or areas where improvements can be made
Give clear guidance on how to fix data entry mistakes (Level AA, 3.3.3)
This guidance expands error handling practices by not only identifying and describing input errors but also providing helpful correction suggestions, whenever possible. The goal is to help users correct errors quickly and easily without having to guess what went wrong or how to fix them.
For example, “Error: The phone number you entered is not in the correct format. Please enter a 10-digit phone number in the format XXX-XXX-XXXX.” By presenting a specific error message and offering guidance, users can easily understand the issue and take corrective action.
There are certain cases where providing suggestions could jeopardize the security or purpose of the content. For example, in the case of password fields. In these cases, suggestions may not be required.
How to provide suggestions to correct errors
- Set up mechanisms or scripts to automatically detect input errors as users interact with your website. This could include validating form fields, checking for required information or verifying the format of user inputs
- Identify common input errors people may encounter and possible suggestions or solutions for correcting them. For example, if a user enters an email address without the ‘@’ symbol, the suggestion could be to enter a valid email address format
- If you have known suggestions or solutions for correcting input errors, provide them within the error message or near the relevant form field, such as actionable links or dropdown options
- When an error is detected, display an error message that clearly describes the issue to the user. The error message should be concise, easy to understand and directly related to the specific input error
- Test your website’s error suggestion feature with people who rely on assistive technologies, such as screen readers, to ensure that the suggestions are conveyed correctly
- Do user testing to evaluate the effectiveness of your error suggestion feature. Observe how people interact with the suggestions and gather feedback to identify any confusion or areas where improvements can be made
Help prevent errors when users are entering important data (Level AA, 3.3.4)
User-controllable data is data users can change and/or delete through an action. When that data has:
- Legal or financial implications, such as paying a fee or entering personal information, or
- May lead to loss of user data on a website, such as information entered in BCeID
The website must meet at least one of the following conditions:
- Users can undo their submission or edit their data before finalizing it. For example by having a ‘cancel’ or ‘undo’ button
- It checks the data for input errors and gives users a chance to fix them
- It has a confirmation mechanism so users can review, confirm and correct their information before they submit it
How to prevent user errors
- If possible, design processes in a way that allows users to easily reverse or undo any actions they’ve taken. This ensures they can correct mistakes or change their decisions without negative consequences. For example, providing a ‘Cancel’ or ‘Undo’ option that allows them to revert any committed action before it becomes final
- Implement checks to validate user-entered data and identify any input errors. If errors are detected, provide clear and descriptive error messages that explain the issue and suggest corrective actions. For example, if a required field is left blank or an invalid format is entered, inform the user and allow them to correct it before proceeding
- Provide people with the opportunity to review, confirm and correct their information before finalizing their submissions. This can be done through summary pages, review steps or confirmation dialogs where users can verify the accuracy of their input and make any necessary changes. Clearly indicate the consequences of the action being taken to ensure they understand the implications
- Do user testing to check the effectiveness and usability of your error prevention mechanisms