ally.js
ally.js copied to clipboard
Improve visuallyhidden class further
The HTML5Boilerplate team has recently improved the .visuallyhidden
class to fix issues with Voice Over. The changes are in https://github.com/h5bp/html5-boilerplate/pull/1989/files.
Maybe you want to incorporate these changes as well on https://allyjs.io/tutorials/hiding-elements.html#2017-edition-of-visuallyhidden as I saw you updated the code snippet with a quite nice selector chain now?
Thanks for bringing this to my attention! I just read through h5bp/html5-boilerplate#1985 to understand the change and noticed that they reverted the change 3 days ago, as this was causing visual problems.
Oh, heh, thanks for reporting that back! Well then it’s probably not the best idea to change the code.
I didn't test it with Voice Over, but on IE 11 if a visually hidden element is a flexbox child it is rendered. I mean, you don't see it but it takes space. I fix it by adding flex: 0 0 0
to the class.
Ok, I test it again and the flex solution doesn't work. The magic of IE debugger.