htmlattributesaccessibilityuiaccessibility

What is the difference between aria-errormessage and aria-alert?


I am new to accessibility types. There is confusion as to when to use aria-errormessage and when to use aria-alert.

I need to display one of these in an aria-live region. Which should I use and why?


Solution

  • It's not an either/or situation. aria-errormessage is new in ARIA 1.1. The value of aria-errormessage is the ID of another object (similar to aria-labelledby and aria-describedby) that contains the text of your error. It's a way to "connect" your object with the error it's associated with. That's all there is to it.

    aria-live is used when you want changes announced and can certainly be used in error conditions but is also used whenever you change the text on your page and want the text change announced, such as if you have a timer or a stock ticker or a status indicator (such as if a wifi connection is lost).

    role="alert" is a "shortcut" for setting aria-live="assertive" and aria-atomic="true". It will cause the word "alert" to be announced and then your text change is read. Error messages don't necessarily have to be alerts. If I have an input field requiring a certain format and I make a mistake, an error should be announced but it's not so critical that it has to be an alert. It could be a simple aria-live="polite".

    Keep in mind that if you use alert (meaning aria-live with a value of assertive) and you have several alert roles, that some alerts can clear the queue of other alerts and you'd only hear one of them.

    https://www.w3.org/TR/wai-aria-1.1/#aria-live

    User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs. (e.g., changes in an assertive region may remove all currently queued changes)