Skip to content
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

Navigating to visually hidden text jumps to the top of the page #869

Closed
jtart opened this issue Oct 29, 2018 · 0 comments
Closed

Navigating to visually hidden text jumps to the top of the page #869

jtart opened this issue Oct 29, 2018 · 0 comments
Assignees
Labels
a11y Accessibility-related task bug Something isn't working

Comments

@jtart
Copy link
Contributor

jtart commented Oct 29, 2018

Describe the bug
When navigating to the BBC logo in the footer - the page jumps to the top and you can no longer see the footer (Seems like this is due to the CSS 'top: 0' in our visually hidden CSS).

I also see a similar issue when using NVDA/Chrome and moving to the footer landmark. This is also affecting Read&Write/Chrome - When hovering to the right of the BBC News logo in the footer, when this is read out the page jumps to the top.

To Reproduce
Navigate to visually hidden text using Mac OS Voiceover, and note that the page jumps to the top.

Expected behaviour
Should not jump to the top of the page when navigating to visually hidden text.

It is therefore recommended that we make our visually hidden CSS more robust and use the following CSS instead of the Grandstand implementation while addressing this bug (needs in-depth testing):

clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;

Desktop (please complete the following information):

  • Mac OS Voiceover 10.12.6
  • Safari 11.12
  • VoiceOver OS Mac v.11.1.2
  • and NVDA/Chrome

Additional context
Note that the Grandstand visually hidden CSS, which is what we are using (with the addition of 'top: 0'), will cause a bug in VoiceOver/Mac with Safari and/or Chrome, when visually hidden text is used in combination with displayed text for an element and the visually hidden text is not 1st in the mark up order e.g. a link with some displayed text then some visually hidden text.

Even though the visually hidden text is not 1st in the mark up order, VoiceOver will read the visually hidden text out 1st before the displayed text, resulting in a degraded UX See the following issue for more information on the bug: https://github.com/h5bp/html5-boilerplate/issues/1985

This can be addressed to read the content out in the correct order and improve the UX, by using the visually hidden CSS that Heydon Pickering uses (this has no negative margins which is causing the bug) rather than the Grandstand implementation

@jtart jtart added bug Something isn't working a11y Accessibility-related task Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. labels Oct 29, 2018
@jtart jtart added this to the 02. News Footer milestone Oct 29, 2018
@jtart jtart added this to To do in News Article via automation Oct 29, 2018
@BogdanDogaru BogdanDogaru removed the Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. label Nov 1, 2018
@BogdanDogaru BogdanDogaru moved this from To do to Ready for Dev in News Article Nov 1, 2018
@bcmn bcmn self-assigned this Nov 6, 2018
@bcmn bcmn moved this from Ready for Dev to Issue In Progress in News Article Nov 6, 2018
News Article automation moved this from Issue In Progress to Done Nov 13, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility-related task bug Something isn't working
Projects
No open projects
News Article
  
Done
Development

No branches or pull requests

3 participants