Accessibility | How to navigate microapps using a keyboard

Follow

Tiled wants to help create engaging microapps for people of all abilities. Many aspects of a microapp’s accessibility are determined by the designer of a microapp, but we are working toward making both microapps and our own interface accessible where possible.

We have introduced keyboard support to allow users to navigate to each interactive element on the microapp screen. The main keystrokes supported are [TAB], [ENTER], [UP/DOWN] and [LEFT/RIGHT] arrow keys. 

Keyboard Navigation Support Behavior

The following table provides you with details of the new keystrokes available and the expected behavior with each tile.

Interaction

Keystroke

Note

Navigating to interactive elements

[TAB] - use this key to navigate to    the next interactive element

[SHIFT] + [TAB] - navigates to  previous interactive element

User will see keyboard focus indicators  present

 

Tile - Hotspot

Activating an interactive element

[ENTER] - Activate the link

[SHIFT]+[ENTER] - Activate the link in a new window

[COMMAND]+[ENTER] - Activate the link in a new tab

 Linking to pages within the microapp   will not open in a new window or tab

 

Tile - Image

Activating an interactive element

If “Fullscreen” is selected:

[ENTER] - Activate the link (opens the image in full screen)

If “Link to Page” is selected:

[ENTER] - Activate the link

[SHIFT]+[ENTER] - Activate the link in a new window

[COMMAND]+[ENTER] - Activate the link in a new tab

If “Do nothing” is configured for the image, keyboard shortcuts are irrelevant.

 

 

 

Tile - Video

Activating an interactive element

If “Fullscreen” is selected:

[ENTER] - Activate the link (opens the video in full screen)

If “Play/Pause” is selected:

[ENTER] - Activate the link and plays/pauses the video

If “Show controls” is selected:

Each video player controls should be “focusable” using the [TAB] key

Once a control is selected, the user should be able to use [ENTER] or [SPACE] to interact with the control.

If “Do nothing” is configured for the video, keyboard shortcuts are irrelevant.

 

 

 

Tile - Scroll

Activating an interactive element

If scroll direction is “Vertical”

[UP]/[DOWN] - Scroll vertically

If scroll direction is “Horizontal”

[LEFT]/[RIGHT] - Scroll horizontally

The scroll tile should be focusable using the [TAB] key.

Once the scroll tile is “focused” then the user should be able to use the arrow keys to control the scroll position.

 

Tile - Gallery

Activating an interactive element

If “Fullscreen” is selected:

[ENTER] - Activate the link (opens the image in full screen)

If “do nothing” is selected:

[LEFT]/[RIGHT] - Previous and next images 

 

Overlay

Activating an interactive element

If overlay is displayed:

[ESC] - Close the overlay

 

 

If other interactive elements exist on the overlay, the defined keystrokes and behaviors specified for each interactive element should be respected.

 

Overlay close button is focusable and can be used to close the overlay by navigating using [TAB] and using [ENTER] or [SPACEBAR] to activate.

Page

Activating an interactive element

[LEFT]/[RIGHT] - Previous and next page

[UP]/[DOWN] - Previous and next page

 

 

NOTE: [SPACEBAR] can be used alternatively with [ENTER]

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.