WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Semi-inert modals

for

From: Bryan Garaventa
Date: Apr 5, 2022 4:38PM

No problem, that does sound correct to me.

As long as you use the correct role and supporting attributes for the dialog markup, move focus into the dialog when it's rendered, manage tabbing correctly while focus is within the dialog, provide an intuitive mechanism/active element for closing or submitting the dialog, then move focus back to the triggering element if applicable after the dialog is removed, you should then have an accessible dialog.

Of course, you still need to make sure that everything the dialog contains is accessible, so please don't forget that part.

All the best,
Bryan


Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Kian Badie
Sent: Tuesday, April 5, 2022 2:11 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Semi-inert modals

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.


Hello,

That makes complete sense. So if I am understanding you correctly, it is ok to have a couple of extra steps of closing the dialog for non-sighted users to access the header/footer because the process is intuitive. Is that correct?

If that is correct, I think that answers all the questions I currently have. Thank you very much for the very educational and insightful conversation! It helped a lot.

Thank you,
Kian Badie

On Mon, Apr 4, 2022 at 3:25 PM Bryan Garaventa via WebAIM-Forum < <EMAIL REMOVED> > wrote:

> "If mouse users are able to interact with content outside the modal
> (like the header and footer), would that be considered inaccessible
> since it is not the same experience?"
>
> It will always be impossible to ensure the exact same experience
> between sighted mouse users and non-sighted screen reader users, but
> this is accounted for by ensuring proper focus management and the
> ability to access the same information using an intuitive process.
>
> In this case, the user will be aware that a dialog has opened and that
> focus is contained within it, and if they wish to leave the dialog
> they can press Escape or activate the equivalent button for closing or
> canceling or submitting the dialog to close it and return focus back
> into the primary page content. This ensures the same level of access
> to the header and footer content that sighted users would have access
> to by seeing where it is visually, even though it takes a couple more
> steps for non-sighted users to do the same. This process is a common
> one though for dialogs of all tipes across various platforms, so it would not be inaccessible to do this.
>
> Hopefully that makes sense.
>
> All the best,
> Bryan
>
>
>
> Bryan Garaventa
> Principal Accessibility Architect
> Level Access, Inc.
> <EMAIL REMOVED>
> 415.624.2709 (o)
> www.LevelAccess.com
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Kian Badie
> Sent: Monday, April 4, 2022 3:10 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Semi-inert modals
>
> 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.
>
>
> Hello,
>
> Thank you very much for the very detailed explanation and examples!
> They help a lot. I think I also want to make this a self-contained
> dialog and manage keyboard focus to be trapped in the modal while it is open.
>
> If mouse users are able to interact with content outside the modal
> (like the header and footer), would that be considered inaccessible
> since it is not the same experience? A keyboard user would have to
> close the dialog before having access to the header/footer since
> keyboard focus would be trapped within the self-contained dialog. It
> is indeed a different experience with an extra step of closing the
> dialog to get to the header/footer, but it seems to me that both
> experiences are accessible even though they are different.
>
> Thank you,
> Kian Badie
>
> On Mon, Apr 4, 2022 at 10:05 AM Bryan Garaventa via WebAIM-Forum <
> <EMAIL REMOVED> > wrote:
>
> > Hi,
> > It depends on what you mean by support.
> >
> > The accessibility API can map the dialog element to the dialog role,
> > which will provide the same feedback if the dialog is properly
> > labelled. This is how an H2 element has the same feedback as
> > role="heading" + aria-level="2", and to screen reader users there is
> > no
> difference.
> >
> > However, for this to truly be accessible, a dialog has to manage
> > focus appropriately, which means that scripting is needed to do so.
> > For the browsers to do this automatically, they would have to guess
> > at what is meant to receive focus within the dialog when it is
> > rendered, which will likely conflict with actual focus handling that
> > is built into the
> dialogs.
> > It may be possible to override this to some extent, but doing so
> > would likely be very buggy.
> >
> > Bryan Garaventa
> > Principal Accessibility Architect
> > Level Access, Inc.
> > <EMAIL REMOVED>
> > 415.624.2709 (o)
> > www.LevelAccess.com
> >
> > -----Original Message-----
> > From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf
> > Of <EMAIL REMOVED>
> > Sent: Saturday, April 2, 2022 1:03 PM
> > To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> > Subject: Re: [WebAIM] Semi-inert modals
> >
> > 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.
> >
> >
> > If Firefox and Safari finally supported the dialog element, would
> > this simplify authoring accessible modal dialogs? It seems to me
> > that this would be so.
> >
> > Jeff Gutsell
> >
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > >
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >