Angular TreeList - Accessibility

Accessibility Features Overview

NOTE
The overall accessibility level of your application depends on the TreeList features that you use.
Accessibility Requirement Support Level
Right-to-Left Support
Keyboard Navigation Support
Screen Reader Support
Contrast Color Theme
Mobile Device Support
Lighthouse Accessibility Validation
Axe Accessibility Validation
WAVE Accessibility Validation
Section 508 Support
WCAG 2.x Support
  • - All component features meet the requirement
  • - Some component features may not meet the requirement
  • - Accessibility requirement is not supported

Accessibility Standards Compliance

The TreeList component complies to all Section 508 and WCAG 2.x standards criteria except the following:

Section 508 criteria WCAG 2.x criteria Exception description
- 1.1.1 Non-text Content (Level A) Drag icons do not have alt and aria-label attributes.
- 1.3.2 Meaningful Sequence (Level A)
2.4.3 Focus Order (Level A)		 The column fixing feature in TreeList does not meet this criterion.
11.5.2.12 Execution of available actions 2.1.1 Keyboard (Level A)
  • Keyboard navigation is not supported for ColumnChooser items in 'drag' mode.
  • The master-detail feature does not support keyboard navigation.
  • Adaptive rows cannot be expanded/collapsed using keyboard navigation.
502.3.3 Row, Column, and Headers - TreeList does not convey information about headers if the column fixing feature is enabled.
502.3.7 Hierarchical Relationships - TreeList only conveys information about the nesting level (aria-level).

Keyboard Navigation

A user can use the following keys to interact with the TreeList component:

Key Action
← → ↑ ↓
  • Navigates through cells if no cell is in the editing state.
  • In the editing state, moves cursor inside the cell or increases/decreases the cell value (depending on the editor).
Shift + Mouse Wheel Scrolls the content left/right if the horizontal scrolling is taking place.
Enter
  • Switches a cell to the editing state.1
  • Moves focus to the next cell.2
  • Saves changes made in a cell or row and switches it back to its normal state.
  • Executes an action on a focused element.
F2 Switches a cell to the editing state.3
Esc Cancels changes made in a cell or row and switches it back to its normal state.
Alt + ↓ Opens a drop-down editor (a select box4, a calendar5, etc.) in the editing state.
Space Selects the focused row. In multiple selection mode, also clears the selection.6
Ctrl + Space or Ctrl + Click Сlears the selection of the focused row in single selection mode.
Shift + Space Selects or clears the selection of a range of rows between the last selected or deselected and the focused rows.7,8,9
Ctrl + A Selects all rows.6,10
Ctrl + F Focuses the search panel.11
PageUp / PageDown Navigates to the previous/next page.
Tab / Shift + Tab Moves the focus one element forward/back.
Focuses the first/last element in the next/previous row if there are no more elements in the current row.
Shift + Click / Ctrl + Click
on a column header 		Applies/clears sorting settings of the column.12
Ctrl + → / Ctrl + ← Expands/collapses the focused row.
Ctrl + ↑ / Ctrl + ↓ Navigates between a column header, filter row, data area, filter panel, and pager.
  1. If the enterKeyAction is "startEdit".
  2. If the edititng.mode is "cell" or "batch" and the enterKeyAction is "moveFocus".
  3. The editing.mode should be "cell" or "batch".
  4. A select box appears in a cell of a lookup column.
  5. A calendar appears in a data cell when a column contains "date" type data.
  6. selection.mode must be different from "none".
  7. selection.mode must be "multiple".
  8. selection.recursive must be false.
  9. If the scrolling.mode is "virtual", the rows should be visible simultaneously. If the mode is "standard", the rows should be on one page.
  10. selection.allowSelectAll must be true.
  11. The search panel must be visible.
  12. sorting.mode must be "multiple".

You can override these shortcuts or create your own shortcuts using the onKeyDown event handler.

Screen Reader Support

The TreeList component supports screen readers and complies to WAI-ARIA standards. The exceptions are listed in the Accessibility Standards Compliance topic.