Modal Windows Better for Everyone

Page 1 of 2 Lightboxes & Modal Dialogs Lightboxes and modal dialogs are user interface components that appear in front of the standard page. They generally blur or hide the underlying page until the user closes them. Why does it matter? A poorly implemented lightbox or modal dialog can completely prevent a user from using a page. Lightboxes and model dialogs can be especially challenging for users who navigate pages using a keyboard or keyboard-like device instead of a mouse. What Section 508 standards apply? 22(n) When electronic forms are used, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. 31(a) Ensure access for blind and visually impaired users. 31(b) Ensure access for low vision users. 31(f) Ensure users with mobility impairments can use application. How should I control focus? It is very important to set and control the keyboard focus to help keyboard-only users. If keyboard focus is not set properly, keyboard-only users may be completely unable to interact with a lightbox or modal dialog, and screen reader users may not even know it is there! The lightbox or modal dialog should receive focus when it opens. To make this work, add tabindex="-1" to the dialog box (to make it focusable) then add a .focus() event to the JavaScript that opens the window to direct focus to the appropriate element. The window should also "trap" focus, preventing users from navigating outside the window with keyboard commands. 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: 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. Finally, when a user closes a lightbox or modal dialog, the page should return focus to the button or link that opened the window. To do this, the JavaScript that opens the window should record the active element (using document.activeElement or an equivalent). When the user closes a dialog, the script should use a .focus() event to return to the appropriate position. Quick Reference – Lightboxes & Modal Dialogs Last updated April 2015 Page 2 of 2 How else can I help keyboard users? Make sure all the interactive elements inside the lightbox or modal dialog are keyboard- accessible. This means users are able to reach them with tab and activate them with enter. For additional usability, make esc close the window and left and right arrow navigate between slides, where appropriate. What should I check? □ When the lightbox or modal dialog opens, focus moves to the start of the content. □ Lightbox or modal dialog responds to original window size and resize events without hiding important content or controls. □ Users can tab to and use any interactive elements inside the lightbox or modal dialog using only a keyboard. □ Users cannot tab to elements outside the window until the lightbox or modal dialog is closed. □ Users can close the lightbox or modal dialog using only a keyboard. □ Pressing the escape key closes the lightbox or modal dialog (optional). □ Lightbox or modal dialog uses appropriate ARIA tags (optional). How can I check my pages? 1. Open the lightbox or modal dialog. Does focus move to the content? 2. Resize the browser. Does the lightbox or modal dialog resize with the browser without hiding content or controls? 3. Press tab repeatedly. Can you tab to every interactive element in the window? Does focus stay inside the window? 4. If the window contains a form, can you complete it and submit it using only a keyboard? 5. Can you close the window using the escape key? If not, is there a clear and straightforward way to close the window with a keyboard? 6. If you have access to screen reader, try opening the window with the reader active. Does it respond appropriately? Although it is not a strict accessibility requirement, we also strongly recommend testing your lightbox on a mobile device. Do you have some sample code? The tools listed below conform to our standards. • Accessible Modal Window • Butterfly Lightbox Where can I find more information? • W3C – WAI-ARIA 1.0 Authoring Practices - Dialog (Modal) • NCZOnline – Making an accessible dialog box • Smashing Magazine – Making Modal Windows Better For Everyone Quick Reference – Lightboxes & Modal Dialogs Last updated April 2015 .

Load more