ARIA-invalid (state)

WCAG 22.0 SC 3.3.1 Error Identification says, 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.

Errors for form fields may occur in various ways. One of them is the invalid format of inputting the data. The input format may be pre-defined such as e-mail address, pin code fields or may be author defined such as date formats, password criteria in registration process etc. For these kind of fields providing the instruction that supplies the sample format will be helpful for the users. Still users may commit mistakes.

Validating entered format of the form fields is important before submission. Also letting the users identify the error field is vital for correction and resubmission. Content authors may provide visual cues such as a border or an icon to intimate the field in error. In certain cases the error message does not specifically allow the user to identify the field in error. In such cases ARIA-invalid (state) programmatically defines the error fields for screen reader users.

Using ARIA-invalid (state)

ARIA-invalid (state) is used to identify the errors caused due to incorrect format provided by the user in the form field. The errors such as incorrect e-mail address format, providing alphabets in phone number or pin code fields which are pre-defined and incorrect date format, user names and passwords while registering which are author defined can be intimated to the screen reader using ARIA-invalid (state). Leaving a required field also can be intimated using ARIA-invalid (state).

ARIA-invalid (state) has two possible values. ARIA-invalid=’true’ and ARIA-invalid=’false’. ARIA-invalid should be set to true to intimate the user about the incorrect format in the field. Authors should not set the ARIA-invalid to true before form validation, they should set it to true only when the validation is executed and errors are found. ARIA-invalid=”false” is the default value and absence of it does not impact the functionality. It is advised to disable the submission of the form when any of the fields have ARIA-invalid to true in the form.

All the major screen readers recognise ARIA-invalid (state). VoiceOver on IOS announces “invalid data” and JAWS, NVDA announces invalid entry when they encounters the field having ARIA-invalid=”true”. In the ARIA-invalid test page, enter only one word in the full name field or provide incorrect e-mail address format to activate and understand how ARIA-invalid (state) works.