Skip to content
πŸ“Ÿ Accessible character counter for input elements
Branch: master
Clone or download
Latest commit aea4318 May 25, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist add options to docs May 25, 2018
src fix text, update to version 1 May 25, 2018
.babelrc initial commit May 25, 2018
.gitattributes initial commit May 25, 2018
.gitignore initial commit May 25, 2018
.npmignore initial commit May 25, 2018
LICENSE initial commit May 25, 2018 Update May 25, 2018
gulpfile.babel.js initial commit May 25, 2018
package.json add options to docs May 25, 2018

Short and Sweet, Accessible Character Counter

License: MIT npm version Donate with PayPal

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

View a video of Short and Sweet with VoiceOver (sound is off)


  • No dependencies
  • Easy setup
  • Accessible

Time to learn ES6?

Short and Sweet is written in ES6.

If you want to learn how to write modern ES6 JavaScript as well, I highly recommend ES6 for Everyone by Wes Bos.


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.


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>
shortAndSweet('textarea', {
  counterClassName: 'my-short-and-sweet-counter'

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


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


Versioning follows Semver.



You can’t perform that action at this time.