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");
}