Links with contextual screen-reader content not being read correctly

[adamliptrot-oc]

JAWS in particular will merge the visible and hidden copy from a change link and then mis-pronounce the result, for example instead of "Change first name" it will say "Changefirst name". This also shows up in the dialog listing links.

Placing the space inside or outside the visually-hidden copy does not seem to make any difference to how the phrase is spoken or displayed.

One solution is to move from the current code:
Change<span class="visually-hidden"> first name</span>

to one which keeps the phrasing together:
<span aria-hidden="true">Change</span><span class="visually-hidden">Change first name</span>

[chrismoorembe]

This happens with Chrome, but not IE. Firefox does announce the text correctly, but when navigating by character using the arrow buttons, you discover there is no space. Perhaps it is time to replace the ‘Change’ link with an ARIA label instead?

…

Sent from my iPhone

On 8 Jun 2020, at 6:06 pm, Adam Liptrot ***@***.***> wrote:  JAWS in particular will merge the visible and hidden copy from a change link and then mis-pronounce the result, for example instead of "Change first name" it will say "Changefirst name". This also shows up in the dialog listing links. Placing the space inside or outside the visually-hidden copy does not seem to make any difference to how the phrase is spoken or displayed. One solution is to move from the current code: Change<span class="visually-hidden"> first name</span> to one which keeps the phrasing together: <span aria-hidden="true">Change</span><span class="visually-hidden">Change first name</span> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[adamliptrot-oc]

JAWS

The space between the visible and hidden copy in the change links is not being preserved with JAWS which means the “Change” and the first word of the hidden copy are being merged together and so mispronounced.

Voiceover iOS

In Voiceover on iOS the span in the middle of the accessible name means that if a user is navigating by links they hear:

“link: Change your name” (swipe)
“link: Change” (swipe)
“link: Your name”

Android TalkBack

With Android TalkBack when a user is navigating normally by swiping the effect is the same as with VO navigating by links
To resolve
Instead of

<a href="">
    Change
    <span class="govuk-visually-hidden"> your name</span>
</a>

do this

<a href="">
    <span aria-hidden="true">Change</span>
    <span class="govuk-visually-hidden">Change your name</span>
</a>

[adamliptrot-oc]

Reported to GDS on alphagov/govuk-frontend#1643

[adamliptrot-oc]

GDS have filed bugs with JAWS and NVDA around the honouring of spaces alphagov/govuk-frontend#1643 (comment)

[adamliptrot-oc]

Update - I can't hear the merging of content anymore in JAWS (tested 2019, 2020, 2021), although the space is still missing in the dialog.

[adamliptrot-oc]

In the summary list you can send html as a param to the action which overrides the text.

 actions: {
    items: [
        {
              href: "#",
              html: '<span aria-hidden="true">Change</span><span class="govuk-visually-hidden">Change name</span>'
        }
    ]
 }

Which will render like this (GDS style at top, HMRC style at bottom)

[adamliptrot-oc]

Interesting possibility, that using a capital letter for the first word of the hidden copy might result in the non-honouring of the space to be negated by the screen-reader pronunciation of camelcased text eg ChangeName where the screen-reader will read out the words as individual words due to the casing.
(suggested by Andrew Arch Principal Accessibility Consultant, Intopia on Govt Accessibility email list)

[danielelder]

That sounds sensible as that's how it's supposed to work for hashtags.

[ashfaqhussain357]

Fixed with Jaws 2024