search

medialize / ally.js

JavaScript library to help modern web applications with accessibility concerns
http://allyjs.io/
MIT License
1.53k stars 83 forks source link

Improve visuallyhidden class further #161

Open anselmh opened 6 years ago

anselmh commented 6 years ago

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?

rodneyrehm commented 6 years ago

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.

anselmh commented 6 years ago

Oh, heh, thanks for reporting that back! Well then it’s probably not the best idea to change the code.

cedeber commented 6 years ago

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.

cedeber commented 6 years ago

Ok, I test it again and the flex solution doesn't work. The magic of IE debugger.