This article covers the experience of viewing and navigating microapps with a keyboard. If you are interested in building accessibility into your microapp read Set the Tabbing Order for your Microapp.
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 supported keystrokes are:
- [TAB]
- [ENTER]
- [COMMAND]
- [UP/DOWN] arrow keys
- [LEFT/RIGHT] arrow keys
Keyboard Navigation Support Behavior
The following table outlines the available keystrokes commands and the expected behavior with each tile.
| Interaction | Keystroke | Notes |
|---|---|---|
| Navigating to interactive elements |
[TAB] - Navigate to the next interactive element [SHIFT] + [TAB] - Navigate to a 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 [TAB] 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 |
[SPACEBAR] can be used alternatively with [ENTER]