Character counter: calm announcements — note

Live demo: Open the character-counter BEFORE/AFTER micro-demo

Common failure modes

Live-region spam: announcing “119 remaining… 118… 117…” while someone types.
Too urgent: using aria-live="assertive" for routine updates, interrupting speech output.
Unlabeled counter: a visible counter exists, but it’s not programmatically associated with the field (so it’s easy to miss).
Surprise truncation: text stops accepting input at the limit with no clear explanation or cue.

Use a real limit (maxlength for client-side) when possible, and also validate server-side.
Show a visible “N characters remaining” counter near the field.
Associate the counter with the field using aria-describedby.
Use a polite live region (example: role="status") for announcements.
Announce only at meaningful thresholds (example: 20 remaining, 10, 5, limit reached) and consider debouncing (300–500 ms).
Keep focus in the input; don’t move focus to the counter.