WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible modal dialog plugin

for

From: Bryan Garaventa
Date: Jan 11, 2017 11:24AM

I've reached out to the FF engineering folks and will report back any findings. I do have confirmation that the way aria-hidden is processed in FF has recently changed within the last couple point releases of Firefox so this may be having an impact on screen reader accessibility.

This from Marco:

"Hi Bryan, it has changed slightly, in that we now put the accessibles hidden by aria-hidden into a separate sub tree so they are no longer part of the main document, but are still available in case the hidden sub tree contains any focusables. There were no changes between Firefox 50.0 and 50.0.1, I believe the big change for aria-hidden happened in 49 or 48.
But Alex knows for sure."

Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bossley, Peter A.
Sent: Wednesday, January 11, 2017 8:10 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible modal dialog plugin

Very strange. After following your steps, I can still navigate outside the modal using JAWS 17 or 18 and NVDA. In NVDA the tab trapping is working but you can still navigate to the underlying page content by pressing control home and arrowing around.
I'll try to test with some other browsers later on today but this seems odd to me...
Especially since others aren't having any problems.


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 5:19 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible modal dialog plugin

Hi,
As a quick update, I updated to NVDA 2016.4 and it now appears to be working in FF 50.1.0, so too with the latest version of JAWS after switching to 17 then back to 18 for testing. The weird thing is that I reproduced the same issue earlier, made no coding changes to the modal, then retested a few minutes ago and now it works as expected regardless.

If you could retest this page doing the same to see if you can reproduce the earlier issue, I'd appreciate it.
http://whatsock.com/tsg/Coding%20Arena/Modals/Modal%20(Internal%20Content)/demo.htm

Thanks,
Bryan


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 11:35 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible modal dialog plugin

Yes, it appears that FF has broken aria-hidden support. I'll look more into this later today.

Just tested the same implementation and it still works correctly on Windows in IE11 and Chrome, just not in FF due to the update.

Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:30 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible modal dialog plugin

Windows 10 64-bit.
Also have the same behavior with NVDA and Firefox. Haven't tested with any other browser / SR combinations yet.


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 2:18 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible modal dialog plugin

It doesn't seem so on my end, I just tested this using JAWS 18.0.2324 in FF 50.1.0 on Windows7 and after the Login button is activated, it's not possible to arrow around through the background content.

Which OS are you using?


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:05 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible modal dialog plugin

I wonder if the latest JAWS update broke something-- with JAWS 18.0.234 and Firefox 50.1.0 I'm able to navigate to the content behind the Modal.


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible modal dialog plugin

As one option,
Here is one example that works across both desktop and mobile:
http://whatsock.com/tsg/Coding%20Arena/Modals/Modal%20(Internal%20Content)/demo.htm

There is also an option of setting ARIA Dialog usage automatically within the setup if desired, plus nested modals are automatically supported.

The code for dropping this into jQuery is included in the widget archive at:
https://github.com/accdc/tsg

The code for dropping this into MooTools is included in the widget archive at:
https://github.com/accdc/tsg-mootools

And the code for dropping this into Dojo is included in the widget archive at:
https://github.com/accdc/tsg-dojo

This also provides automatic framework integration for all of the other widgets listed there as well if desired.

Best wishes,
Bryan


Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Accessible modal dialog plugin

Greetings, Web AIM list,
I'm writing to see if any of you have a suggestion for an accessible dialog plugin our web developers can use to pop up modals. The site is responsive so we would want something that would work on Mobile as well.
Any suggestions would be appreciated- we're hoping to find something we can easily drop in or at least something that doesn't require us to write it from scratch.
Best,