Keyboard Support

This document provides information about the requirements to make UIs compliant with the keyboard accessibility guidelines.

The first section of this documents contains a list of "definition of done" checklist items, which developers and designers can reference to make the UI compliant. The second section of this document explains these checklist items in detail.

Checklist

Use these "definition of done" checklists to make the UI compliant with the keyboard accessibility guidelines. Related checklist items are grouped together for easier understanding.

1. Tab Chain

The screen has a “tab chain” and the focus can be moved between elements on the page with keyboard controls.

2. Item Actions

Elements can be interacted with using keyboard controls.

3. Text Editing

Elements with text editing can be used with keyboard controls

4. Navigation

Pages can be navigated with the keyboard

5. Scrolling and Zooming

Scrolling, panning, and zooming can be done with keyboard

6. Special

Miscellaneous use-cases for keyboard controls

Details

More detailed explanations of the checklist items.

“Selection in lists and grids can be made using keyboard controls”

Move the focus state of items in lists (e.g. select) and grids (e.g. calendar) with the arrow keys (up, down, left, right), and other navigation keys (home, end)

“Complex layouts can be navigated with tab and arrow keys”

Expands classic “tabbable” navigation scheme with arrow keys in certain use cases, e.g. in tile lists, action buttons in a table, cascading menus.

“Tab chains are expanded with static content for extra accessibility”

Making non-interactive items “tabbable” so they can be interacted with using the keyboard. This is good for screen-readers.

“Elements with actions can be triggered by keyboard controls”

Triggering the focused element’s function in the case of buttons, links, menus and menu items, etc.

Interacting with links:

“Text cursor can be moved with keyboard controls”

Move the cursor in a text box with the Arrow keys, Home and End keys, and Ctrl + Left arrow and Ctrl + Right arrow keystrokes (i.e. word step).

“Pagination component can be interacted with using keyboard controls without moving the focus on it”

Paginate without having to select the pagination controls, e.g. in datagrids.

“Deletable items can be deleted using keyboard controls”

Use cases: Input fields (text input, number input, date input, etc.), Select, Multiselect

“Drill down details for an element can be accessed with keyboard controls”

Access further options for a focused element, e.g. file lists.

“Floating elements can be closed with Escape key”

Returns to a “safe state” by hitting the Escape key, e.g. cancelling dialogs, closing popover lists and panels.

“Focus can be moved inside to elements with embedded navigation options, using keyboard controls”

Automatically switching the focus when the user navigates into a child element.

• Window / page: default focus location (if there’s any), or last focus location.
• Dialog: first interactive element, or the first defined autofocus element.
• Containers: first interactive element, or the first defined autofocus element.
• List-like elements: first item.

“Focus can be moved inside the elements of a container by using keyboard controls”

Automatically switching the focus to a child element when the user navigates into a container.

“Editable elements can be edited using only keyboard controls”

Users can apply changes to elements in focus.

Explicit manipulation: the user has to switch to “edit mode” by pressing F2 or Enter before they can edit the content of the element, e.g. datetime picker.

Implicit manipulation: the user can edit the content of the element in focus without switching to an “edit mode”, e.g. text input field.

Accept changes: F2, Enter, Tab.

Revert changes: Escape. Undo and redo should be implemented.

“The layout adapts to resizing and zooming.”

Create layouts which avoid unnecessary scrollbars and create controls that dynamically adapt to a given size by reordering and resizing.

Use cases: Zooming, Resizing, Toggle full screen, Close view, Moving elements

Controls:

• Click, drag, release (wait, attach)
• Horizontal scrollability controls: Alt+PageUp, Al+PageDown

Layout rules:

• Outer size of a component defines the inner size
• Controls adapt to the given size by using: Truncation, scrolling, panning and zooming
• Adapt a layout policy for resizing based on constraints or percentages, auto-resizing, min and max size variables, dynamic whitespaces

Rules for resizing:

• Provide affordance for resizable elements
• Avoid scrollbars wherever possible, especially horizontally.
• Retain focus when scrolling
• Support scrolling or an overflow mechanism for every control
• Every scrollable control provides scrollability by clicking in the background area

“Media players support keyboard controls”

Use shortcuts to control video and music playback.

“Pages can be zoomed using keyboard controls”

Zoom the page using the keyboard. Zoom should follow the cursor when possible (e.g. in AC canvas).

“Page contains “tab chains” and elements can be focused by keyboard controls”

Elements are “tabbable”, and a “tab chain” exists on the page. Generally, a “tab chain” should be structured the way we read: from left to right, then the next line.

“Tab chain” modes:

• Non-accessibility mode: does not contain inactive elements, static elements
• Accessibility mode: contains inactive elements, description of static elements, images (with alt text)

Tabbing in scrollable containers: Scrollable containers should be automatically scrolled so the elements in focus are visible to the user (i.e. in the viewport).

“Complex components can be navigated by keyboard controls”

Make complex components “tabbable”, e.g. calendars, toolbars.

Moving the focus in “composites” is usually directional, so a regular “tab chain” can be applicable within a component.

Controls:

• Move the focus by using Tab, Shift + Tab, and Arrow keys.

“Contextual menus can be operated with keyboard controls”

Menu with additional contextual functions for an item (where available). These menus are usually accessible by right clicking.

“Dialogs can be cancelled or accepted by keyboard controls”

Closes dialog by either cancelling or accepting its contents.

“Expandable elements can be opened and closed with keyboard controls”

Open and close expandable elements, e.g. accordions, tree view.

“Selection inside a grid-like interface is supported by keyboard controls”

Select items in a grid, e.g. tables, block editors.

“Elements in the “tab chain” are grouped and these groups can be navigated with keyboard controls”

Make tabbable groups in the “tab chain”. Groups are collections of contextually similar elements, e.g. “sections” in a form.

“Tooltips can be displayed or hidden with keyboard controls”

Tooltips can be displayed or hidden with keyboard controls.

“Text inputs that require specific case (uppercase, lowercase) are automatically formatted”

Text inputs help users by automatically formatting values in the right case (lowercase or uppercase) as the user types. E.g. serial number text input that requires value in all uppercase.

“Scrollable containers can be scrolled with keyboard control”

“Lists or groups of graphical elements can be selected or multi-selected and be simultaneously edited.”

Graphic elements can be navigated with keyboard controls, e.g. charts.

“Draggable canvases can be navigated with keyboard controls”

Pannable canvases can be navigated with keyboard controls, e.g. AC / RTI canvas, Google Maps embed.

“Text editors in the UI support paragraph-navigation with keyboard controls”

Jump between paragraphs (, chapters, segments, or clusters). Applicable in text editors.

“List of properties for objects can be edited with keyboard controls”

Edit an attribute in a list of properties for an object, e.g. chart.

“Scrubbing interface can be accessed with keyboard controls”

Show preview while pointing to a certain place or index element in a huge set of items e.g. thumbnail in galleries or time lines, preview of items in a long list. The selection can also be triggered with clicking or releasing.

“The selected value of list-based inputs can be changed without opening the list, with keyboard controls”

Sequence quick access enables users to manipulate the selected option in a list-type input (e.g. select) without opening the popover list.

“Multi-step interfaces can be navigated with keyboard controls”

Wizards (multi-step dialogs and pages, e.g. tactics dialogs, VCE page) can be navigated with keyboard controls.

Page types:

• Mandatory pages: contain required field.
• Optional pages: only contain optional fields, these steps can be skipped.