https://github.com/rikschennink/short-and-sweet

📟 Accessible character counter for input elements
https://github.com/rikschennink/short-and-sweet

accessible character-counter input javascript screenreader textarea

Last synced: 11 days ago
JSON representation

📟 Accessible character counter for input elements

• Host: GitHub
• URL: https://github.com/rikschennink/short-and-sweet
• Owner: rikschennink
• License: mit
• Created: 2018-05-25T06:20:07.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T02:41:11.000Z (over 1 year ago)
• Last Synced: 2024-10-14T07:49:09.044Z (30 days ago)
• Topics: accessible, character-counter, input, javascript, screenreader, textarea
• Language: JavaScript
• Homepage:
• Size: 266 KB
• Stars: 276
• Watchers: 5
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Short and Sweet, Accessible Character Counter

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/rikschennink/short-and-sweet/blob/gh-pages/LICENSE)

[![npm version](https://badge.fury.io/js/short-and-sweet.svg)](https://badge.fury.io/js/short-and-sweet)

Tested with VoiceOver (Safari 11) & NVDA (FF 60)

-   Tells user the amount of space left when the field is focussed

-   Updates the user periodically while typing

Play around with the demo:

https://codepen.io/rikschennink/pen/LmoJYY

View a video of Short and Sweet with VoiceOver:

http://www.youtube.com/watch?v=3NDCEvHHaCY (sound is off)

---

[](https://www.buymeacoffee.com/rikschennink/)

[Buy me a Coffee](https://www.buymeacoffee.com/rikschennink/) / [Dev updates on Twitter](https://twitter.com/rikschennink/)

---

## Features

-   No dependencies

-   Easy setup

-   Accessible

## Installation

Install from npm:

```

npm install short-and-sweet --save

```

Or download `dist/short-and-sweet.min.js` and include the script on your page like shown below.

## Usage

Run short-and-sweet like shown below and pass an element reference or a querySelector. For best performance include the script just before the closing `