Identifies the element that provides an error message for the object.
Description
New in ARIA 1.1
Identifies the element that provides an error message for the object. See related aria-invalid and aria-describedby.
The aria-errormessage attribute references another element that contains custom error message text. Authors MUST use aria-invalid in conjunction with aria-errormessage. Initially, the object is in a valid state and either has aria-invalid set to false or no aria-invalid attribute, and the element referenced by aria-errormessage is not applicable. If the user enters an invalid value for the object, aria-invalid is set to true to indicate that aria-errormessage is now pertinent. When aria-errormessage is pertinent, authors MUST ensure the content is not hidden and is included in a container that exposes the content to the user as it is expected that the assistive technology user will navigate to the content in order to access it.
Authors MAY use live regions for the error message element applying either an aria-live property or using one of the live region roles, for example, alert. A live region scenario is when an error message is displayed to users only after they have provided invalid information. The message describes what is wrong and advises users as to what is required. For example, an error message might be, “Invalid time: the time must be between 9:00 AM and 5:00 PM”.
Example
The following example shows the markup for the initial valid state and for the subsequent invalid state. Note the changes to aria-invalid on the text input object, and to aria-live on the element containing the text of the error message:
Invalid time: the time must be between 9:00 AM and 5:00 PM”
Invalid time: the time must be between 9:00 AM and 5:00 PM”
Characteristics
Used in Roles
All elements of the base markup
Value
ID reference
Reference to the ID of another element in the same document
Semantic HTML
No HTML element equivalent.
The aria-errormessage attribute takes an ID reference in the same manner as aria-describedby, and is only exposed when aria-invalid is set to ‘true’ on the same element. The use of a live region attribute such as aria-live=”polite” on the error message container element is optional.
Reference
W3C (opens new window)