E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 11 (In chronological order)

From: Bossley, Peter A.
Date: Tue, Jan 10 2017 11:35AM
Subject: Accessible modal dialog plugin
No previous message | Next message →

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,

From: Bryan Garaventa
Date: Tue, Jan 10 2017 11:47AM
Subject: Re: Accessible modal dialog plugin
← Previous message | Next message →

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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

From: Bossley, Peter A.
Date: Tue, Jan 10 2017 12:05PM
Subject: Re: Accessible modal dialog plugin
← Previous message | Next message →

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.

From: Bryan Garaventa
Date: Tue, Jan 10 2017 12:18PM
Subject: Re: Accessible modal dialog plugin
← Previous message | Next message →

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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

From: Beranek, Nicholas
Date: Tue, Jan 10 2017 12:22PM
Subject: Re: Accessible modal dialog plugin
← Previous message | Next message →

Hey guys, I'm noticing the same thing. When I activate the Login button, the JAWS PC cursor does not move to the dialog. Instead, it maintains on the Login button and allows me to access the content beneath the dialog even though aria-hidden=true is set. I'm using JAWS 18.0.2324 and Firefox 50.0.1.

From: Bossley, Peter A.
Date: Tue, Jan 10 2017 12:29PM
Subject: Re: Accessible modal dialog plugin
← Previous message | Next message →

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

From: Bryan Garaventa
Date: Tue, Jan 10 2017 12:34PM
Subject: Re: Accessible modal dialog plugin
← Previous message | Next message →

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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

From: Bryan Garaventa
Date: Tue, Jan 10 2017 3:18PM
Subject: Re: Accessible modal dialog plugin
← Previous message | Next message →

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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

From: JP Jamous
Date: Tue, Jan 10 2017 3:31PM
Subject: Re: Accessible modal dialog plugin
← Previous message | Next message →

Birkir,

Windows 10 Pro, JAWS 18 with the Jan update, NVDA 2016.3, and latest version of FF.

No problems at all. The modal stays in the foreground and the screen readers are stuck in it until Cancel is executed.

From: Bossley, Peter A.
Date: Wed, Jan 11 2017 9:09AM
Subject: Re: Accessible modal dialog plugin
← Previous message | Next message →

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.

From: Bryan Garaventa
Date: Wed, Jan 11 2017 11:24AM
Subject: Re: Accessible modal dialog plugin
← Previous message | No next message

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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com