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

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:

• Read the full criterion for WCAG 3.3.2: Labels or instructions: WCAG 3.3.2 Labels or instructions (w3.org)

• Read the full criterion for WCAG 3.3.5: Help: WCAG 3.3.5 Help (w3.org)

• Read the full criterion for WCAG 3.3.6: Error prevention: WCAG 3.3.6 Error prevention (all) (w3.org)

• Read the full criterion for WCAG 3.3.7: Redundant Entry: WCAG 3.3.7 Redundant entry (w3.org)

• Check out some examples of good and bad error prevention: Tips for designing accessible forms (uxdesign.cc)

Discussion questions:

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

• Do you have other examples of preventing errors in learning content?

• What are some common errors you see related to input fields?

• How do you provide detailed instructions without overwhelming users?

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