aria-errormessage property is used to present the error message to a screen reader user. It uses id value to reference the message container. This is similar to aria-describedby property which references a message from any other container on the page using the id value reference.
As per WCAG 2.0 SC 3.3.1 Error Identification, user need to be intimated about the error message that is displayed when a form field has invalid data or the form submission is failed.
Aria-errormessage is a ARIA 1.1 property. This property need to be used along with aria-invalid state. This property is used in a form field to convey the error message to a screen reader user.
How does aria-errormessage work?
Aria-errormessage need to be used in the form element referring to the message container with the id value. Initially the form field will be in valid state. So aria-invalid must be set to false or completely avoid using it. The error message container will be hidden from the screen and also for the screen reader using the CSS properties such as visibility:hidden. If the screen reader user need to be intimated immediately when the error message is invoked, in other words when the user enters invalid data aria-live property need to be used. So initially set aria-live to off.
Once the user inputs an invalid data in the form, change the status of aria-invalid from false to true. This will inform the screen reader user that the data entered is incorrect. Now 2 make the error message visible to the user change the CSS style property to visibility:visible. The aria-errormessage will now be able to associate the message since the container’s id is already referred in the input element. To ensure that the error message is announced immediately to the screen reader user switch the aria-live property to aria-live=â€assertiveâ€.
Aria-errormessage used in roles
Can be used in any element of the base markup.
Values of Aria-errormesage property
Uses id reference as the value.