Skip to Content

announcer

Activate your screen reader to hear the announcement.

import "drab/announcer/define";
<script type="module">
	const announcer = document.querySelector("drab-announcer");
	const button = document.querySelector("#greeting");

	button.addEventListener("click", () => {
		announcer.announce("Hello world!");
	});
</script>

<drab-announcer></drab-announcer>

<button type="button" id="greeting" class="mb-4">Announce Greeting</button>

<p>Activate your screen reader to hear the announcement.</p>

Overview

Defined in: announcer/index.ts:36

Use the Announcer element to create a visually hidden ARIA live region that announces content changes to screen readers. Use this element when you need to announce changes to screen readers that something has changed. If changed element is visible on the page, add the appropriate ARIA live attribute to the visible element instead of using this announcer.

It’s recommended to create this element with JavaScript using the Announcer.init method, then you can reuse the same announcer throughout the application to avoid duplicate regions (see below).

aria-live

By default, the announcer is created with the polite ARIA live attribute.

Example

import { Announcer } from "drab/announcer";

// creates and appends a new announcer to the body element
const announcer = Announcer.init();

// create announcement
announcer.announce("message");

The Base element creates a single Announcer to share between all elements that can be accessed through this.announce. If you are using one of drab’s other elements you can call announce directly on the element to announce changes.

Extends

  • HTMLElement

Constructors

new Announcer()

new Announcer(): Announcer

Defined in: announcer/index.ts:37

Returns

Announcer

Overrides

HTMLElement.constructor

Methods

announce()

announce(message): void

Defined in: announcer/index.ts:58

Parameters

message

string

message to announce to screen readers

Returns

void

connectedCallback()

connectedCallback(): void

Defined in: announcer/index.ts:41

Returns

void

init()

static init(): Announcer

Defined in: announcer/index.ts:75

Helper method to create a new Announcer element named drab-announcer and append the element to the <body> tag. If an announcer already exists on the page it will return the existing element.

Returns

Announcer

the created or existing Announcer element