announceThis
announceThis is a tool for implementing aria-live messaging when you need to communicate to the screenreader user. This is especially useful for dynamic content and changes in context.
Usage
For demo purposes, each example below has a counter that increments with each message created
$.announceThis({
role: 'alert',
message: 'This is an example of an alert message'
});
$.announceThis({
id: 'statusContainer',
role: 'status',
ariaLive: 'assertive'
message: 'This is an example of an updated status message',
ariaRelevant: 'additions removals'
});
All options
$.announceThis.defaults = {
id: "announceThis", // id of live region
role: "status", // log, alert, status
ariaLive: "assertive", // polite, assertive, alert (automatically becomes "alert" when role: "alert")
ariaAtomic: false, // present live region as a whole (support across screenreader/browser combinations is sketchy)
ariaRelevant: "", // 'additions', 'additions removals', 'removals' - does not work with role: alert
message: "" // message to pass to screenreader
};
Notes
- When using the same ID, the first instance of options will be the options used
- role: 'alert' ignores all options except for message
Known Issues
- 'aria-atomic' is flaky across different browser/screenreader combinations - reading: http://terrillthompson.com/tests/aria/live-scores.html