A11y: keyboard navigation within Transcript component

[Dananji]

Description

Transcript component can have a larger number of focus-able child elements. When using keyboard navigation within the Transcript component, the user must use Tab/Shift+Tab keys to navigate through these elements to get to the previous/next UI element on the page.

For an example: in the Ramp demo page, once the user navigates into the content within the Transcript component they have to Shift+Tab through all the transcript text elements to the top of the transcript component to reach a different UI tab.

This degrades the user experience when using the keyboard to navigate to some parts of the page.

To avoid this we can use a suitable design pattern incorporating ARIA-roles and tabindexes in these child elements within Transcript component to fix the keyboard navigation.

Possible solution:
Use Tab and Shift+Tab keys to navigate into and out of the component, while using Up and Down arrow keys to navigate within the Transcript components.

Done Looks Like

• Research and select a suitable design pattern(s) from https://www.w3.org/WAI/ARIA/apg/patterns/ that can be adapted to solve the issue (some possible patterns: listbox, radio group)
• Use ARIA-role and tab-index attributes from the design pattern within the component

[Dananji]

In a tab view, once a keyboard user reaches the end of the content within the tab panel, they can't navigate to the next tab using the Tab key. Pressing the Tab key would take the user the next focus-able element in the UI after the tab view.

[Dananji]

Solution adapted from design patterns: roving tabindex strategy. Documentation on roving tabindex strategy: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#keyboardnavigationinsidecomponents.

In this solution, the container of the transcript cues is implemented as a list with each transcript cue presented with a role button which is identified by screen readers as interactive element.

[Dananji]

Testing notes:

• Once the transcript component is reached via keyboard navigation, tab into the transcript content and use up/down arrow keys to navigate through the cues.
• To seek the player to the selected cue, press enter key.
• To reach the next tab in the tab view, press shift+tab to exit from the transcript content and use shift+tab as usual until you reach the tab label. And then use right arrow key to select the next tab.