Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vue-a11y/vue-announcer

A simple way with Vue to announce any useful information for screen readers.
https://github.com/vue-a11y/vue-announcer

a11y accessibility announcer hacktoberfest screen-readers vue vue-announcer vuejs

Last synced: 1 day ago
JSON representation

A simple way with Vue to announce any useful information for screen readers.

Host: GitHub
URL: https://github.com/vue-a11y/vue-announcer
Owner: vue-a11y
License: mit
Created: 2018-05-19T23:13:17.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2024-10-01T23:54:57.000Z (3 months ago)
Last Synced: 2024-10-30T03:42:41.415Z (about 2 months ago)
Topics: a11y, accessibility, announcer, hacktoberfest, screen-readers, vue, vue-announcer, vuejs
Language: JavaScript
Homepage:
Size: 2.23 MB
Stars: 233
Watchers: 10
Forks: 9
Open Issues: 25
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-a11y-vue - @vue-a11y/announcer - A simple way with Vue to announce any useful information for screen readers. (Components and plugins / Courses)
awesome-access - @vue-a11y/announcer - A simple way with Vue to announce any useful information for screen readers. (Components and plugins / Courses)

README

# [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer/)

---
🔥 HEADS UP! You are in the Vue 2 compatible branch, [check the "next" branch for Vue 3 support](https://github.com/vue-a11y/vue-announcer/tree/next).

---
## Introduction

Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers.

The [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer) (v2) provides an easy way to really tell what’s going on in your application to people using screen readers.

> For vue-announcer version 1.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/v1.0.6)

Inspired by others in the community like:
- [Example of how creating an accessible single-page application](https://haltersweb.github.io/Accessibility/spa.html)
- [Ember A11y community](https://github.com/ember-a11y/a11y-announcer)

## Links

- [Documentation](https://announcer.vue-a11y.com/)
- [Demos](https://vue-announcer-v2.surge.sh/demos/)

## Run the tests
```shell
git clone https://github.com/vue-a11y/vue-announcer.git vue-announcer

# Run plugin
cd vue-announcer
npm install
npm run dev

# Run example
cd examples
npm install
npm run dev
cd ..

# Run Cypress testing
npm run test
```

Or run Cypress on interactive mode
```shell
npm run test:open
```

It is a simple webpack template already installed and configured.
After the commands just access the http://localhost:8080/

## Contributing
- From typos in documentation to coding new features;
- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
- Fork repository, make changes and send a pull request;

**Thank you**