We have aria-describedby attribute in the aria 1.0. what we as authors have been doing is that we associate instructions as well as inline error message of the form control by using aria-describedby attribute. Let us understand what does an inline error message mean.
imagine there is a form on the page. Form has first name, last name, and submit controls. When submit button is invoked without providing any input in the both fields then it displays inline error messages. For the first name form field, it displays the “please enter first name” as inline error message. For the last name form field, it displays the “please enter last name” as inline error message. We have been associating these type of inline error messages by using aria-describedby attribute so far.
Aria 1.1 introduced aria-errormessage attribute to associate these type of inline error messages with the form fields. It claims that it is more semantic method to associate the error messages by using aria-errormessage instead of using aria-describedby attributes. The aria-errormessage attribute references another element that contains custom error message text.
Author notes
- Authors can use this attribute on all the elements of base markup
- author should use aria-invalid attribute in conjunction with aria-errormessage.
- aria-errormessage should not be applicable if the object is in the valid state and either has aria-invalid set to false or no aria-invalid attribute
- Author should ensure that error message is visible on the screen when it is displayed.
- 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.
Sample code snippet
<!– Initial valid state –>
<label for=”startTime”> Please enter a start time for the meeting: </label>
<input id=”startTime” type=”text” aria-errormessage=”msgID” value=”” aria-invalid=”false”>
<span id=”msgID” aria-live=”off” style=”visibility:hidden”> Invalid time: the time must be between 9:00 AM and 5:00 PM” </span>
<!– User has input an invalid value –>
<label for=”startTime”> Please enter a start time for the meeting: </label>
<input id=”startTime” type=”text” aria-errormessage=”msgID” aria-invalid=”true” value=”11:30 PM” >
<span id=”msgID” aria-live=”assertive” style=”visibility:visible”> Invalid time: the time must be between 9:00 AM and 5:00 PM” </span>
References