Character count is hidden until you approach a character threshold

[CharlotteDowns]

This issue is from May 2023 external accessibility audit report.

Usability issue

Issue ID:
DAC_Usability_Character_Count_01

URLs:
https://govuk-frontend-pr-3503.herokuapp.com/full-page-examples/feedback

Screen shots

The character count for the text area ‘What were you trying to do?’ does not appear until the user reaches fifty characters. It can be beneficial to display this from the start and the max characters to allow users to understand this restriction before entering data.
This means that when the user reaches 50 characters, and are made aware, they then do not have to amend what they have already entered in order to not exceed the 100 limit.

Current code ref(s)

#main-content > div > div > form > div:nth-child(4) > div > div.govuk-character-count__sr-status.govuk-visually-hidden

Screen reader comments

“When interacting with the ‘What were you trying to do’ input field I found with all screen reader software that a message advising me of a character limit was available after the input field. When browsing in context with the arrow keys for desktop screen reader software or when swiping to the right with one finger for mobile software I did not locate the limit until after I had moved past the input field.

This became problematic as when I began to enter characters into the input field the remaining number of characters did not announce until after I had reached fifty or more characters. In a non-testing environment, I would likely not have been aware of the character limit until I had typed this number of characters which may have led to me needing to re-evaluate what I wanted to enter.

This functionality was not present for the ‘Please provide details of your question, problem or feedback’ input field as the character count began announcing as soon as I had entered a character. I was therefore immediately aware of a character limit and how many characters I had remaining.

I personally found the second character count much easier to use as I was immediately aware that a character limit was available.

Please do note that when browsing out of context with methods such as the ‘Tab’ key for desktop software and the forms rotor with VoiceOver I was clearly able to locate the additional hint information.”

Solution

Consider constantly displaying the character count for all users. This will allow for all users to clearly understand the limits and pre-emptively decide how they wish to enter and phrase their data entry.

[querkmachine]

The threshold function is an opt-in function of the character count, intended for textareas where a limit exists but the user is unlikely to encounter it in typical use.

For example, a textarea on a contact form may have a technical hard limit of 32,768 characters (8^5 bytes) in their database architecture. A user is very unlikely to type that much, but on the off-chance they do, the threshold setting allows a team to warn them only when they start getting near to it.

In this case, the could be considered a failure of the example (the functionality was used in an inappropriate way), but an alternative could be to remove the threshold function entirely and have it so that a character count is always present, perhaps with guidance that fields with extremely large limits no longer use a count and rely on regular form validation in situations where the user goes over the limit.

[querkmachine]

Comment from @davidc-gds on Slack, copied here for posterity:

for this one I was thinking we can change our example to have a threshold of 100+ characters, and pre-fill say, 799 characters, with a threshold of 800. That’ll show people a better intended use case, where the character limit is so high that most users won’t encounter it.

[querkmachine]

Guidance has been updated to clarify the purpose and function of the threshold option in #2975.