Character count component: consider updating to improve screen reader experience

[dav-idc]

Hey there, USWDS team! 👋 This is David, a senior accessibility specialist with the GOV.UK Design System.

We've recently updated our character count component HTML and JS to fix 4 accessibility-related bugs we found were happening with screen readers like JAWS, VoiceOver and NVDA.

We noticed that the US Web Design System uses a similar approach for your character count component, and screen readers run into some of the same bugs with your character count component as they did with ours.

We have a summary of the updates we've made, in case you'd like to take a look. It would be great if our solutions could also help improve the screen reader experience and accessibility of your character counter as well!
The main info is here: alphagov/govuk-design-system-backlog#67 (comment)

A huge shoutout to @querkmachine for a lot of amazing work on the front-end development for this update!

Is your feature request related to a problem? Please describe.

The current character count component on the USWDS likely has a few bugs which affect screen readers:

Announcing twice

alphagov/govuk-frontend#2485
The character count message was being announced twice by screen readers, for every keystroke.

Announcing hint text with the character count

alphagov/govuk-frontend#2486
Screen readers would read out the entire hint text each time the character count was announced, despite there being no changes to the hint text.

Announcing below the threshold

alphagov/govuk-frontend#2487
Character count messages were being announced by screen readers, even when the count was below a set threshold.

Announcing old queued-up counts

alphagov/govuk-frontend#2488
Multiple count messages would get 'queued-up' and announced at the same time when the user stopped typing into the character count. Some of these messages would be outdated, and wouldn’t reflect the latest 'count'.

Describe the solution you'd like

Here’s the Github pull request our developer @querkmachine put together to solve the issues: alphagov/govuk-frontend#2577

Here's the guidance page for the updated version: https://design-system.service.gov.uk/components/character-count/

Describe alternatives you've considered

We worked through several iterations, twists and turns to get to this final update -- let us know if you'd like to know more!

Additional context

Some modifications may need to be made to match your character count component's text and features, but the main changes to the JavaScript and modifications to aria-describedby and aria-live will likely be very applicable to your version of the component.

Much love from your design system pals across the pond! 🇬🇧

[amyleadem]

@davidc-gds Thank you for sharing your team's hard work! We will review your updates to see how we can incorporate.

[dav-idc]

Sounds great @amyleadem! Glad we get the chance to share ✨

[mahoneycm]

I was able to confirm these issues are present on USWDS using JAWS and NVDA!