Open
Description
I'm submitting a ...
- bug report
- feature request
- other (Please do not submit support requests here (below))
Steps to reproduce
- Visit https://codepen.io/joe-watkins/pen/OjpqxL with Safari or Chrome and VoiceOver activated.
- Tab to each link and listen to how they are announced.
Expected Results
The visually hidden text using HTML5 boilerplate's .visuallyhidden {}
will be announced in the order that it is within the markup.
Actual Results
The order of the text is not announced does not match the markup order. Visually hidden text is announced before visible text copy.
Potential fix
After some testing, I've found that using position: relative;
and display: inline-block;
appears to solve this. e.g.
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: relative; // different - for reading order in macOS VO
display: inline-block; // new - for reading order in macOS VO
}
SR Tested (works in)
- Win Edge,IE11,FF,Chrome JAWS 18/17
- Win IE11,FF,Chrome NVDA
- macOS Seirra Safari,Chrome,FF VoiceOver
Browsers tested (works - hides text in)
- Win Edge, IE11, IE10, IE9, IE8, FF 53, Chrome 60
- macOS Seirra Safari 10.2, Chrome 60, FF 54
Video screencast of experience
I'd love to get some thoughts on this and I'd be happy to create a PR if everyone is into it :)
Metadata
Metadata
Assignees
Labels
No labels