Understanding
When designing for Horizon, it's essential to consider non-visual and non-sighted users who cannot perceive visual content changes on a page. Live regions allows you to communicate dynamic content changes to users who rely on assistive technologies such as screen readers. Typically, a screen reader user will hear content on the page read to them as they navigate the page. Sometimes, screen reader users will need to be told directly about content changes. This is where live regions come in. There are two main approaches to using live regions, and it is important to know when to use them.
- Status and alert roles: Used when the content you want to be announced by a screen reader is also visible on the screen.
- The aria-live attribute: Used for announcing content that is not visually displayed, through the ARIA-Live Service.
Horizon has incorporated live regions into its components to ensure a consistent and accessible user experience across the platform.
Usage
Status and Alert roles are intended for use when content that you want to be reported to a screen reader is also visible on the screen. A visible region that is frequently updated can use role="status" to inform screen reader users when content has been updated. Using status will do so in a non-obtrusive way for the user.
When introducing new visible elements to the page, especially those with urgent or important information, we advise using role=”alert”. Examples of this would include toast messages, inline errors on forms fields, or system-wide notifications. These types of live regions will be presented to the user in an aggressive manner, interrupting any output that is otherwise being read.
Status: ARIA Status roles should be used on visible content that passively updated without direct user interaction.
Alert: ARIA Alert roles should be used to inform users of time sensitive, critical information. This content is often introduced to the page when the critical event occurs.
Live regions are also extremely useful for describing complex interactions and providing task updates that are not visually displayed. Drag and drop interactions need to be described to screen reader users and aria-live is the perfect tool to keep them updated.
Aria-Live
Aria-Live should be used for updating screen reader users to the status of a task, such as drag and drop. These updates are not visible on screen. When dragging and dropping an item in a Content Tree with a keyboard, we inform the users the current position of the item they are dragging, and the final position once it has been dropped.
Annotating
The accessibility specification template includes a section to describe ARIA markup and/or screen reader output for complex interactions. When annotating your designs for ARIA live regions, incorporate the following:
- Clearly identify the type of ARIA markup being used, whether that is
role="status",role="alert", or anaria-liveregion. - Document the components and/or user interactions that trigger screen reader readouts with ARIA.
- Provide the content that should be read by the screen reader when live regions are triggered.
- For multi-step flows, consider documenting each step from the start of the flow through the desired end state. Consider the entire experience holistically.