Spotlight 24: 

Preventing Errors

(WCAG 3.3.2, 3.3.4, 3.3.5, & 3.3.7)

In this spotlight, let’s talk about how to prevent errors with input fields such as text entry fields, or radio buttons. 

What we cover in this spotlight

There are nine criteria in the Input assistance category (3.3) in WCAG. In this spotlight, we cover the 5 criteria that relate to preventing errors, and we cover some more criteria that relate to assisting users once they have made an error in a future spotlight. 

Text-only image. The text reads: Preventing Errors  3.3.2 Labels or instructions (A) Provide clear instructions to input fields. 3.3.5 Help (AAA) Provide context-sensitive help if 3.3.2 is not enough. 3.3.6 Error Prevention (All) (AAA) Give opportunity to reverse, check, or confirm information. 3.3.7 Redundant Entry (A) Avoid asking users to enter the same information again.
Preventing errors (WCAG 3.3.2, 3.3.5, 3.3.6 & 3.3.7)

What the criteria say

Labels or instructions (3.3.2 -  Level A) is about providing clear labels or text instructions to any input field such as text entry fields or radio buttons so that the learner knows what input data is expected. For example, if you want the learner to select the submit button after answering an assessment question, there should be text on the button that says "Submit". If the learner is required to select more than one option in a question, it's best practice to make it clear that they should select more than one option. Finally, another example is when the learner is required to enter a date in a certain format. In that case, make it clear in what format you're expecting that date. 


In addition, according to Help (3.3.5 - Level AAA), if the label is not sufficient to describe all functionality, you should provide "context-sensitive help". For example, if you want the answer to be in a very specific format that you cannot clearly communicate in the label, you might add a question mark icon next to the input field that provides more details on the required format.


Another criterion, Error Prevention (All) (3.3.6 - Level AAA) is created to help users avoid consequences that may result from making a mistake when submitting form data. The criterion requires that when the learner submits any information, they're given the opportunity to either reverse, check, or confirm the information. This might not be fully applicable to assessment questions in compliance training if you don't want to give learners the option to correct their options. However, whenever possible, it's recommended to allow learners to undo the interaction, review the information they entered or selected, and correct them if necessary. This means for example that interactions should have a Submit button before revealing the correct feedback. 


Note that the last criterion was an advanced-level criterion. We also want to mention that it has a lower-level (AA) version, Error Prevention (Legal, Financial, Data) (3.3.4 - Level AA). However, this doesn't fully apply to learning content and it only pertains to input fields that "cause legal commitments or financial transactions for the user to occur", so for websites mainly. 


In 2023, WCAG 2.2 introduced a new criterion, Redundant Entry (3.3.7 - Level A). It requires that, unless necessary, users are not asked to enter the same information again. This is more applicable to personal information such as an email address, but it may apply to previous selections made by the learner. Such information, if needed again, should either be auto-populated or available for the user to select. Exemptions include entering data again for security reasons or when the new information is essential. For example, if you want the learner to enter the same information again to compare to their previous answer and/or score, that's a very good reason to have them enter the information again without auto-populating. 

Resources:

Discussion questions:

Get Involved: Come to the LCA Spotlight LinkedIn group and join the conversation.

When you post in the community, use the hashtag #LCASpotlightPreventingErrors

Spotlight 23: Accessible PDFs

Spotlight 25: Correcting errors