Character count

[Robbert]

Gemeente Utrecht heeft zo'n karakter-limiet component in het contact-formulier:

De component is nog niet accessible gemaakt met ARIA, bijvoorbeeld middels aria-live of aria-describedby. De maxlength is wel aangegeven op het textarea element.

<div id="inputfield_container_vraag">
  <textarea id="vraag" maxlength="2000" aria-required="true" aria-invalid="false">x</textarea>
  <div class="textarea_charactercount" id="vraag_charactercountinfo">Karakters: 42 (maximaal 2000)</div>
</div>

[julezrulez]

My thoughts:

• Screenreader should read out the (changed) number of characters when the user stops of pauses typing. (Just imagine when you can hear that you are typing a word and somebody else is shouting a complete different word in your ear.) (WCAG)
• When the maximum characters is reached, an alarm should go off that maximum is reached. At the moment at the Utrecht website when you are blind you could keep typing after the maximum number of characters without knowing these characters are not shown in the text field. But this is "normal" behaviour of the browser and can be made more accessible with soms JavaScript and ARIA.
• When maximum is reached It should be clear that the no more characters are accepted. And of course a suggestion what to do now: for instance remove unnecessary words or split the message in 2 messages.
• After minimally conforming to WCAG test with "meerdere ervaringsdeskundigen" (my English is so bad). 1 or 2 people is not enough. Every person has it's own preferences.

[Yolijn]

@Robbert We're wondering if the name of character-limit-counter could be more specific to where it's used. For example form-field-character-count in line with form-field-description and form-field-error-message or as in the example above textarea-character-count which would introduce input specific atomic components...

[Yolijn]

Removed from index until name is determined

[Robbert]

Naar aanleiding van nl-design-system/kernteam#600

Voor naam "Character limit counter" overwogen. Limit is niet altijd van toepassing, daarom misschien niet ideaal om op te nemen. Counter is een "actief" ding, count is "data". De component heeft zelf geen logica, hij geeft alleen de uitkomst van een externe "counter" weer. Tenminste, for now. Misschien gaat de web component dat wel doen.

Naam "Maximum length status" overwogen (Robbert natuurlijk 🤦‍♂️) — van maxLength in HTML. Status van role="status" in de form field. Maar status is een toepassing van de character count, dat hoeft niet per se altijd zo te zijn. In theorie kun je het gebruiken in een formulier dat je wettelijk gezien in invalide staat mag submitten, dan zou je de character count in de summary list kunnen weergeven als waarschuwing.

"Character count" is lekker kort, en lijkt op "Word count" wat in Word processing software vaak voorkomt.