You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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):
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
The text was updated successfully, but these errors were encountered:
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
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):
Desktop (please complete the following information):
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
The text was updated successfully, but these errors were encountered: