https://github.com/rancoud/screen-reader-speak.js

Accessibility for Screen Reader to speak
https://github.com/rancoud/screen-reader-speak.js

Last synced: 11 months ago
JSON representation

Accessibility for Screen Reader to speak

• Host: GitHub
• URL: https://github.com/rancoud/screen-reader-speak.js
• Owner: rancoud
• License: mit
• Created: 2021-12-04T09:29:47.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2025-02-26T13:46:55.000Z (11 months ago)
• Last Synced: 2025-02-26T19:44:31.647Z (11 months ago)
• Language: JavaScript
• Homepage:
• Size: 1.74 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
# screen-reader-speak.js

[![Test workflow](https://img.shields.io/github/actions/workflow/status/rancoud/screen-reader-speak.js/test.yml?branch=main)](https://github.com/rancoud/screen-reader-speak.js/actions/workflows/test.yml)

[![Codecov](https://img.shields.io/codecov/c/github/rancoud/screen-reader-speak.js?logo=codecov)](https://codecov.io/gh/rancoud/screen-reader-speak.js)

Accessibility for Screen Reader to speak.  

Based on the work of [Orange a11y guidelines: Make a screen reader talk with JavaScript and ARIA](https://a11y-guidelines.orange.com/en/articles/make-a-screen-reader-talk/)

## Demo

You can check the [demo](https://github.rancoud.com/screen-reader-speak.js/index.html).

## Installation

You need to download the js file from `dist` folder, then you can include it in your HTML.

```html

```

## How to use it?

```js

// Screen Reader use Polite priority by default

screenReaderSpeak('my text');

// Use Assertive priority

screenReaderSpeak('my other text', 'assertive');

```

## Functions

* screenReaderSpeak(text: string, [priority: ?string = polite]): TypeError|ReferenceError|undefined

## Arguments explanations

The first argument is the text that screen reader will read.  

The second argument is the priority for screen reader to read this text.  

By default it will use `polite`, but you can use:

* `off`: the text will be read if user is currently focused on that region.

* `polite`: the text will be read at the end of the current sentence or when the user pauses typing.

* `assertive`: the text will be read immediately, causing an interruption.

## How it works

1. Append a div to the body:  

   `
`

2. Wait 100ms

3. Add text in the div (no HTML)

4. Wait 1000ms

5. Destroy the div


Because it adds a div in DOM, I suggest this css to hide it.

```css

.sr-only {

    border: 0;

    clip: rect(0,0,0,0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    white-space: nowrap;

    width: 1px;

}

```

## How to Dev

`npm test` or `docker buildx bake test` to test and coverage  

`npm run build` or `docker buildx bake build` to create dist js file minified  

`npm run jsdoc` or `docker buildx bake jsdoc` to generate documentation  

`npm run eslint` or `docker buildx bake lint` to run eslint  

`npm run eslint:fix` to run eslint and fix files