WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Overlay search box and screen reader modes

for

From: Jonathan Avila
Date: Sep 10, 2019 12:07PM

I've heard some consensus though is that if the dialog has a proper role and focus stays in the box it would not be a WCAG failure though to not use aria-hidden on the content outside of it. I guess that is the real question. It's not always so simple to move the content to its own sibling div of the body and assistive technology like screen readers are getting better about hiding content outside of dialogs when aria-modal is present. So it seems maybe better solved at the AT level.

Jonathan

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Patrick H. Lauke
Sent: Tuesday, September 10, 2019 2:02 PM
To: <EMAIL REMOVED>
Subject: Re: [WebAIM] Overlay search box and screen reader modes

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


On 10/09/2019 17:43, Joseph Sherman wrote:

> My question is whether users know to stay in forms mode in the overlay, or is being able to access the content behind the overlay using browse mode a problem? If it is a problem, what is a good way to trap the virtual cursor?

You'd want to make the underlying page inert. Trap keyboard focus as usual, but also hide the underlying page using aria-hidden="true", removing it effectively from the accessibility tree and making it unreachable via virtual cursor as well. Note that for this to work, your dialog has to live outside of the container you're hiding, as you can't have a container aria-hidden="true" and then "unhide" a child element.
So, you'd want something like:

<body>
<div ... aria-hidden="true">
<!-- main underlying page -->
</div>
<div role="dialog" ...>
<!-- the dialog content -->
</div>
<body>

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