Skip to content

Description

AriaLive is a React component and hook that helps make your web app more accessible by announcing dynamic changes to screen readers.

Priority

The priority prop in the AriaLive component is used to control the urgency of the announcement. It can be set to 'low', 'medium', or 'high'. This allows developers 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. Here's an example of how to use it:

import useAriaLive from '@dnb/eufemia/components/aria-live/useAriaLive'
function MyCustomAriaLive(props) {
const ariaAttributes = useAriaLive(props)
return <section {...ariaAttributes} />
}

Demos

Playground

Output:

Additions

Output: