Vue DataGrid - Accessibility

Accessibility Features Overview

NOTE
The overall accessibility level of your application depends on the DataGrid 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 DataGrid component meets a variety of Section 508 and WCAG 2.x compliance standards. Known exceptions:

Section 508 criteria WCAG 2.x criteria Exception description
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 1.1.1 Non-text Content (Level A) Drag icons do not have alt and aria-label attributes.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 1.3.1 Info and Relationships (Level A) The column fixing feature does not meet this criterion.
The filter menu button in filter row does not supply any accessibility information.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 1.4.3 Contrast (Minimum) (Level AA)
1.4.11 Non-text Contrast (Level AA 2.1 and 2.2)		 DataGrid does not support Windows High Contrast themes.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 1.3.2 Meaningful Sequence (Level A)
2.4.3 Focus Order (Level A)		 The column fixing feature in DataGrid 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.
- 2.4.11 Focus Not Obscured (Minimum) (Level AA 2.2 only) ColumnChooser and HeaderFilter in DataGrid do not meet this criterion.
- 2.5.7 Dragging Movements (Level AA 2.2 only)
  • ColumnChooser in 'drag' mode.
  • Grouping and row drag-and-drop.
  • Column reordering.
- 2.5.8 Target Size (Minimum) (Level AA 2.2 only) Command buttons and icons.
- 4.1.3 Status Messages (Level AA 2.1 and 2.2) DataGrid summaries when recalculateWhileEditing is enabled.
502.3.3 Row, Column, and Headers - DataGrid does not convey information about headers if the column fixing feature is enabled.
504.2.2 PDF Export - If you export a DataGrid to PDF, the following issues occur in the resulting document:
  • No document ‘title’ tag.
  • Pictures are exported without ‘alt’ attributes.
  • Pages do not have language settings. Languages of individual phrases also cannot be set at the grid export level.
  • No tags for table structures.

Keyboard Navigation

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

Key Action
← → ↑ ↓
  • Navigates through cells if no cell is in an editing state.
  • In the editing state, moves the cursor inside a cell or increases/decreases cell value (depending on the editor).
Shift + Mouse Wheel Scrolls content left/right if horizontal scrolling is active.
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 that cell/row 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 that cell/row 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 and clears the selection of previously selected rows.3
  • Changes sorting order if a column header is focused.
Ctrl + ↑ ↓ Navigates between a column header, filter row, data area, filter panel, and pager.
Ctrl + Space or Ctrl + Click Selects or clears the selection of the focused row.
Previously selected rows remain selected.7
Shift + Space or Shift + Click Selects or clears the selection of a range of rows between the last selected/deselected and the focused rows.7,8
Ctrl + A Selects all rows.6,9
Ctrl + F Focuses the search panel.10
PageUp / PageDown Navigates to the previous/next page. If scrolling.mode is "virtual", DataGrid scrolls to the value of DataGrid's row viewport height.
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 column sorting settings.11
  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. The selection.mode should be different from "none".
  7. The selection.mode should be "multiple".
  8. If the scrolling.mode is "virtual", the rows should be visible simultaneously. If the mode is "standard", the rows should be on one page.
  9. selection.allowSelectAll should be true.
  10. The search panel should be visible.
  11. The sorting.mode should be "multiple".

You can override these shortcuts or create your own. Refer to the following help topic for more information: Custom Keyboard Navigation.

Screen Reader Support

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