Accessible Character Counter Plugin For Text Field
File Size: | 7.98 KB |
---|---|
Views Total: | 1649 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The Accessible Character Counter jQuery plugin will add an SMS-style character counter to the text fields it's attached to. The character counter is WCAG2.0-compliant and contains WAI-ARIA attributes to assist users with screenreaders. It can also be internationalized and ships with default text in English and French.
How to use it:
1. Download and insert the JavaScript file accessible_character_countdown.js
after the latest jQuery JavaScript library.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="accessible_character_countdown.js"></script>
2. To use the plugin, apply it to an existing <textarea>
or <input type="text">
element. The default length is 160 characters. ARIA live notifications for screenreaders begin at "polite" when there are 50 characters remaining, and escalate to "assertive" with 20 characters remaining.
<label for="basic">Basic demo</label> <textarea id="basic"></textarea>
$( function(){ $( "#basic" ).accessibleCharCount() })
3. The plugin also supports the native maxlength
attribute:
<label for="input-field-demo">Input field demo</label> <input id="input-field-demo" maxlength="100">
$( function(){ $( "#input-field-demo" ).accessibleCharCount() })
4. Possible plugin options to custmize the character counter.
$( "Selector" ).accessibleCharCount({ // The maximum length of the element // Will be overridden by actual maxlength if present maxLength: 160, // The number of remaining characters that triggers the polite announcement triggerPolite: 50, // The number of remaining characters that triggers the assertive announcement triggerAssertive: 20, // How frequently to speak the whole message, as opposed to just the number // Set to 0 to turn off this feature everyNth: 5, // Prefix to apply to the ID, wrapperElem: { idPrefix: 'accessibleCharCount-wrapper-', attrs: { 'class': 'accessibleCharCount-wrapperElem' }, css: {} // Inline CSS }, beforeNumberElem: { attrs: { 'class': 'accessibleCharCount-beforeNumberElem' }, css: {}, html: {} }, // Prefix to apply to the ID numberElem: { idPrefix: 'accessibleCharCount-number-', attrs: { 'class': 'accessibleCharCount-numberElem' }, css: {} }, afterNumberElem: { attrs: { 'class': 'accessibleCharCount-afterNumberElem' }, css: {}, html: {} }, // Callback function when state changes e.g. from 'off' to 'polite' onStateChange: function () {}, // Callback function when the maximum length is reached atMaxLength: function () {} })
This awesome jQuery plugin is developed by jkshapiro. For more Advanced Usages, please check the demo page or visit the official website.