Lesson 8 of 8
Character counter
- 12 min
- 5 checks
- 3 hints
- Go to task
Goal
Show the limit before the user hits it
Explanation
A field with a maximum length should show that limit before the user reaches it, instead of suddenly refusing to take what they type with no explanation.
The maxlength attribute makes the browser itself enforce the limit, even on paste, so you don't need code to cut off the extra text. You calculate the counter on every input event with maxLength - value.length.
For people who can't see the counter, add aria-live="polite". It makes the screen reader announce the change after it finishes what it's saying, not in the middle of it the way assertive does. This live region has to be on the page from the start, because if it's added together with its text at the same moment, it most likely won't be announced.
Your task
Set the maximum length of #bio to 140 characters, write the number of characters left in #count on load and with every keystroke, make the counter a polite live region, then link the field to it with aria-describedby.
Checks
5 checks- The browser enforces a 140-character limit
- The counter shows before any typing
- Typing lowers the counter
- The counter is a polite live region
- The field is linked to the counter