RE: Question in the use of aria-hidden attribute

Often developers will try to expose dialogs using aria-hidden="false" when they are nested within a container that has aria-hidden="true".

This completely destroys the accessibility of the dialog and renders all of it's content totally inaccessible to screen reader users.

The use of the aria-hidden attribute should never be nested for any reason.




Bryan Garaventa
Principle Accessibility Architect
Level Access, Inc.
Bryan.Garaventa@LevelAccess.com
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: Patrick H. Lauke <redux@splintered.co.uk> 
Sent: Monday, December 03, 2018 8:09 AM
To: w3c-wai-ig@w3.org
Subject: Re: Question in the use of aria-hidden attribute

On 03/12/2018 05:09, Sean Murphy (seanmmur) wrote:
[...]
> Now for aria-hidden=”false”. Extracted code below (assume CSS 
> attributes are not hiding the content).
> 
>      <div id="main" role="document" aria-hidden="false">
> 
> </div>
> 
> What would occur with the children tags within the above div? would 
> they still be visible to the accessibility tree?

To be clear, if you mean the above is nested inside of an ancestor that's already set to aria-hidden="true", then no, those children will not be visible in the accessibility tree.

<div aria-hidden="true">
   ...
   <div aria-hidden="false">
     Still hidden...
   </div>
   ...
</div>

Also, as an aside: aria-hidden="true" won't stop focusable elements from being focusable. So, if you have aria-hidden="true", but inside that there's, say, a link ... keyboard users will still be able to set focus to that - and AT users will focus onto "nothing".

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke http://flickr.com/photos/redux/ | http://redux.deviantart.com

twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Monday, 3 December 2018 17:10:06 UTC