The Accessible Character Counter Plugin Demos

Examples

Basic case

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.

Example


HTML

<label for="basic-demo">Basic demo</label><br>
<textarea id="basic-demo" rows="5" cols="45"></textarea>

Javascript

$( function(){
  $( "#basic-demo" ).accessibleCharCount()
})

Input field with maxlength

If the element already has a maxlength, the plugin won't override it.

Example


HTML

<label for="input-field-demo">Input field demo</label><br>
<input id="input-field-demo" maxlength="100">

Javascript

$( function(){
  $( "#input-field-demo" ).accessibleCharCount()
})

Properties

In this demo, we demonstrate how you can override the default properties. (The buttons below change the "lang" attribute of the document for demonstration purposes.)

Example

Set page language:


HTML

<label for="properties-demo">Properties demo</label><br>
<textarea id="properties-demo" rows="5" cols="45"></textarea>

Javascript

$( function(){
  $( "#properties-demo" ).accessibleCharCount({
    maxLength: 30,
    triggerPolite: 10,
    triggerAssertive: 5,
    everyNth: 0,
    beforeNumberElem: {
      html: { 'en': 'You have '
            , 'ru': 'Осталось '
            }
    },
    afterNumberElem: {
      html: { 'ru': [ ' символов'
                    , ' символ'
                    , ' символа'
                    , ' символа'
                    , ' символа'
                    , ' символов'
                    ]
            }
    }
  })
})

Custom callback functions

Example


HTML

<label for="custom-callback-demo">Custom callback demo</label><br>
<textarea id="custom-callback-demo rows="5" cols="45""></textarea>

Javascript

$( "#custom-callback-demo" ).accessibleCharCount({
  afterUpdate: function( remaining ) {
    $(this).css( "background-color", "rgb(255,255," + ( remaining + 100 ) + ")" )
  },
  atMaxLength: function() {
    alert( "The element with ID " + this.id + " has reached its maximum length. Further input will be discarded." )
  }
})

Configuration

$.fn.accessibleCharCount.defaults = { maxLength: 160
// The maximum length of the element
// Will be overridden by actual maxlength if present
                        , triggerPolite: 50
// The number of remaining characters that triggers the polite announcement
                        , triggerAssertive: 20
// The number of remaining characters that triggers the assertive announcement
                        , everyNth: 5
// How frequently to speak the whole message, as opposed to just the number
// Set to 0 to turn off this feature
                        , wrapperElem: { idPrefix: 'accessibleCharCount-wrapper-'
// Prefix to apply to the ID
                                      , attrs: { 'class': 'accessibleCharCount-wrapperElem' }
                                      , css: {}
// Inline CSS
                                      }
                        , beforeNumberElem: { attrs: { 'class': 'accessibleCharCount-beforeNumberElem' }
                                            , css: {}
                                            , html: {}
// Contents, by language and number
// Defaults are provided in code
                                            }
                        , numberElem: { idPrefix: 'accessibleCharCount-number-'
// Prefix to apply to the ID
                                      , attrs: { 'class': 'accessibleCharCount-numberElem' }
                                      , css: {}
                                      }
                        , afterNumberElem: { attrs: { 'class': 'accessibleCharCount-afterNumberElem' }
                                          , css: {}
                                          , html: {}
                                          }
                        , onStateChange: function () {}
// Callback function when state changes e.g. from 'off' to 'polite'
                        , atMaxLength: function () {}
// Callback function when the maximum length is reached
                        }

Alternatives

If you add the "maxlength" attribute, then standards-compliant browsers will discard any characters you attempt to enter beyond that point, but this doesn't help people using screenreaders or text-to-speech (TTS) software. Try it here:

Example


HTML

<label for="no-char-counter">No character counter</label><br>
<textarea id="no-char-counter" rows="5" cols="45" maxlength="160"></textarea>

Simple character counter

One solution is to add some Javascript to show a character counter. However, this can lead to quite chatty results. Try this out, and make sure your TTS/screenreader is on.

Example


160 characters remaining

HTML

<label for="simple-char-counter">Simple character counter</label><br>
<textarea id="simple-char-counter" rows="5" cols="45" maxlength="160"></textarea>
<div id="chars-remaining" role="status">
  <span id="count">160</span> characters remaining
</div>

Javascript

var $messageArea = document.getElementById('simple-char-counter');
var $count = document.getElementById('count');

$messageArea.onkeyup = function () {
  var messageText = $messageArea.value;
  var messageLength = messageText.length;
  var remaining = 160 - messageLength;
  $count.innerHTML = remaining;
}