How do I make a word counter accessible?

When users have enough information at the right time, text and word counters can be a helpful and accessible addition to long text input fields.

One important step is to write the text of the counter so the meaning is clear. Just numbers may not be immediately understandable to all users, so include brief, descriptive text that explains the information. For example: “Word Count: 0/500”.

The counter should also be programmatically related to the input it describes so a wider range of users can access the information when they reach the comment field. One strategy is to give the counter's container a unique ID. On the input element, reference that ID using the aria-describedby attribute.

Since the counter automatically updates to display a current status visually, your code should also signal assistive technology to present the information non visually without being overly disruptive. One option is to code the counter as a polite alert using role=”status” or aria-live=”polite”. A polite alert instructs assistive technology to wait and announce the information when there is a natural pause, such as when the user stops typing.

Depending on the text counter’s design, function, and code, there may be other accessibility considerations as well. For step by step instructions on reviewing accessibility for many types of interactive components, explore the Guided Manual WCAG Audit Tool from Accessible Web.