If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. (Level A)

Rationale

The purpose of this checkpoint is to ensure that users are aware that an input error has occurred and can determine what is wrong. The error message should be as specific and detectable as possible.

For example, if an unsuccessful form submission occurs due to input errors, simply re-displaying the form with a visual indicator for each bad field may be insufficient notification that errors occurred. The visual indicator may not be perceivable to a screen reader user and the form may be abandoned as not functional. Clear text messages are required.

The WCAG 2.0 definition of "input error" is information provided by the user that is not accepted. This includes:

  • Information that is required but omitted by the user, or
  • Information that is provided by the user but that falls outside the required data format or allowed values.

Refer to Understanding SC 3.3.1 for more information (external link to WCAG).

Development Techniques

Review the General techniques as well as other tabs applicable to your technology.  Prioritize the use of technology-specific techniques, and implement the General techniques as needed. You are always required to find, understand and implement accessible code techniques to meet the checkpoint. The documented techniques and supplements are not exhaustive; they illustrate acceptable ways to achieve the spirit of the checkpoint. If numbered, techniques are in order of preference, with recommended techniques listed first. Where used, IBM information that complements the WCAG techniques is indicated as supplemental.

General techniques

Instructions: Select the situation below that matches your content. Any item in the described situation represents a technique that is deemed sufficient to address particular circumstances.

Situation A: If a form contains fields for which information from the user is mandatory

Situation B: If information provided by the user is required to be in a specific data format or of certain values

Web (HTML, ARIA, CSS) techniques

Instructions: In addition to the General techniques, any of these Web techniques are deemed sufficient in the following situations when used as instructed.

Situation A: If a form contains fields for which information from the user is mandatory.

Situation B: If information provided by the user is required to be in a specific data format or of certain values.

Web supplements

The following techniques, examples and comments provide additional information beyond that available in the WCAG techniques.

SCR32: Providing client-side validation and adding error text via the DOM

The WCAG example provided in SCR32 handles focus so that screen readers announce the error text. However, it is possible for information to be placed in the DOM that does not make error suggestion clear to some users.

Assume that when a user does not enter a phone number, Javascript prevents the submission of the form and renders an error message below the form indicating that a phone number is required.

<label for="phone">* Phone number:</label>
<input type="text" id="phone" name="phone">
<p>* indicates required information must be entered.</p>
<p style="color:red;">Before submitting this form, your phone number must be entered.</p>

The error message is created in the DOM, but unfortunately screen readers do not always read elements created in the DOM, meaning that blind users do not realize that an error has occurred. This problem may be overcome by assigning an alert role to the message container as follows.

Better code sample:

function showErrorMsg(msg){
var msgContainer = document.createElement('div');
msgContainer.setAttribute('role', 'alert');
msgContainer.setAttribute('id', 'alert');

var msg = document.createTextNode(msg);
msgContainer.appendChild(msg);
document.body.appendChild(msgContainer);
}

When an error occurs, the Javascript function creates a <div> element and assigns it a role of alert. A text node containing the error message is created and appended to the <div>. Finally, the <div> is appended to the document body. The alert role causes the screen reader to read the error message when it is rendered. In addition to this technique, if the div containing the message precedes the form, it will also be more discoverable and will better position users to correct the errors that follow.

Mobile (iOS) techniques

Instructions: In addition to the General techniques, any of these Mobile techniques are deemed sufficient in the following situations when used as instructed.

Identify incomplete fields. Provide text descriptions to identify required fields that were not completed

Refer to the Apple Alert Views documentation to determine how to implement an alert view to notify a user that a required field has not been completed.

Provide a text description when user input falls outside the required format or values

Refer to the Apple Alert Views documentation to determine how to implement an alert view to notify a user that input falls outside the required format or values.

Eclipse techniques

Instructions: The Eclipse techniques in this section represent a technique or combination of techniques deemed sufficient for meeting this checkpoint (3.3.1).

Open error MessageBox and return focus to invalid input

Issue an error when the user enters invalid input by using an org.eclipse.swt.widgets.MessageBox and returning focus to the field containing invalid input.

if (invalid) {
MessageBox messageBox = new MessageBox(shell,
SWT.ICON_ERROR | SWT.OK);
messageBox.setText("Invalid Input Error");
messageBox
.setMessage("Please enter an integer from 1 to 4");
messageBox.open();
}
textField.setFocus();
textField.setSelection(0, textField.getCharCount());

Invalid Input Error dialog box

Figure 1 Invalid Input Error dialog box
 

Open JFace ErrorDialog and return focus to invalid input

Issue an org.eclipse.jface.dialogs.ErrorDialog indicating the invalid input was entered.

ErrorDialog dialog = new ErrorDialog(shell, "Invalid Input", "Please enter an integer from 1 to 4", status, IStatus.ERROR);

Return focus to the input field containing the invalid input.

Define relations between field and descriptive text identifying invalid input

Define relations between an input field and descriptive text. Update descriptive text when invalid input has been entered and send EVENT_DESCRIPTION_CHANGED event to alert assistive technology (AT).

Eclipse SWT Snippet 340: Tell a screen reader about updates to a non-focused descriptive area provides an example of adding relations between a field and text that describes the field to identify when invalid input has been entered.

As seen in this example, the addRelation method is invoked on the Accessible of both the text field and the descriptive text area to define ACC.RELATION_DESCRIBED_BY and ACC.RELATION_DESCRIPTION_FOR respectively. An AccessibleListener is added to the text field's Accessible to get the description associated with the field on EVENT_DESCRIPTION_CHANGED event..

textField.getAccessible().addRelation(ACC.RELATION_DESCRIBED_BY, liveLabel.getAccessible());
liveLabel.getAccessible().addRelation(ACC.RELATION_DESCRIPTION_FOR, textField.getAccessible());
textField.getAccessible().addAccessibleListener(new AccessibleAdapter() {
@Override
public void getDescription(AccessibleEvent event) {
event.result = liveLabel.getText();
}
});

Note: Please see Eclipse Snippet 340 for complete source of example.

Return state of ACC.STATE_INVALID_ENTRY for fields containing invalid input

Add an AccessibleControlListener to the input field's Accessible. Return a state of ACC.STATE_INVALID_ENTRY.

textField.getAccessible().addAccessibleControlListener(new AccessibleControlAdapter(){
@Override
public void getState(AccessibleControlEvent event) {
event.detail |= ACC.STATE_INVALID_ENTRY;
}
});

Indicate when required fields were not completed

Notify users when they fail to provide input for any mandatory form fields, either through on-screen descriptive text or by means of a MessageBox or ErrorDialog. Note: ATs are notified of mandatory fields through the setting of ACC.STATE_REQUIRED on the Accessible of the required field.

textField.getAccessible().addAccessibleControlListener(new AccessibleControlAdapter(){
@Override
public void getState(AccessibleControlEvent event) {
event.detail |= ACC.STATE_REQUIRED;
}
});

Windows-based (MSAA+IA2) techniques

Instructions: The Windows-based (MSAA_IA2) techniques in this section represent a technique or combination of techniques deemed sufficient for meeting this checkpoint (3.3.1).

Open error MessageBox and return focus to invalid input

Issue an error when the user enters invalid input by calling the MessageBox function to open a dialog box reporting the error and returning focus to the field containing invalid input upon close.

Return a state of IA2_STATE_INVALID_ENTRY

Define relations between field and descriptive text identifying invalid input

Provide error text on screen for the field in error and define bi-directional relations between the field and the text as follows:

  • Add an IAccessibleRelation with the type IA2_RELATION_DESCRIBED_BY to the IAccessible2 object of the field in error. Add a reference to the accessible object of the error text to the targets array in the IAccessibleRelation.
  • Add an IAccessibleRelation with the type IA2_RELATION_DESCRIPTION_FOR to the IAccessible2 object of the error text. Add a reference to the accessible object of the field in error to the targets array in the IAccessibleRelation.
  • Return a state of IA2_STATE_INVALID_ENTRY.

Return state of IA2_STATE_INVALID_ENTRY for fields containing invalid input

In addition to providing an error dialog or live region error text as outlined in examples 1 and 2, indicate that the field input is invalid:

  • Set a state of IA2_STATE_INVALID_ENTRY in the IAccessible2 states for the invalid field. Refer to IA2States enum for bit constant definitions.
  • Return IA2_STATE_INVALID_ENTRY through the IAccessible::get_accState method.

Indicate when required fields were not completed

Notify users when they fail to provide input for any mandatory form fields, either through on-screen descriptive text or by means of a MessageBox.  Note: ATs are notified of mandatory fields, through the setting of IA2_STATE_REQUIRED in the IAccessible2 states for the required field. Refer to IA2States enum for bit constant definitions.


    Most links in this checklist reside outside ibm.com at the Web Content Accessibility Guidelines (WCAG) 2.0. W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/

    Copyright © 1994-2017 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University, Beihang University). All Rights Reserved.

    Copyright © 2001, 2017 IBM Corporation