Zone5

Keyboard Shortcuts Reference

All keyboard shortcuts for lightbox navigation.

KeyAction
← / ArrowLeftPrevious image
→ / ArrowRightNext image
EscapeClose lightbox

Wrapping

Navigation wraps around:

  • Pressing → on the last image goes to the first
  • Pressing ← on the first image goes to the last

When multiple Zone5 components are on a page, keyboard navigation moves through all registered images in order:

<!-- Gallery 1: images 1-5 -->
<Zone5 images={firstGallery} />

<!-- Gallery 2: images 6-10 -->
<Zone5 images={secondGallery} />

<!-- Arrow keys navigate through all 10 images -->

Focus Management

Button Focus

When the lightbox opens, focus moves to the lightbox container. Tab navigation cycles through:

  1. Close button
  2. Previous button
  3. Next button

Screen Reader Support

Buttons include aria-label attributes:

  • Close button: “Close lightbox”
  • Previous button: “Previous image”
  • Next button: “Next image”

Touch Gestures

On touch devices, the lightbox supports:

GestureAction
Tap close buttonClose lightbox
Tap prev/nextNavigate

Swipe gestures are not currently implemented.

Mouse Interaction

ActionResult
Click outside imageClose lightbox
Click prev/next buttonsNavigate
Click close buttonClose lightbox

URL State

Opening an image updates the URL:

https://example.com/gallery?z5=abc123

This allows:

  • Sharing direct links to specific images
  • Browser back button closes lightbox
  • Bookmarking specific images

Implementation Details

Keyboard handling is implemented in Zone5Lightbox using Svelte’s onkeydown:

<svelte:window onkeydown={handleKeydown} />

The handler checks for:

  • ArrowLeft → calls registry.prev()
  • ArrowRight → calls registry.next()
  • Escape → closes lightbox

Accessibility Recommendations

Focus Trap

The lightbox traps focus within its buttons to prevent tabbing to background content.

Reduced Motion

Users with prefers-reduced-motion should see instant transitions:

@media (prefers-reduced-motion: reduce) {
  [data-zone5-lightbox] {
    transition: none;
  }
}