Character count

[chrimesdev]

What

Character count component to help users know how much text they can enter when there is a limit on the number of characters. This would usually be used with the Textarea component.

Similar to the Character count in the GOV.UK Design System and GOV.UK Frontend.

Why

We've had a number of teams using the Character count component from the GOV.UK Design System within their services.

Teams using this component will feedback in this issue with their examples, needs and findings for this component.

Services currently using a character count:

• NHS website ratings and reviews
• NHS e-Referral Service
• GPIT Futures Buying Catalogue

Anything else

To note from the GOV.UK Design system:

Work is needed to fix the issue with JAWS.

More user research is needed to find out:

• how to decide between a character limit and a word limit
• if highlighting characters over the limit in red would be helpful for users
• how the component might work with lower as well as upper limits
• if enabling a character count on text inputs would be useful
• If you’ve used this component, get in touch to share your user research findings.

Looking for further feedback within the NHS for this component so that we can explore adding it to the NHS.UK frontend library and NHS digital service manual. We should also provide any feedback received to GOVUK.

[Fenwick17]

We implemented this within the profiles redesign as per the govuk guidance and manually changed the CSS and JS to refer to nhsuk instead of govuk.
Only issue we currently have is new line on the backend counts as 2 characters due to \n whereas the frontend character counter will report it as 1 character. We are currently investigating a fix for this.

[NickColley]

Hey @Fenwick17,

Only issue we currently have is new line on the backend counts as 2 characters due to \n whereas the frontend character counter will report it as 1 character. We are currently investigating a fix for this.

There is an open issue on GOV.UK Frontend also considering issues into keeping them in sync: https://github.com/alphagov/govuk-frontend/issues/1104

I suspect trying to get them 1:1 might be not possible without a lot of expensive code for the user, but perhaps there's a solution where the clientside undercuts the server... not sure, will welcome your help here :)

[beccagorton182]

We have a character count component in use in the part of e-Referral Service that allows two members of staff to converse in regards to advice on what to do next for a patient. Standard chat set up, the messages can sometimes be pretty lengthy. Unfortunately don't have any explicit research about the component specifically, we were testing the screen as a whole.

[beccagorton182]

We added a research question to our most recent UR calls to investigate if users understood character count and/or found it useful for it to be displayed. All 4 users understood what the message was telling them, they all said they knew that they would only be able to enter the amount specified. All 4 users said this would be useful if the character count number was similar to how many characters they currently enter, as it would encourage them to be mindful of how much they enter into the text box.

[JwanKhalaf]

We in the NHS Pathways team also need this. We have a bunch of textarea inputs and all have character limits, but we currently have no way of showing that to the users and that's really bad.

The user types away not knowing they've passed the character limit and are only told so once they submit the form.

[devansXD]

We are also in process of testing a version of this on screening for things like comments, in order to manage what gets entered.

[JackReevies]

Is there a repo where these scripts are hosted? We've been using the minified version from assets.nhs.uk so far, but have had to tweak it due to a validation bug on page load. Would be nice to contribute if a central repo exists

[chrimesdev]

Hey @JackReevies you can find the JavaScript for all components in the NHS.UK frontend library repo, we provide the JavaScript via npm and pre-compiled files (see the README of that repo for instructions on how to install).

[andymantell]

I've ported the govuk-frontend one to nhsuk-frontend over here: https://github.com/nhsuk/nhsuk-frontend/pull/811

Would be good to get that in at some point so that people don't need to keep porting it themselves. We're using a home grown one at the moment on 111 online and I would like to replace it with this.

[sarawilcox]

We've agreed to publish character count component guidance, based on GOV.UK and marked experimental, to enable people to test it and comment. Working on this for a Feb 2023 release.

[sarawilcox]

We've had a question about timing of the status message which appears to update excessively when using a screen reader.

The team's audit reported that when: “a user types into a text box they are presented with the number of characters remaining. The user is presented with information after every character entry’“. The team is looking at increasing the timing and will see how it goes down in their accessibility audit.

Note: the guidance on character count says: “Always test your service without a character count first. Only use the character count component when there is a good reason for limiting the number of characters users can enter. For example, if there is:

• evidence that users are likely to enter more information than they need to
• a legal or technical reason that means an entry must be no more than a certain number of characters”

[andymantell]

@sarawilcox We actually had exactly the same thing with one participant using 111 online. However it appeared at the time to be because he was stopping to talk to us, and not typing "naturally". So we had made a note of it as something to keep an eye on.

It's interesting that another team has found the same though. It looks like there's someone else on the govuk-frontend side that has also reported similar:

https://github.com/alphagov/govuk-design-system-backlog/issues/67#issuecomment-1498696027

As mentioned a while back, because of the length of time it took us to get character count into nhsuk-frontend, we have ended up with an out of date implementation. If we decide to take action on this, I think we should update to the latest govuk-frontend version first, and then make the fix as there's been other improvements since as well.

[sarawilcox]

Someone has just pointed out to me that our character count changes to red and is bold if go above the character limit. Govuk only changes the colour which could be an accessibility issue for some.

[sarawilcox]

Published: https://service-manual.nhs.uk/design-system/components/character-count