Just announced: Level Access and eSSENTIAL Accessibility agree to merge! Read more.

The use of “lightboxes” or “simulated dialogs” are becoming more and more common on web pages. Lightboxes appear as a pop-up window that is layered on top of other web content. Typically the other page content is grayed out. However, lightboxes can be modal or non-modal — the user is able to interact with only the light box or with other content on the page in addition to the lightbox. Use of light boxes raises a number of accessibility issues for several different user groups of people with disabilities. The primary areas of concern deal with keyboard access to light box content (as well as to close it). Proper reading and tab order of the content. Restricting user access to content outside of a modal lightbox and conveying the visual bounds of the box to users who cannot see. These structures can be made accessible using a variety of techniques if accessibility best practices are followed.

AMP (Accessibility Management Platform) https://amp.ssbbartgroup.com contains a set of best practices that describe the issues around lightbox accessibility under the media type “simulated dialogs”. One of the best practices focuses on using text that is positioned off-screen using CSS to indicate the beginning and end of a simulated dialog. This technique is similar to how screen readers indicate the beginning and end of a frame or Flash content by adding text into the virtual buffer or browse mode buffer. This added content will assist users of screen readers in understanding the relationship of lightbox content when the lightbox is on-screen. Meeting this best practice will assist a site in meeting the requirements of Section 508 – 1194.22 (a) Text Equivalents for Non-text Items as well as WCAG 1 – 1.1 Lack of Textual Equivalents and WCAG 2 – 1.1.1 Provide Text Alternatives for all Non-text Content. Sample code for indicating the beginning and end of a simulated dialog may look like the following:

// Compliant code should look similar to the following //
… This is the dialog’s content …