WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessible modal dialog plugin

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,

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.


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,

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


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:05 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 2:18 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:05 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

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.


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 2:18 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:05 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,

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


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:30 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 2:18 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:05 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 11:35 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:30 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 2:18 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:05 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 4:19 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 11:35 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:30 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 2:18 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:05 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,

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.


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 5:19 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 11:35 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:30 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 2:18 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:05 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,

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


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Wednesday, January 11, 2017 8:10 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 5:19 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 11:35 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:30 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 2:18 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 11:05 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Tuesday, January 10, 2017 1:48 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, January 10, 2017 10:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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,