Opened 11 years ago

Closed 10 years ago

#14130 closed enhancement (patchwelcome)

Accessible lightbox

Reported by: Paul Christopher Owned by: Adam Peller
Priority: high Milestone: tbd
Component: Dojox Version: 1.6.1
Keywords: Cc:
Blocked By: Blocking:


Lightboxes are often used to zoom into an image or display a series of images. Dojox.image provides a lightbox implementation, however it is not accessible at all. ARIA tags are missing, the lightbox dialog has no title etc.

Thus I would like to see a basic lightbox implementation added to the dijit core library that provides all the mentioned stuff, encourages reuse of this accessible dijit lightbox prototype and thus keeps people from doing it wrong.

The new dijit lightbox is just a normal modal dialog, however the title bar is not at the top but at the bottom. The title is moved off the screen and tagged with ARIA tags.

The lightbox might be draggable and is centered on the screen by default.

Using a special parameter, you can specify whether the lightbox resizes itself when the browser window is resized. The browser resize triggers a lightbox-resize event one can connect/subscribe so as to change the lightbox content accordingly (e.g. so as to resize an image).

There are ways to add some buttons to the title bar at the bottom of the box. There is also a flag to turn off the close button. By doing this, you can use the lightbox e.g to display a AJAX-loading spinner in an accessible way.

Maybe we need also an option to provide the type of the lightbox (such as ARIA role= dialog for a normal lightbox and ARIA role= alertdialog for a AJAX spinner).

Furthermore to improve accessibility, the lightbox provides basic print support. Often lightboxes are used to give the directions etc. Print support could be easily achived by dynamically injecting some CSS which hides the rest of the page, i.e. only shows the lightbox div when @media=print.

Dynamically injected print.css:

--> Hide rest of the page

body > *:not(#lightbox_div) { display: none !important; }

--> ToDO: Hide close buttons, underlay

--> Move lightbox title on the screen / sheet!!!

See for some more thoughts on lightbox accessibility and limitations of current modal dialog implementations (e.g. you can take away focus from most modal dialogs using accesskeys linking to page anchors suchs as "Jump to the top").

Change History (2)

comment:1 Changed 11 years ago by bill

Component: AccessibilityDojox
Owner: changed from Becky Gibson to Adam Peller
Summary: Dijit accessible lightboxAccessible lightbox

Sorry, lightbox is far outside of dijit's charter.

Your code could be added to DojoX image as a competing lightbox, or replacement of the current lightbox, although the plan is to replace dojox with a package repository so you should probably just put the code there.

comment:2 Changed 10 years ago by Adam Peller

Resolution: patchwelcome
Status: newclosed
Note: See TracTickets for help on using tickets.