Important clause on visuallyhidden impacts iOS VoiceOver
adamliptrot-oc opened this issue · comments
It appears that the inclusion of the !important clause in the rule for .visuallyhidden means that content inside links marked up in the following way
<a href="">Link text <span class="visuallyhidden">Screen reader copy</span></a>
is not navigable with VoiceOver on iOS.
Problem/Feature
Control test:
<a href="">Link text</a>
VoiceOver gesture navigation: works as expected
Voiceover finger navigation: works as expected
Tests undertaken:
<a href=""><span class="visuallyhidden">Screen reader copy</span><span aria-hidden="true">Link text</span></a>
VoiceOver gesture navigation: works as expected
Voiceover finger navigation: not announced
<a href="" role="button"><span class="visuallyhidden">Screen reader copy</span><span aria-hidden="true">Link text</span></a>
VoiceOver gesture navigation: announced, not actionable
Voiceover finger navigation: announced, not actionable
<a href="">Link text <span class="visuallyhidden">Screen reader copy</span></a>
VoiceOver gesture navigation: announced, not actionable
Voiceover finger navigation: announced, not actionable
It would appear that the presence of the important clause in the css rules causes this.
Expected behaviour
Links should be actionable as normal.
Proposed solution
I suggest the removal of the important clauses which would bring the class in line with the Gov Elements .visually-hidden class
In the short term I'd recommend using the GDS .visually-hidden class
Explain the steps to reproduce the bug
Use the above link constructs and navigate using iOS VoiceOver
Tell us about your environment
iOS 9.3 on iPad Air
@adamliptrot-oc Thanks for this.
I thought there were some other issues around !important causing issues but I can't seem to find them now.