Character count

[govuk-design-system]

Use this issue to discuss the character count component.

[fofr]

We've been trialling the word count aspect of this pattern on a DfE service for managing teacher training courses.

In user research we’ve found that the word counts are clear and obvious and that users respond to them well, editing down their text to keep only what's most important.

Example screen from the prototype:

[tombye]

@fofr does your implementation include messaging for when users go over the number of words?

Curious because I've had that in previous projects but not sure it was ever validated as a need.

[fofr]

@tombye Yes, we've used the messaging that was in the original repo by @alex-ju. The messaging has worked well when users have pasted in text that was too long from another document.

[timpaul]

We're thinking about the possible error states for this component. In particular, how the 'You have 26 words too many' error should be represented in the error summary component that can appear at the top of a page.

Just repeating that message wouldn't give context about which form field the error related to. As the example above from @fofr shows it's quite possible to have multiple character count components on a single screen - so, should the error be adjusted to include information about the specific field. For example "Interview process summary has too many words".

However, if we only adjusted the error message in the summary then this would go against our advice to keep them the same.

@stevenaproctor - do you have a take on this?

[ghost]

@timpaul You could use the standard too long error message ‘[whatever it is] must be {x} [characters or words] or less’. Or, if it is available, you could use the number of characters you are over in the error message ‘[whatever it is] has {x} [characters or words] too many’.

For the example, this would give you the errors:

• Interview process must be 250 words or less
• Interview process has 26 words too many

What do you think?

[nubz]

We have a need for a character count component in one of our services at HMRC. I noticed the github readme does not recommend using this component as-is in production - does anyone know what the blocker to recommendation is?

[fofr]

Something new that we've observed in user research:

We asked users to prepare content before our service was available. We gave them word count limits. We've found that users wrote their content in Word and used Word's word count feature to check the length. When they’ve then copied that content into our tool there's been a disparity between the two counts: ours is a little stricter and users have had to edit their content to reduce by 1 or 2 words. This has caused frustration, especially when the previous word document has been reviewed/approved.

Presumably the logic for word counts in Word is a little more complex than the regex used in https://github.com/alphagov/ds-character-count. I doubt that there is consistent logic between different word processors, I like the simplicity of the regex used. (It's complicated a little by our use of markdown, where * list item counts as three words while if you type that in Word the asterisk gets converted to a bullet point and isn't counted.)

We still need to investigate the cause more thoroughly, but wanted to share this gotcha first.

Edit: When we implemented server side word counts, we reused that regex so that frontend and backend would be consistent.

[alex-ju]

valuable found @fofr. thanks a lot for sharing it with us.

[hooperstu]

Has anybody tested this with screen readers yet?

[alex-ju]

@hooperstu it was tested with screen readers and had a few user research rounds: https://github.com/alphagov/govuk-design-system/wiki/Character-count-testing-and-user-research

The only issue I'm aware of is with JAWS who repeats field's label every time the count message is played.

[ghost]

@alex-ju I tested it today with NVDA and Firefox and the remaining characters information was read out twice, which I did not expect.

For example, when I entered the box and typed 'a' I heard 'You have 199 characters remaining' twice. When I deleted the 'a', I heard 'You have 200 characters remaining' twice as well.

Any ideas?

[alex-ju]

@stevenaproctor: thanks for reporting it. The prototype doesn't seem to have this issue. I will try to investigate what's causing the issue and get back to you.

[alex-ju]

Hi @stevenaproctor, I did a bit of investigation around the NVDA issue, which seemed to be caused by the polling events. Updated the code in the Design System branch and tested again on NVDA. Please let me know if now is working as expected and thanks again for reporting it.

[ghost]

@alex-ju It is working as expected, thanks for taking a look.

If JavaScript is not available, is it possible to show "You have 200 characters remaining" rather than nothing?

[alex-ju]

@stevenaproctor having a default message for non-JS experience sounds like a good idea; I'll look into it. But in this case the message should maybe mention the limit instead of the remaining characters

[stephenjmcneill1971]

I was wondering if you can help. when using the component below.

Character count – GOV.UK Design System (design-system.service.gov.uk)

A new line is only counted as one character. However when it is sent to the backend it is counted as two character CRLF instead of LF. This means the character count in the front end mis-informs the user because it says the user is within the max length when in fact they are over due to an extra character for every new line not being counted. Is there a way round this so front and back end correlate.

I saw this has been raised before but I see no resolution.
Character count · Issue alphagov/govuk-design-system-backlog#172 · nhsuk/nhsuk-service-manual-community-backlog (github.com)

Regards
Stephen Joseph McNeill

[dav-idc]

I was wondering if you can help. when using the component below.

Character count – GOV.UK Design System (design-system.service.gov.uk)

A new line is only counted as one character. However when it is sent to the backend it is counted as two character CRLF instead of LF. This means the character count in the front end mis-informs the user because it says the user is within the max length when in fact they are over due to an extra character for every new line not being counted. Is there a way round this so front and back end correlate.

I saw this has been raised before but I see no resolution. Character count · Issue alphagov/govuk-design-system-backlog#172 · nhsuk/nhsuk-service-manual-community-backlog (github.com)

Regards Stephen Joseph McNeill

Hi @stephenjmcneill1971, thanks for flagging this! I don't have a quick answer for this, but it does look like this other ticket is also related to the bug you're seeing: alphagov/govuk-frontend#1104

It might be worth it to comment there around the concern of /n being considered 2 characters in the backend, but only being valued as 1 in the frontend.

[querkmachine]

Hi @stephenjmcneill1971, I'm currently writing a response to your email now. I'll copy over any relevant bits here when I'm done.

[stephenjmcneill1971]

Hi David Thanks for updating the other ticket with my comment. Regards Stephen From: David C ***@***.***> Sent: 10 January 2023 15:15 To: alphagov/govuk-design-system-backlog ***@***.***> Cc: Stephen McNeill ***@***.***>; Mention ***@***.***> Subject: Re: [alphagov/govuk-design-system-backlog] Character count (#67) I was wondering if you can help. when using the component below. Character count – GOV.UK Design System (design-system.service.gov.uk)<https://design-system.service.gov.uk/components/character-count/> A new line is only counted as one character. However when it is sent to the backend it is counted as two character CRLF instead of LF. This means the character count in the front end mis-informs the user because it says the user is within the max length when in fact they are over due to an extra character for every new line not being counted. Is there a way round this so front and back end correlate. I saw this has been raised before but I see no resolution. Character count · Issue alphagov/govuk-design-system-backlog#172 · nhsuk/nhsuk-service-manual-community-backlog (github.com)<nhsuk/nhsuk-service-manual-community-backlog#172> Regards Stephen Joseph McNeill Hi @stephenjmcneill1971<https://github.com/stephenjmcneill1971>, thanks for flagging this! I don't have a quick answer for this, but it does look like this other ticket is also related to the bug you're seeing: alphagov/govuk-frontend#1104<alphagov/govuk-frontend#1104> It might be worth it to comment there around the concern of /n being considered 2 characters in the backend, but only being valued as 1 in the frontend. — Reply to this email directly, view it on GitHub<#5997 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A4SNKXBNU5PTMC4HOB22SH3WRV4HVANCNFSM4ELSDXBA>. You are receiving this because you were mentioned.Message ID: ***@***.***> *************************************************************************** CICA LEGAL NOTICE This email and any files transmitted with it are private and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please return it to the address it came from telling them it is not for you and then delete it from your system. As part of conducting its business, the Criminal Injuries Compensation Authority may monitor and record incoming and outgoing emails and their content. This email message has been swept for computer viruses. ***************************************************************************

[querkmachine]

This mismatch is, basically, the result of a difference in the specifications for HTML and HTTP. 
 
In the current specification for HTML, new lines within a textarea are represented by a single code point, LF (line feed), aka POSIX/Unix style, \n, or U+000A.
 
However, in the specification for HTTP, new lines are represented as two code points, CR (carriage return) and LF (line feed), aka Windows style, \r\n, or U+000D U+000A.
 
This is why one code point on the front-end becomes two on the back-end. It's basically 'transformed' in the HTTP transmission process.

As our component only counts code points, and HTML/JS will only ever see one code point, we will always have a mismatch between what we have and what the backend actually receives when it comes to new lines.

I don't think the solution is to change the character count component, however.

• We currently, strictly, only count code points. As much as this might seem weird in some circumstances (e.g. emoji), it's simple, predictable, consistent, and technically correct (the best kind of correct).
• Having a new line equal 1 character aligns better to a user's mental model than it equalling 2 characters.
• Ideally we want to move to counting graphemes, rather than code points, at some point in the future. New lines aren't considered a character at all when counting graphemes, so if anything we want to move towards new lines equalling 0 characters, rather than equalling 2.
• Most modern word processors already count using graphemes and don't include new lines when reporting character counts. Ideally we want to align our behaviour as closely as possible to word processor software to avoid unpleasant surprises if a user is copying from a word processor, only to find their perfect 300 character response is suddenly 306 characters.

This does, unfortunately, leave the onus of how to validate all of this on the backend.

As an interim solution for new lines specifically, it might be possible to detect and remove the carriage return characters from the received value before performing length validation. This would no longer suffice if we move to grapheme-based counting, however.

[frankieroberto]

Our service has a "personal statement" section where candidates have to write a longish (up to 600 words) statement about why they'd make a good teacher.

We use the Character count component for this (but set to a word limit not a character limit).

However we are noticing that quite a lot of users still submit the form with the personal statement over the word limit.

Our assumptions are that one (or both) or the following might be the cause:

• they didn't spot the as-you-type word count – maybe because they pasted the content from elsewhere?
• they know it's over the word limit but want to save it and edit it down later

We’re currently exploring ways to potentially mitigate this.

[stevenjmesser]

Sounds good, @frankieroberto, let us know what you find!

[andythenorth]

Hi (also hi @stevenjmesser ) we're not Design System users here at Delib, but we use it as reference for Citizen Space UI.

We have recently run into the same issues with character counts, and have had a crash course in graphemes. Watching with interest.

[L-e-a-n-n-e-H]

We’ve come across an issue whereby when someone types into the text area box if there is a delay of about 1 second before they type another character in, the screen reader will read out the remaining character count, this continues to happen for the entire sentence they are writing.
This can be a bit excessive for people who do not type or can type quickly and use a screen reader. Has anyone set the character count to more than 1 second, is this achievable? Or does anyone know of an optimal length of time before the character count starts to read out on a screen reader? Thank you :)

[dav-idc]

Hi @L-e-a-n-n-e-H, thanks for providing this feedback! I have a couple clarifying questions on the specific scenario, if you're able to provide more info. It's alright if you don't have answers for all the questions though. 👍

• Which screen reader was in use, with which browser, and on what operating system / device?
• Do you know approximately how fast the person was typing when the encountered the repeated character count announcements? The 1 second delay timer was based on the assumption that in a normal typing scenario, the typing speed would be greater than 60 characters per *minute (the general rule-of-thumb average typing speed is around 190 characters per *minute, more than 3 times quicker).
• Do you know what version of GOV.UK Frontend is being used? The screen reader announcements were much more intrusive and frequent before we made the updates. The updated character count component was released in version 4.1.0 in May 2022.
• Is the person pausing after typing each character, or is the issue that they're typing long strings of characters and the screen reader is announcing the character count message while they're still typing at a normal pace?

[L-e-a-n-n-e-H]

Hi @davidc-gds , many thanks for the quick reply, much appreciated!

• We had an accessibility audit that picked it up on the web browser of the NHS App (desktop) they were using a Mac, with NVDA on Firefox.
  I’ve tried with the Chrome extension and it does the same.

• And relates to the text box prior to booking a GP appointment, in a texarea box that is mandatory.

• The person would have long pauses, and is most likely with someone who needs to take their time; has dexterity issues, unable to touch type, needs longer processing time to move between letters/characters and articulate what they want to get across (we're awaiting data/analytics to probe further).

In the meantime we were looking at what would be a good 'pause' length from the current 1000ms (1 second) and if anyone had any suggestions for this?

Thank you!

[CharlotteDowns]

We ran an external accessibility audit for some of the components and patterns in GOV.UK Frontend in May 2023. In that audit, we included an example of the Character count component. We’re adding results from that audit here so that we can:

• document, discuss and address the findings
• inform future contributors of the findings

One usability accessibility issue raised

The hidden character count only pops up when you approach threshold is strange usability-wise.

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.

More detail in this issue:

• #3689

[joelanman]

Just to note the threshold is an optional feature. We designed it with the aim that most fields would be large enough to accept most input, and not make the user have to think about the character/word limit. In the minority case where users might hit the limit, the threshold option allows those users to know they are near the limit.

[ijfessey]

Hi team, We are potentially going to use this component in the self-assesment application and we have it working but the question is can the 'you have n characters remaining' be overridden as we need to support Welsh language ?

[RichardBradley]

@ijfessey -- here's a copy of our Welsh localisation wrapper around this component https://gist.github.com/RichardBradley/70dfa1cae92ff3d2c7aa9377eb6d4d8e

I think GDS ought to add this as an enhancement, many gov projects require Welsh. If I get some time, I'll raise a PR against https://github.com/alphagov/govuk-frontend based on the above