-
Notifications
You must be signed in to change notification settings - Fork 321
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Character count component reads out hints in an unintuitive order when initially focused #4517
Comments
As an initial, untested thought: Is this so that things are read out in that order as the user is typing into the textarea? In that context, hearing the updated character count would be of a higher priority than a repetition of the hint text, and the user is likely to want to hear that take place more frequently. I'm unsure if that's actually the case, as I believe typing announcements are actually spawned from a visually-hidden live region, but something to confirm. (Note: I'm also going to move this into the govuk-frontend repo, as this would appear to be a bug report for a Frontend component.) |
Uh oh! @stephenjmcneill1971, the image you shared is missing helpful alt text. Check your issue body. Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs. |
1 similar comment
This comment was marked as duplicate.
This comment was marked as duplicate.
No this is just what is on the page when rendered. Once you click into the textarea a screen reader will read out aria-describeBy values in sequence so in this case the "you have 2000 characters remaining" will be read before "You can add details that may not be included on the crime report". The screen reader should read out a page in the order that it's rendered. |
It looks like this is a limitation of the way the character count wraps the textarea component. The textarea component accept a A few options…
It'd be useful to understand how much of an issue this would cause for a screen reader user, and whether we think it fails any WCAG 2.2 success criteria – @selfthinker would you have any capacity to look at this? I'm not sure this is the simple fix we thought it was – it'd be good to understand how much of an issue this is but let's not spend too much energy trying to fix this in this cycle. |
The closest WCAG criterion here would be 1.3.2 Meaningful Sequence, which says:
I don't think it fails because, although the sequence might be different than expected, the meaning is not affected. Also, the text suffixed with "-info" that is read out is actually never visible on the screen. I cannot imagine that this will be an issue for anyone. To clarify, the way the issue has been presented is slightly wrong. h1 > label Here is what happens when using a screen reader: (I wasn't in the team when this component was developed, so don't have any context of its history. But I assume the text is duplicated to only alert screen readers when you pause to not get too verbose and disruptive but always update the visible text with every key stroke.) One thing I have noticed, though, is that both sentences are read out together without a pause. Like "you can enter up to 200 characters do not include personal or financial information like your National Insurance number or credit card details." |
Your assumption is absolutely correct. The component didn't work like this originally, we introduced this way of it working in early 2022 to fix various issues around screen reader announcements. #2577 |
When a the character count is rendered on a text areas the aria-describeBy attribute lists the ID (suffixed with "-info") of the character count text and the ID of the hint text of the textarea (suffixed with "-hint") in that order.
example:
aria-describedby="char-count-info q-textarea-hint"
This means that screen readers read the information referenced by those ID's in that order.
Character count info read 1st
Textarea hint read 2nd
What
Why
When using a screen reader the character count below the textarea is read out first before the hint/description text above the textarea. This is counter intuitive to the page it should be read in order of appearance to help those needing to use screen readers
The text was updated successfully, but these errors were encountered: