Hub: index · watch · videos

Cycles theme: DEFAULT, COLOR SAFE, HIGH CONTRAST.

Character counter (maxlength): calm announcements — demo

This micro-demo compares a noisy character counter (BEFORE) to a calmer pattern (AFTER) that announces only at meaningful thresholds.

Note: short note / checklist

BEFORE spammy live region

Type in the box. The counter is aria-live="assertive" and updates on every keystroke. Screen readers can get interrupted repeatedly.

Chat Compose
Max 120 characters. (BEFORE: announces remaining on every key.)
120 characters remaining
Try: type quickly; then press Tab to Send.

AFTER threshold announcements

Pattern: keep the counter visible, associate it via aria-describedby, and announce only when someone crosses a small set of thresholds (e.g., “20 remaining”, “10 remaining”, “limit reached”).

Chat Compose
Max 120 characters. Counter announces only at thresholds.
120 characters remaining
Try: type until 20 remaining; notice announcements are brief and rare.