#AriaLive

#Import

import { AriaLive } from '@dnb/eufemia'

#Description

AriaLive is a React component and hook that helps make your web app more accessible by adding or defining an ARIA live region that announces dynamic changes to screen readers.

Use it to manually inform users using a screen reader, about changes on the screen that isn't normally covered by screen readers.

By default, the AriaLive component will announce changes to the screen reader in a polite manner. This means that the announcement will wait until the screen reader is idle. This is the recommended way to use the component.

#Usage

For invisible text content:

import { AriaLive } from '@dnb/eufemia'
render(<AriaLive>invisible message to announce</AriaLive>)

For content that is visible, but where changes need to be announced:

import { AriaLive } from '@dnb/eufemia'
render(
  <AriaLive variant="content">
    <ul>
      <li>item one</li>
      <li>item two</li>
      {/* When item three appears, it will be announced */}
    </ul>
  </AriaLive>,
)

#Priority

The priority property in the AriaLive component is used to control the urgency of the announcement. It can be set to high (defaults to low). This allows you to control how assertive the announcement should be, helping to create a better user experience for users who rely on screen readers.

#AriaLive Hook

The useAriaLive hook is a part of the AriaLive component. It can be used to make announcements in functional components. In this example <section> is turned into an ARIA live region with all the functionality of the <AriaLive> component:

import useAriaLive from '@dnb/eufemia/components/aria-live/useAriaLive'

function MyCustomAriaLive(props) {
  const ariaAttributes = useAriaLive(props)
  return <section {...ariaAttributes} />
}

#Demos

#Playground

#Additions