How do I make inline status messages accessible?

Generally, status messages which are important enough to warrant the interruption of other information, such as indications of error, should be presented with an assertive alert. However, inline status messages are a bit different because they're presented as a user navigates through a form, so an assertive announcement might interrupt the user while they're typing or interfere with the announcement of other fields.

Several techniques can help reduce these issues while still making the information available.

For example, you can code the message as a polite alert, instead of as an assertive alert. This signals to assistive technology that the message should not interrupt other announcements. This technique is especially useful for status messages that appear while the user is typing, since you want to avoid distracting or interrupting the user.

Also, clearly state in the message which field it applies to. For example, a status message about an email input could be "Please enter an email," instead of a more general message like "Please complete this field."

Finally, give the element holding the inline status message a unique ID, then reference that ID as the value of an aria-describedby property on the component to which the message corresponds. This creates a programmatic link between the component and the status message and will improve when and how the information is presented to users on assistive technology.

For a deeper dive into forms and notifications, explore the Forms: Labels, Cues, and Errors course from Accessible Web Academy.