Keyboard accessibility and navigation

Last update: February 14, 2022

CREATED FOR:

  • Developer
  • User

All features exposed in the Basic Zoom, eCatalog, eCatalog Search, Flyout, Inline Zoom, Mixed Media, Spin, Video, Zoom, Carousel, Dimensional (3D), Interactive Image, Interactive Video, and Video360 viewer interface are keyboard accessible.

Keyboard accessibility and navigation

All features exposed in the Basic Zoom, eCatalog, eCatalog Search, Flyout, Inline Zoom, Mixed Media, Spin, Video, Zoom, Carousel, Dimensional (3D), Interactive Image, Interactive Video, and Video360 viewer interface are keyboard accessible.

An end user can navigate between viewer user interface elements using Tab and Shift+Tab keystrokes. Using Tab advances input focus to the next user interface element in the tabbing order; using Shift+Tab brings input focus back to the previous user interface element. The focus traversal follows the natural user interface element location on the screen and moves in a left-to-right, then top-to-bottom order.

Depending on the operating system and web browser settings, the user interface element that has input focus receives a visual focus indication. For example, the visual indicator can be a thin border rendered around the user interface element.

It is possible to disable or customize such focus highlight in the viewer CSS. In the table of contents of this Help system, under a specific viewer name (for example, Basic Zoom or Interactive Video), click Customizing name of viewer > Focus highlight.

Keystrokes supported by individual viewer user interface elements are-in most cases-obvious and easy to discover.

ActionKeystroke
Activate button componentsSpace or Enter key.
Zoom in or out+ or - , respectively.
Zoom resetEsc key.
PanUp, down, left, or right arrow key.
Spinning a 360-degree image

Use arrow keys when the image is in a reset state.

Use up or down arrow key when working with multi-dimensional spin sets.

Product swatch selectionUp, down, left, or right arrow key; Home or End key.
Product swatch activationSpace or Enter key.
Video and Interactive Video, gradual rewindLeft or up arrow key.
Video and Interactive Video, fast forwardRight or down arrow key.
Video and Interactive Video, go to beginning or endHome or End key, respectively.
Video and Interactive Video, control volume level when focus is on sliderUp, down, left, or right arrow key; Home or End key.
Video and Interactive Video, mutable volumeArrow, Home, and End keys to control volume level when focus is on its slider part.
Video, when modal dialog box is displayed, focus traversal becomes limited to dialog box controls only.Esc key to close the dialog box.
Carousel, change banner image in main viewLeft or right arrow key.
Carousel, hotspot selection, and hotspot activation

Hotspot selection: up, down, left, or right arrow key

Hotspot activation: Space or Enter key.

eCatalog, change the page image in the main viewLeft or right arrow keys.
eCatalog, thumbnail selectionArrow keys; Home and End key.
eCatalog, swatch activationSpace or Enter key.
eCatalog, hot spot selectionArrow keys.
eCatalog, activationSpace or Enter keys.
eCatalog, activating drop-down componentsDown arrow key; Space, or Enter key.
eCatalog, when focus is in drop-drown panelUse arrow keys to select a specific item in the panel before activating it.
eCatalog, when a modal dialog box is displayed, focus traversal becomes limited to dialog box controls only.Esc key to close the dialog box.

Experience Manager