WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Semi-inert modals

for

From: Kian Badie
Date: Apr 1, 2022 11:23AM

I see. In my reading up on the accessibility of modals, the use cases
described focus on what you have defined with modals being important
messages to interact with. It is interesting to see some examples online
where modals are being used to store additional content. For example,
clicking on a collection of images opens a gallery like image viewing
modal. Or, like the site I'm working on, the modal contains additional
information. I think that causes confusion for me because it makes me think
that additional content in the modal should only cover the main content,
not the whole page like a important message would.

So if I were to manage the focus between the header, the dialog, and the
footer while the dialog is opened above the main content would the dialog
still be considered a dialog? Or is it semantically something different now?

Thank you,
Kian Badie

On Thu, Mar 31, 2022 at 8:00 PM Bryan Garaventa via WebAIM-Forum <
<EMAIL REMOVED> > wrote:

> No problem. 😊
>
> Modals are important when it is necessary for the user to interact with it
> before they are permitted to continue interacting with the page. E.G.
> Session timeout dialogs, login prompts, wizards, and many others.
>
> It is especially important to implement modals properly to ensure that the
> background content is hidden from screen reader users, otherwise it is
> possible for the user to accedentally get lost in the background content
> when navigating instead of interacting with the dialog as they are supposed
> to be doing. This is critical when dealing with license agreements and
> other prompts that must be acknowledged, or when navigating wizards that
> require a particular order to be followed when completing form data.
>
> The issue with exposing the header and footer is not really the problem,
> but rather, if the user is interacting with the header or footer content,
> they will also have access to the background main body content as well and
> will not be interacting with the dialog as expected, nor will they be able
> to reliably identify where it is located in the page. This is always an
> issue when using a screen reader such as JAWS or NVDA on Windows where the
> Virtual Cursor or Browse Navigation allows the user to move around within a
> virtual representation of the page content instead of what is on the top
> layer as occurs with VoiceOver on iOS (when touching and not swiping.).
>
>
>
>
> Bryan Garaventa
> Principal Accessibility Architect
> Level Access, Inc.
> <EMAIL REMOVED>
> 415.624.2709 (o)
> www.LevelAccess.com
>
>