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-liveOverridable in the announce method. | | atomic | boolean | true | MDN aria-atomicOverridable 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");
}