Accessible Character Counter Plugin For Text Field

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.