WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: accessibility of video in modal popups

for

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

From: Angela French
Date: Tue, May 12 2015 2:15PM
Subject: accessibility of video in modal popups
No previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.checkoutacollege.com<;http://www.checkoutacollege.com>;
www.sbctc.edu<;http://www.sbctc.edu>;

From: Sylvia Richardson
Date: Tue, May 12 2015 2:22PM
Subject: Re: accessibility of video in modal popups
← Previous message | No next message

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