diff --git a/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx b/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx
index 84b9a8813a3..900c7e014c2 100644
--- a/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx
+++ b/packages/dnb-design-system-portal/src/docs/EUFEMIA_CHANGELOG.mdx
@@ -1,8 +1,11 @@
+## January, 18. 2024
+
+- New component: [AriaLive](/uilib/components/aria-live)
+
## May, 31. 2023
- [New major version 10](/uilib/about-the-lib/releases/eufemia/v10-info/)
-- New components released:
- - [SkipContent](/uilib/components/skip-content)
+- New component: [SkipContent](/uilib/components/skip-content)
- [GlobalError](/uilib/components/global-error) got new styles (without illustrations).
- New [Icons](/icons/secondary):
- `handshake`
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live.mdx
new file mode 100644
index 00000000000..d966b2d928b
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live.mdx
@@ -0,0 +1,15 @@
+---
+title: 'AriaLive'
+description: 'AriaLive is a React component and hook that helps make your web app more accessible by announcing dynamic changes to screen readers.'
+showTabs: true
+hideTabs:
+ - title: Events
+theme: 'sbanken'
+status: 'new'
+---
+
+import AriaLiveInfo from 'Docs/uilib/components/aria-live/info'
+import AriaLiveDemos from 'Docs/uilib/components/aria-live/demos'
+
+
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx
new file mode 100644
index 00000000000..13208a0181e
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/Examples.tsx
@@ -0,0 +1,154 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import { Field, FieldBlock, Form } from '@dnb/eufemia/src/extensions/forms'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import { AriaLive, Button, Flex, P } from '@dnb/eufemia/src'
+
+export const AriaLivePlayground = () => (
+
+ {() => {
+ const priorities = ['low', 'high']
+ const contents = {
+ default: 'This is a default announcement',
+ second: 'And a second one',
+ third: 'A third one',
+ fourth: 'And a fourth one',
+ }
+ const priority: 'low' | 'high' = 'low'
+ const defaultData = {
+ enabled: false,
+ content: contents.default,
+ priority,
+ }
+
+ function AriaLiveExample() {
+ const { data } = Form.useData('aria-live-playground', defaultData)
+
+ return (
+
+
+
+
+ {priorities.map((content) => {
+ return (
+
+ )
+ })}
+
+
+
+ {Object.entries(contents).map(([key, value]) => {
+ return (
+
+ )
+ })}
+
+
+
+
+
+ Output:{' '}
+
+ Message: {data.content}
+
+
+
+
+ )
+ }
+
+ return
+ }}
+
+)
+
+export const AriaLiveAdditions = () => (
+
+ {() => {
+ const defaultData = {
+ enabled: false,
+ content: [
Line 1
],
+ }
+
+ function AriaLiveExample() {
+ const { data, update } = Form.useData(
+ 'aria-live-additions',
+ defaultData,
+ )
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Output:{' '}
+
+ Message: {data.content}
+
+
+
+
+ )
+ }
+
+ return
+ }}
+
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/demos.mdx
new file mode 100644
index 00000000000..c9d0b6b72fc
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/demos.mdx
@@ -0,0 +1,15 @@
+---
+showTabs: true
+---
+
+import * as Examples from './Examples'
+
+## Demos
+
+### Playground
+
+
+
+### Additions
+
+
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx
new file mode 100644
index 00000000000..0e5a8677c9c
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/info.mdx
@@ -0,0 +1,52 @@
+---
+showTabs: true
+---
+
+## 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:
+
+```tsx
+import { AriaLive } from '@dnb/eufemia'
+render(invisible message to announce)
+```
+
+For content that is visible, but where changes need to be announced:
+
+```tsx
+import { AriaLive } from '@dnb/eufemia'
+render(
+
+
+
item one
+
item two
+ {/* When item three appears, it will be announced */}
+
+ ,
+)
+```
+
+## Priority
+
+The `priority` prop 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 `` is turned into an ARIA live region with all the functionality of the `` component:
+
+```tsx
+import useAriaLive from '@dnb/eufemia/components/aria-live/useAriaLive'
+
+function MyCustomAriaLive(props) {
+ const ariaAttributes = useAriaLive(props)
+ return
+}
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/properties.mdx
new file mode 100644
index 00000000000..4337890dff1
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/aria-live/properties.mdx
@@ -0,0 +1,17 @@
+---
+showTabs: true
+---
+
+## Properties
+
+| Properties | Types | Description |
+| ------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant` | `string` | _(optional)_ Can be `text` for text messages or `content` for whole application content. Defaults to `text`. |
+| `priority` | `string` | _(optional)_ Priority of the announcement. Can be `low` or `high`. Defaults to `low`. |
+| `delay` | `number` | _(optional)_ Delay in milliseconds before the announcement is made. Defaults to `1000`. |
+| `disabled` | `boolean` | _(optional)_ If `true`, the announcement will not be made. Defaults to `false`. |
+| `atomic` | `boolean` | _(optional)_ If `true`, assistive technologies will present the entire region as a whole. If `false`, only additions will be announced. |
+| `politeness` | `string` | _(optional)_ The politeness setting for the announcement. Can be `polite` or `assertive`. |
+| `relevant` | `string` | _(optional)_ A space-separated list of the types of changes that should be announced. Can be `additions`, `removals`, `text`, or `all`. |
+| `showAnnouncement` | `boolean` | _(optional)_ Whether to show the children or not. |
+| `children` | `ReactNode` | The content that will be announced to the user. |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx b/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx
index b902129d26c..8548325cdaf 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/intro/03-accessibility.mdx
@@ -38,6 +38,7 @@ Eufemia includes a range of tools to help you make better accessible application
- [FieldBlock](!/uilib/extensions/forms/create-component/FieldBlock) handles `