npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aria-announcer-js

v1.0.28

Published

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

Downloads

66

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. It also announces remaining queued items if any separated by new lines.

Development

Clone the repository to contribute or test locally:

git clone [email protected]:CalinaCristian/aria-announcer-js.git
cd aria-announcer-js
npm install
npm run build

Scripts

  • build: Compiles the TypeScript source code.
  • build:watch: Watches for changes and recompiles.
  • start: Creates a server for testing the index.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.

Links