JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 23
  • Score
    100M100P100Q61246F
  • License MIT

A vanilla javascript class that allows announcing messages to the screen reader.

Package Exports

  • aria-announcer-js
  • aria-announcer-js/dist/index.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-announcer-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Aria Announcer JS

Aria Announcer JS is a vanilla JavaScript utility designed to enhance web application accessibility by announcing messages to screen readers using ARIA live regions. This simple yet powerful class supports dynamic content changes, ensuring your web applications are accessible to users relying on assistive technologies.

Features

  • Lightweight and Easy to Use: A straightforward API to make announcements to screen readers.
  • Customizable Politeness Levels: Supports off, polite, and assertive ARIA live region settings.
  • Customizable processing time: Supports a customizable time for the processing of each queued announcement
  • Singleton Pattern: Manages announcements through a single live region in the DOM to avoid clutter and confusion.

Installation

Install aria-announcer-js via npm:

npm install aria-announcer-js

This package is also compatible with modern module bundlers and build tools.

Usage

Basic Usage

After installation, you can import AriaLiveAnnouncer into your project and use it to announce messages:

import { AriaLiveAnnouncer } from 'aria-announcer-js';

// defaults are 'polite' and '500' 
const announcer = new AriaLiveAnnouncer({ politeness: 'polite', processingTime: 500 });

// Announce a message
announcer.announce("Hello, world!");

Example

Refer to the example.html file in the GitHub repository for a complete example on how to use AriaLiveAnnouncer in a web application. This example demonstrates triggering announcements on button click.

API Reference

AriaLiveAnnouncer

  • announce(message: string, politeness?: 'off' | 'polite' | 'assertive'): Announces a message with an optional politeness level.
  • init({ politeness, processingTime }: {politeness?: 'off' | 'polite' | 'assertive', processingTime?: number}): Initializes the announcer. Automatically called on creation but can be used to reinitialize after destroy.
  • destroy(): Cleans up by removing the announcer's DOM element, allowing for a new instance to be created.

Development

Clone the repository to contribute or test locally:

git clone git@github.com:CalinaCristian/aria-announcer-js.git
cd aria-announcer-js
npm install
npm run build

Scripts

  • build: Compiles the TypeScript source code.
  • build⌚ Watches for changes and recompiles.
  • start: Creates a server for testing the example.html.
  • release: Prepares a new version release using standard-version.

Contributing

Contributions are welcome! Please feel free to submit pull requests or create issues for any bugs, feature requests, or suggestions you may have.

License

This project is licensed under the MIT License - see the LICENSE file for details.