Make visitors aware of content changes

Changes to the content of a page are indicated by a status message. A status message adds new information to the page. For example, it provides the visitor with information about the results of an action, about the progress of a loading time or a warning about possible errors in a form. This information is important for everyone. It must therefore also be made available to a visitor who uses assistive technology.

Assistive technology continuously synchronizes with the DOM and therefore notices the change, but the visitor who uses it is not informed about it. The aria-live attribute makes a live region out of a block. This information should be formatted in the code so that it gets the attention of the assistive technology in a way that does not unnecessarily interrupt the visitor.

  • The success or progress information is provided with an ARIA role="status" or an aria-live="polite".
  • For alerts, an ARIA role="alert" or an aria-live="assertive" are used.

By default, the assistive technology will only read the changed text. If it is needed that the whole block is read, add aria-atomic="true".

A visitor has no control over the spoken information. If a visitor (accidentally) touches a key, the announcement is interrupted and there is no way to listen to the information again.