Focus not moved when lightbox is loaded

[tomkiss]

Hi there,

There is a missing accessibility opportunity on simple lightbox.

When the lightbox is loaded, the focus remains on the previously clicked/selected element.

This prevents the user from being able to tab to the close or other buttons, for more accessible keyboard control.

A common way to achieve this is to:

• When a link or button is clicked to launch the lightbox, record the triggering element from event.target.
• Shift focus to the containing element of the lightbox (tabindex="0" may be required to achieve this).
• When the lightbox is closed, return focus() to the previously clicked element, using the recorded value.

This should enable the user to launch the lightbox via the keyboard, navigate and interact with it and then close it without a cursor input device, helping to improve accessibility support.

The outline: none on the :focus pseudo-element would also need updating.

[andreknieriem]

Hey, interesting idea. I will take a look.

[andreknieriem]

Sorry, I just wanted to do this, but why? If the lightbox is open you don't need to tab. Just use the arrow keys or the escape key to use the lightbox.

[tomkiss]

Well, it's the subtle difference between keyboard shortcuts and the user being able to tab-navigate the interface which they are presented with. There's no visual clue or instruction that ESC will close the lightbox, but there is a close icon, which they are unable to access without a pointer device.

Another way to look at the same problem is that the focused element is still outside the lightbox, so tab navigation continues to be able to browse and navigate the page underneath the lightbox, whilst it is active.

Accessibility Insights is a useful tool for identifying and fixing a broad range of accessibility issues on websites. I hope this is helpful.