a11y-status

Problem

You'd like to update your screen reader users on changes in the status of your ui but don't want to create multiple dom elements to notifiy them.

Solution

Inject a visually hidden singleton element in the dom which is responsible for notifying screen reader users of updates to the accessibility status of the UI.

Installation

yarn add a11y-status # yarn
pnpm add a11y-status # pnpm
npm install a11y-status # npm

Note that the 11 is the number eleven. A-Eleven-Y is a widely used shorthand for accessibility.

Usage

Import the setStatus function from this library and then use the function to set the desired status in your code.

import { setStatus } from 'a11y-status';

const button = document.querySelector('#insert-selection');
const select = document.querySelector('#selection');

button.addEventListener('click', (event) => {
  const itemName = select.value;

  // Notify the screen reader.
  setStatus(`Selected item: ${itemName}`);
});

Acknowledgements

This code was taken from downshift