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
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
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.
Free Tools to Continue Learning
Accessible Web RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.
How should I highlight important text?
What do I do when an alt text field is too small for my description?
- alternative text
How can I make link text stand out?
- link text
How detailed should image alt text be?
- alt text
- best practices