Investigate visually hidden text bug in OSX VoiceOver

[NickColley]

We've had a report from @stevenaproctor that using visually hidden text results in bugs in VoiceOver.

#958 (comment)

We should try and reproduce this, I suspect it may be someone testing VoiceOver in Chrome rather than Safari, but since this is a very widespread pattern on GOV.UK (and GOV.UK Frontend) it's worth an investigation.

[stevenaproctor]

@NickColley I got this from our accessibility lead so I doubt it is because they used Chrome.

[NickColley]

This seems to only be a problem with links:

https://jsbin.com/gocabamowi/1

https://output.jsbin.com/gocabamowi/1

🔴Mac OSX High Sierra v10.13.3 (17D47), Safari Version 11.0.3 (13604.5.6):

• Buttons reads "Change name"
• links read out "name Change"

🔴iOS 12.0.1 VoiceOver

• Button reads "Change name"
• Link reads "Change"

JAWS 17: "Change name" for both
NVDA 2018: "Change name" for both

[NickColley]

This might be related:

https://github.com/h5bp/html5-boilerplate/issues/1985

I have updated my example with their suggestion for the visually hidden class and will test again:

https://jsbin.com/qozumosiji/edit?html,css,output

https://output.jsbin.com/qozumosiji

🍏 Mac OSX High Sierra v10.13.3 (17D47), Safari Version 11.0.3 (13604.5.6):

• Buttons reads "Change name"
• links read out "Change name"

🔴 iOS 12.0.1 VoiceOver

• Button reads "Change name"
• Link reads "Change"

[hannalaakso]

I tested this with Mac Voiceover on Safari 11.1 (OSX 10.11.6) and it reads out "Change name, link" on the link. So it seems that this could be a recent regression with OSX.

[NickColley]

I have investigated this and recorded the results in this gist: https://gist.github.com/nickcolley/19b80ed24d0364cfd3afd3b1b49c4014

Conclusion

We should update the govuk-visually-hidden class to remove the negative margin which will fix the ordering issue in VoiceOver for OSX.

We should recommend using aria-label or aria-labelledby where it makes sense to.

Visually hidden CSS can result in text not being read out when touching on iOS, this is regrettable but does not cause a hard barrier as users can explore the surrounding content to understand context.

@stevenaproctor I found that the duplicate approach works pretty well but in VoiceOver iOS it makes the virtual focus area render oddly

[stevenaproctor]

@NickColley Thanks for taking a look. I assume aria-label or aria-labelledby does not cause any of the issues.

[NickColley]

@stevenaproctor yes they're both good options in the right scenarios, there are certain instances where it's impractical to use those so you'll still want to use the visually hidden class.

They're both also future friendly, there is a risk that this CSS will cause issues in a future rendering engine, and it's difficult to update very old services. Whereas aria-label is intended for this purpose and should stand the test of time.

We might want to consider having some guidance on how to do this in the future.

[stevenaproctor]

@NickColley I think guidance on which method to use in what situation will be good and essential. Maybe a new entry in 'Typography'?