Package Exports

aria-announce
aria-announce/dist/aria-announce.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (aria-announce) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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