WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessibility of video in modal popups

for

From: Sylvia Richardson
Date: May 12, 2015 2:22PM

Two different methods you could use:

1. Use JavaScript to intercept all focus events when the dialog box is open and redirect the focus to the dialog. Nicholas C. Zakas has some fairly clear instructions and code samples here: [http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/]

2. Suppress everything outside the dialog box by adding tabindex="-1" and aria-disabled="true" to any interactive elements outside the dialog. This will prevent users from being able to tab to the elements. Butterfly Lightbox uses this method. [http://irama.org/web/dhtml/butterfly/]

-Sylvia

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Tuesday, May 12, 2015 4:15 PM
To: WebAim Forum ( <EMAIL REMOVED> )
Subject: [WebAIM] accessibility of video in modal popups

Hello,
On our new site design we are working to implement some videos. We are trying to determine how to display them on a page and we have various options. We like the idea of a video in a modal popup window like those found here at UW-Madison's home page<http://www.wisc.edu/>; on the Video tab. We have an accessibility concern though in that we are not able to trap the keyboard focus inside the popup so that the user cannot accidentally interact with the window behind the popup. Users will be able to open, close, and pause the video using the keyboard, but they also can continue to tab through the page while the popup is open. This could present issues for vision-impaired users.

I am looking advice on accessible video embedding or how to trap focus within the modal popup. Thank you for any ideas.


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
<EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
www.checkoutacollege.com<;http://www.checkoutacollege.com>;
www.sbctc.edu<;http://www.sbctc.edu>;

Blue Cross and Blue Shield of North Carolina

Confidentiality Notice: This message is intended only for the use of the individual or entity to which it is addressed. This communication may contain individual protected health information ("PHI") that is subject to protection under state and federal laws, or other privileged, confidential or proprietary information of Blue Cross and Blue Shield of North Carolina that may not be further disclosed. If you are not the intended recipient, or the employee or agent responsible for delivering this communication to the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. If you have received this communication in error, please notify us immediately by replying to this message and deleting it from your computer. Thank you.