RE: HTML5 'hidden' attribute and assistive technologies

I have verified that a screen reader will read it, which is what I would expect.

The menu is visible because the <ul> element has a “display:flex” attribute that is overriding the “hidden” attribute. I have no idea if it is supposed to do that.

In fact, the “hidden” attribute is overridden if the <ul> element has any value for the “display” attribute except “display:none”.


This might be why we almost never see the “hidden” attribute used. There are several other ways to hide text, but these days we recommend using the “clip” technique because it works with both left-to-right and right-to-left languages, which some other techniques don’t. There are various implementations of the “clip” technique, such as:

https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/#showing-additional-content-for-screen-readers


https://a11yproject.com/posts/how-to-hide-content/


I have not tested the different variants, but I suspect the only difference will be with regard to legacy browsers.

Steve Green
Managing Director
Test Partners Ltd


From: Bernat Lleonart <bernat.lleonart@protonmail.ch>
Sent: 07 October 2019 19:16
To: w3c-wai-ig@w3.org
Subject: HTML5 'hidden' attribute and assistive technologies

Hello,

I would like to use this responsive menu on a site I am building: https://codepen.io/Kilian/pen/yLBQBpK


I can see that when the viewport is over 40rem wide, the menu is visible horizontally. However, the ul#menu still has the 'hidden' attribute applied, although it is visible.

Is there any problem with this behaviour? Will a screen reader anounce the menu although it has the hidden attribute?

Thank you.

--
Bernat Lleonart