JAWS with Chrome links visually hidden text are read out without spaces #51
Labels
Comments
hannalaakso
added a commit
to alphagov/finder-frontend
that referenced
this issue
Mar 13, 2023
On the GOV.UK search results page, the h1 heading contains the word "Search" and the visually hidden text, "all content" which should be available to screen reader users. However, JAWS and NVDA on Chrome, Edge and IE11 are not announcing the space before "all content". This came up in user research, with the user saying that it was challenging the identify what was being announced with the space omitted. This is also a known issue which has previously been reported to JAWS: alphagov/reported-bugs#51 I found out in my investigation that in fact there is a rationale to how JAWS and NVDA omit the space: the `govuk-visually-hidden` class uses `position: absolute` as a fallback for older browsers that don't support `clip-path` for hiding content. When the visually hidden element is taken out of the page flow like this, the space before the text gets removed as it's no longer relative to the text preceeding as is expected of absolute positioning. This can be seen both visually in modern browsers when `clip-path` is removed, and by inspecting the accessibility tree: with `position: absolute`, the value of the visually hidden content in the accessibility tree is "all content" (without the space), and without it it's " all content". So in fact JAWS and NVDA are announcing the heading correctly in the sense that the space has been removed, but it's not desirable behaviour. Use `opacity: 0` instead of the `govuk-visually-hidden` to visually hide the content - this tests well in all screen readers and browsers, with the text visually hidden but accessible to assistive technologies. Make it into an app specific class for now. We can add it to the gem sometime later by using the search results heading as evidence that it works for users with no issues reported. We could then also consider contributing it to the GOV.UK Design System as a fix for the long standing issue there (I haven't focused on testing the visually hidden headings used in the Check your answers pattern but I've got the impression that `govuk-visually-hidden` works slightly better inside interactive elements like the links in that pattern). An alternative fix would have been to replicate the styles of `govuk-visually-hidden` in this new app class and just replacie `position: absolute` with `opacity: 0;`. This also tested well and would be a slightly safer option in the sense that all the functionality of the existing visually hidden class would be retained, apart from the legacy fallback of `position: absolute`. However if we adopted `opacity: 0` as the new way of visually hiding content there wouldn't seem to be any need for retaining the existing `govuk-visually-hidden` styles, so it seems to make sense to just launch `opacity: 0` on its own since this is only one instance to start with and there is a very low risk of introducing any serious bug as a result (the worst would be that the visually hidden text is either visible or not). Yet another alternative, also [explored on the original ticket](alphagov/govuk-frontend#1643 (comment)) would be to use a non-breaking space ` `. This also tested well, but this wouldn't fix the underlying problem but would be more of a manual fix which might also get removed by mistake by the next person working on the piece of code.
hannalaakso
added a commit
to alphagov/finder-frontend
that referenced
this issue
Mar 13, 2023
On the GOV.UK search results page, the h1 heading contains the word "Search" and the visually hidden text, "all content" which should be available to screen reader users. However, JAWS and NVDA on Chrome, Edge and IE11 are not announcing the space before "all content". This came up in user research, with the user saying that it was challenging the identify what was being announced with the space omitted. This is also a known issue which has previously been reported to JAWS: alphagov/reported-bugs#51 I found out in my investigation that in fact there is a rationale to how JAWS and NVDA omit the space: the `govuk-visually-hidden` class uses `position: absolute` as a fallback for older browsers that don't support `clip-path` for hiding content. When the visually hidden element is taken out of the page flow like this, the space before the text gets removed as it's no longer relative to the text preceeding as is expected of absolute positioning. This can be seen both visually in modern browsers when `clip-path` is removed, and by inspecting the accessibility tree: with `position: absolute`, the value of the visually hidden content in the accessibility tree is "all content" (without the space), and without it it's " all content". So in fact JAWS and NVDA are announcing the heading correctly in the sense that the space has been removed, but it's not desirable behaviour. Use `opacity: 0` instead of the `govuk-visually-hidden` to visually hide the content - this tests well in all screen readers and browsers, with the text visually hidden but accessible to assistive technologies. Make it into an app specific class for now. We can add it to the gem sometime later by using the search results heading as evidence that it works for users with no issues reported. We could then also consider contributing it to the GOV.UK Design System as a fix for the long standing issue there (I haven't focused on testing the visually hidden headings used in the Check your answers pattern but I've got the impression that `govuk-visually-hidden` works slightly better inside interactive elements like the links in that pattern). An alternative fix would have been to replicate the styles of `govuk-visually-hidden` in this new app class and just replacie `position: absolute` with `opacity: 0;`. This also tested well and would be a slightly safer option in the sense that all the functionality of the existing visually hidden class would be retained, apart from the legacy fallback of `position: absolute`. However if we adopted `opacity: 0` as the new way of visually hiding content there wouldn't seem to be any need for retaining the existing `govuk-visually-hidden` styles, so it seems to make sense to just launch `opacity: 0` on its own since this is only one instance to start with and there is a very low risk of introducing any serious bug as a result (the worst would be that the visually hidden text is either visible or not). Yet another alternative, also [explored on the original ticket](alphagov/govuk-frontend#1643 (comment)) would be to use a non-breaking space ` `. This also tested well, but this wouldn't fix the underlying problem but would be more of a manual fix which might also get removed by mistake by the next person working on the piece of code.
hannalaakso
added a commit
to alphagov/finder-frontend
that referenced
this issue
Jun 14, 2023
On the GOV.UK search results page, the h1 heading contains the word "Search" followed by the visually hidden text, "all content". However, JAWS and NVDA on Chrome, Edge and IE11 are not announcing the space before "all content". This came up in user research, with the user saying that it was challenging the identify what was being announced with the space omitted. This is a known issue which has previously been reported to JAWS: alphagov/reported-bugs#51. An equivalent bug also happens when the visually hidden text appears before the visible text, for instance on gov.uk/travel-advice. Here, JAWS announces the heading as "Countries starting withA" (for some reason NVDA interprets the space correctly here). This bug is happening because the `govuk-visually-hidden` class uses `position: absolute` as a fallback for older browsers that don't support `clip-path`. When the visually hidden element is taken out of the page flow with absolute positioning, the space before the text gets removed as it's no longer relative to the text preceeding it. The white space being thus removed can be seen visually in modern browsers, and by inspecting the accessibility tree: the value of the visually hidden content in the accessibility tree is "all content" (no whitespace), but without 'position: absolute' it's " all content". To fix this, insert a space character using pseudo elements before and after the visually hidden text. This tests well in all screen readers, regardless of whether the whitespace is before the visually hidden text ("Search _all content_"), after the visually hidden text ("_Countries starting with_ A") or where the heading text is only made up visually hidden text ("_Navigation menu_"). The only slight regression found is that Mac VoiceOver in Safari explicitly announces the inserted spare characters when navigating by headings - but this is unlikely to block any users and the user numbers for Mac VoiceOver are small compared to other assistive technologies. This fix only addresses the issue in one place but we should also add it to the headings on gov.uk/travel-advice, or otherwise contribute the fix upstream to the GOV.UK Design System.
hannalaakso
added a commit
to alphagov/finder-frontend
that referenced
this issue
Jun 14, 2023
On the GOV.UK search results page, the h1 heading contains the word "Search" followed by the visually hidden text, "all content". However, JAWS and NVDA on Chrome, Edge and IE11 are not announcing the space before "all content". This came up in user research, with the user saying that it was challenging the identify what was being announced with the space omitted. This is a known issue which has previously been reported to JAWS: alphagov/reported-bugs#51. An equivalent bug also happens when the visually hidden text appears before the visible text, for instance on gov.uk/travel-advice. Here, JAWS announces the heading as "Countries starting withA" (for some reason NVDA interprets the space correctly here). This bug is happening because the `govuk-visually-hidden` class uses `position: absolute` as a fallback for older browsers that don't support `clip-path`. When the visually hidden element is taken out of the page flow with absolute positioning, the space before the text gets removed as it's no longer relative to the text preceeding it. The white space being thus removed can be seen visually in modern browsers, and by inspecting the accessibility tree: the value of the visually hidden content in the accessibility tree is "all content" (no whitespace), but without 'position: absolute' it's " all content". To fix this, insert a space character using pseudo elements before and after the visually hidden text. This tests well in all screen readers, regardless of whether the whitespace is before the visually hidden text ("Search _all content_"), after the visually hidden text ("_Countries starting with_ A") or where the heading text is only made up visually hidden text ("_Navigation menu_"). The only slight regression found is that Mac VoiceOver in Safari explicitly announces the inserted spare characters when navigating by headings - but this is unlikely to block any users and the user numbers for Mac VoiceOver are small compared to other assistive technologies. This fix only addresses the issue in one place but we should also add it to the headings on gov.uk/travel-advice, or otherwise contribute the fix upstream to the GOV.UK Design System.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Upstream bug: FreedomScientific/standards-support#372
Date: 2020-02-21
Reported by: @hannalaakso and @NickColley
Related to: alphagov/govuk-frontend#1696
Overview
Test case: https://output.jsbin.com/jorocat
JAWS: 2020
Chrome version: 79.0.3945.130
Expected result
Announces "Delete name"
Actual result
Announces "Deletename"
The text was updated successfully, but these errors were encountered: