Popup Error Message Example Summary

Common Features of All Examples

Feature	Markup	Description
Required control	required attribute	Use the HTML5 required attribute communicate to assistive technology that the form field is required. The HTML5 required attribute is used over other techniques, since it provides the information using the native semantics of HTML5.
Invalid value	aria-invalid attribute	The aria-invalid attribute provides a means to communicate to assistive technology that the form field has an invalid value.
Invalid value awareness	role="status" attribute	The role="status" attribute on the element containing the error message creates a live region that will automatically speak when content changes. The status value is used since it will not interrupt other speech, for example if the value alert was used it would immediately stop any other speech and announce the change, which in this case would be disorienting to the user.

Referencing the Error Message

Example	Accessible Name	Accessible Description	Notes
1	label[for] element used to reference the controls label.	none	No information provided on the error message when focus is moved to the invalide form control.
2	label[for] element used to reference the controls label. If there is an error on a form control, the label[for] attribute is added to the error message to also point to the control.	none	Error information is provided through the accessible name property.
3	label[for] element used to reference the controls label.	aria-describedby attribute used to reference the error message.	Error information is provided through the accessible description property.
4	label[for] element used to reference the controls label.	title attribute contains the error message content visible in the graphical rendering.	Error information is provided through the accessible description property.
5	aria-labelledby attribute is used to reference both label and the error message.	none	Error information is provided through the accessible name property.
6	label[for] element used to reference the controls label. If there is an error on a form control, the aria-label attribute is added and includes both the label and the error message.	none	Error information is provided through the accessible name property.