Revisit the use of the hidden attribute in Accordion

[charlie-yao]

In the example of the Accordion widget, they use the hidden attribute to hide a collapsed accordion section. Their tabs example also uses the hidden attribute.

https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html
https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html

However, some argue that using CSS (i.e. display: none) is more appropriate, and the tabs widget is directly referenced as an example of where hidden should NOT be used!

https://stackoverflow.com/questions/6708247/what-is-the-difference-between-the-hidden-attribute-html5-and-the-displaynone
https://html.spec.whatwg.org/#the-hidden-attribute

But IME, screen readers ignore display: none as well! Maybe there's a difference between what gets put on the accessibility tree... must investigate.

[charlie-yao]

My current opinion: don't use the hidden attribute. I can't help but agree with the argument:

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

And, it feels better to follow the HTML spec. The examples used are "merely" example implementations... right? Bleh.

Since it seems like display: none is treated the same as hidden by screen readers and browsers, I think I'm just going to go with a visual-hide technique:

https://webaim.org/techniques/css/invisiblecontent/

[charlie-yao]

Some more discussion:

w3c/aria-practices#601
whatwg/html#4904

[charlie-yao]

Note: ultimately decided to go with display: none;.