WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Overlay search box and screen reader modes

for

From: Patrick H. Lauke
Date: Sep 10, 2019 12:02PM

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