Not everyone uses a mouse to explore a website. Good HTML must also make sense through a keyboard or screen reader.
What You Need to Know
A remaining-character counter can help someone fit a short answer into a limit. Keep the actual maxlength rule in the control, and avoid announcing a changing count after every single keystroke.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<label for="feedback-text">Feedback (up to 200 characters)</label>
<textarea id="feedback-text" name="feedback" maxlength="200" aria-describedby="remaining-hint"></textarea>
<p id="remaining-hint" role="status">200 characters left</p>
<script>
const feedbackText = document.querySelector("#feedback-text");
const remainingHint = document.querySelector("#remaining-hint");
feedbackText.addEventListener("input", () => {
remainingHint.textContent = `${200 - feedbackText.value.length} characters left`;
});
</script>Let’s Read the Code
- <label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
- <textarea>: The textarea accepts several lines of text.
- for: For connects a label or output with a control by ID.
- id: An id uniquely identifies an element on this page.
What the example shows: The visible counter updates as people type and is linked to the field as help text.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
What does assistive technology receive? The example includes aria-describedby. These relationships can explain names, states, or descriptions when used correctly. They do not automatically move focus, listen for clicks, or create keyboard handling.
Your Turn
Change the limit to 100 and update both maxlength and the JavaScript calculation.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Avoid announcing every keystroke too aggressively; live-region behavior must be tested in screen readers.
Key Takeaways
- A remaining-character counter can help someone fit a short answer into a limit.
- <label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.