WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Overlay search box and screen reader modes

for

From: glen walker
Date: Sep 10, 2019 10:57AM

No, a user shouldn't be forced to stay in forms mode in your overlay.
Yes, being able to access content behind the overlay is a problem.

Support for role="dialog" isn't that great yet. If you were starting from
scratch, the easiest way to trap the virtual cursor is to make your dialog
container a sibling of your main content and then set aria-hidden on your
main content. Something like this:

<body>
<div>
<!-- main page here -->
</div>
<div style="display:none">
<!-- dialog -->
</div>
</body>

The dialog is hidden initially. When it's displayed, it's unhidden and
aria-hidden is set on the main <div>.

To prevent keyboard focus from moving out of the dialog (which sounds like
you're already handling), you can put an overlay on top of the main <div>
(using z-index) so that the overlay gets all the events and drains them.

If this is an existing page, you might not be able to refactor your
existing code to do this, but it might lead to ideas on how to fix what you
have.



On Tue, Sep 10, 2019 at 10:43 AM Joseph Sherman < <EMAIL REMOVED> >
wrote:

> Hi all. I have a search box overlay that is launched when the user clicks
> on a Search button. I believe it uses role="dialog".
>
> The search box opens and the user is put in the search field text box.
> There are also a couple of links in the overlay, but no plain text. In
> Windows, JAWS and NVDA go into 'forms' mode and the user can Tab through
> all items with no problem, and focus is trapped in the overlay. However if
> a user manually turns off 'forms' mode and goes into browse mode using the
> virtual cursor, they can access the content behind the overlay using the
> arrow keys.
>
> The Mozilla developer pages<
> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role>
> have a note that "While it is possible to prevent keyboard users from
> moving focus to elements outside of the dialog, screen reader users may
> still be able to navigate that content virtually to use their screen
> reader's virtual cursor. Because of this, dialogs are considered to be a
> special case of the application role: They are expected to be navigated by
> screen reader users in a non-virtual navigation mode."
>
> 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?
>
> Thanks.
>
>
> Joseph
>
> > > > >