aria-announce

Provides a simple method to make announcements to screen reader users.

• Option to test your announcements by displaying them, in a black bar, at the top of the page.
• Ordinarily, if you set the contents of an aria-live node with the same contents that are already present, an announcement will not be made. aria-announce ensures the announcement is repeated.

if (correct) {
    announce("Correct! See below for the next question");
} else {
    announce("Not quite, try again");
}

Installation

1. Via package installation

npm install aria-announce

import announce from "aria-announce";
import "/path/to/node_modules/aria-announce/dist/aria-announce.css";

2. Via file links

Download the code zip and extract dist/aria-announce.js and dist/aria-announce.css.

<script type="text/javascript" src="/path/to/aria-announce.js"></script>
<link href="/path/to/aria-announce.css" rel="stylesheet" />

Note: when installed via file links, prefix the announce method with the namespace dioada.

Initialize

announce.init(options)

Append the announce node, specify whether testing or not, and specify the default options.

Name	Type	Default	Description
appendTo	string	"body"	Where to append the announce node.
test	boolean	false	If true, announcements are displayed, in a black bar, at the top of the page. The black bar is removed when the announce node is emptied (see clearAfter, below). Click the bar to remove it early.
assertive	boolean	true	MDN aria-live Overridable in the announce method.
atomic	boolean	true	MDN aria-atomic Overridable in the announce method.
clearAfter	number	5	The number of seconds after which to empty the announce node. Emptying the node prevents confusion caused by a user navigating to a stale announcement. Specify -1 to never clear. Overridable in the announce method.

window.addEventListener("DOMContentLoaded", () => {
    announce.init({test: myConfig.showAnnouncements && MY_IS_DEV_ENV_FLAG});
});

Usage

announce(text, options)

Name	Type	Description
text	string	The text to announce.
options	object	Optionally override assertive, atomic and clearAfter for this announcement.

if (correct) {
    announce("Correct! See below for the next question");
} else {
    announce("Not quite, try again");
}