Short and Sweet, Accessible Character Counter

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)

---

Buy me a Coffee / Dev updates on Twitter

---

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 </body> element.

<textarea maxlength="200"></textarea>

<script src="short-and-sweet.min.js"></script>
<script>
    shortAndSweet('textarea', {
        counterClassName: 'my-short-and-sweet-counter',
    });
</script>

The following options are available to pass to the shortAndSweet method.

Option	Default	Description
counterClassName	'short-and-sweet-counter'	The classname of the counter element
counterLabel	'{remaining} characters left'	The text shown in the counter element, placeholders available are {remaining}, {maxlength}, {length}
assistDelay	2000	The time in milliseconds the assist waits before updating the user with the screenreader user with the current count
append	(el, counter) => { el.parentNode.appendChild(counter); }	The method used to append the element to the DOM

Tested

• Modern browsers
• VoiceOver + Safari
• NVDA + Firefox
• IE 10+

Versioning

Versioning follows Semver.

License

MIT