Accessibility in Blazor DataGrid

4 Dec 202518 minutes to read

The Syncfusion® Blazor DataGrid is built to support widely accepted accessibility standards. These standards help ensure that the component is usable by individuals with varying abilities, including those using assistive technologies.
Supported guidelines include:

Accessibility Criteria Compatibility Description
WCAG 2.2 Support Intermediate Supports most WCAG 2.2 guidelines, such as color contrast (1.4.3) and keyboard accessibility (2.1.1), with some limitations in complex interactions.
Section 508 Support Intermediate Complies with most Section 508 requirements, with minor gaps in advanced interactive elements.
Screen Reader Support Yes Implements ARIA roles (e.g., role="grid", aria-label) for compatibility with screen readers like JAWS and NVDA.
Right-To-Left Support Yes Supports right-to-left (RTL) layouts for languages like Arabic and Hebrew using the EnableRtl property.
Color Contrast Yes Meets WCAG 2.2 minimum contrast ratios for text and visual elements.
Mobile Device Support Yes Ensures touch-based navigation and compatibility with mobile screen readers.
Keyboard Navigation Support Intermediate Supports standard keyboard interactions (e.g., Tab, Arrow keys), with limitations in some advanced features like filtering.
Axe-core Accessibility Validation Intermediate Passes most Axe-core checks, with minor issues in specific ARIA configurations.

Support Level Indicators:

Yes - All features meet the accessibility requirement..
Intermediate - Some features meet the requirement; others may need improvement.
No - The feature does not meet the requirement.

WAI-ARIA attributes

The Syncfusion® Blazor DataGrid implements the WAI-ARIA grid pattern to support accessibility requirements. This ensures compatibility with assistive technologies such as screen readers, including JAWS and NVDA. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) attributes define roles, states, and properties that make the DataGrid accessible to individuals with disabilities.

Attribute Purpose
role=grid Identifies the element as a grid container.
role=row Defines a row containing cells within the grid.
role=rowgroup Groups multiple rows, such as in grouped or hierarchical grids.
role=columnheader Specifies a header cell providing column information.
role=gridcell Indicates a data cell within the grid.
role=button Represents interactive elements that function as buttons.
role=search Identifies search regions, such as in the toolbar.
role=presentation Hides elements from assistive technologies when not relevant.
role=navigation Defines pager elements for page navigation.
aria-colindex Specifies the column index relative to the total number of columns.
aria-rowindex Specifies the row index relative to the total number of rows.
aria-rowspan Indicates the number of rows spanned by a cell.
aria-colspan Indicates the number of columns spanned by a cell.
aria-selected Indicates the selection state of rows or cells.
aria-expanded Shows whether expand/collapse icons are expanded in hierarchical or grouped grids.
aria-sort Indicates sorting order (ascending or descending) for columns.
aria-owns Defines relationships between elements for visual or functional context.
aria-hidden Hides elements from assistive technologies.
aria-labelledby Provides accessible names for elements like checkboxes in filters or dialogs.
aria-describedby Describes features enabled in a header cell when it receives focus.

The Grid uses a two-table structure for header and content. ARIA roles and attributes are applied to parent and child elements to enhance screen reader support. This structure may trigger warnings in automated accessibility tools, but it does not affect how screen readers interpret the content.

Accessibility checker tools may report the following known issues:

  • aria-required-children: Appears when rendering the Grid without certain features or when toolbar and grouping are enabled. Ensure required child roles are present and suppress false positives if the structure is intentional.
  • color-contrast: Can occur when the search item is enabled in the toolbar. Adjust theme variables or apply custom CSS to meet WCAG 2.2 AA contrast requirements.
  • Invalid explicit ARIA roles on <tr>, <th>, <td>: These warnings result from applying roles like row, columnheader, and gridcell to support assistive technologies. Confirm that navigation remains functional and document exceptions for audits.
  • Role inheritance conflicts (role=”button” with rowgroup descendants): May appear when toolbar cells contain buttons. Maintain DOM hierarchy and verify focus order manually.
  • Content not within a landmark element: Add page-level landmarks (<header>, <main>, <nav>) to scope interactive regions.
  • Multiple elements with role=”search” lacking unique labels: Assign unique aria-label or aria-labelledby attributes to each search region.
  • Text contrast 4.10: Improve contrast ratio to at least 4.5:1 using CSS for standard text.
    * Grid lacks a programmatic name: Set aria-label or aria-labelledby on the main Grid container.
  • role=”rowgroup” not owned by a grid: Ensure grouped content remains within the element that has role=”grid”.

To improve accessibility, apply page landmarks, assign unique labels to search regions, and verify that color contrast meets WCAG 2.2 AA standards. When customizing styles, maintain visible focus indicators and a logical focus order.

Keyboard interaction

The Syncfusion® Blazor DataGrid supports keyboard navigation based on the ARIA grid keyboard interaction guidelines. This enables efficient navigation for scenarios involving keyboard input or assistive technologies.

The supported keyboard shortcuts are listed below.

Pager

Windows Mac Actions
Tab Tab Move focus to the next pager item.
Shift + Tab ⇧ + Tab Move focus to the previous pager item.
Enter / Space Enter / Space Select the currently focused page.
PageUp / ← ← Navigate to the previous page.
PageDown / → → Navigate to the next page.
Home / Ctrl + Alt + PageUp Fn + ← Navigate to the first page.
End / Ctrl + Alt + PageDown Fn + → Navigate to the last page.

Focus Elements

Windows Mac Actions
Home Fn + ← Move focus to the first cell of the focused row.
End Fn + → Move focus to the last cell of the focused row.
Ctrl + Home ⌘ + Fn + ← Move focus to the first cell of the first row in the Grid.
Ctrl + End ⌘ + Fn + → Move focus to the last cell of the last row in the Grid.
↑ ↑ Move the cell focus up from the focused cell.
↓ ↓ Move the cell focus down from the focused cell.
→ → Move the cell focus right from the focused cell.
← ← Move the cell focus left from the focused cell.
Alt + J ⌥ + J Move focus to the Grid.
Alt + W ⌥ + W Move focus to the Grid content element.

Selection

Windows Mac Actions
↑ ↑ Move the row/cell selection up.
↓ ↓ Move the row/cell selection down.
→ → Move the cell selection right.
← ← Move the cell selection left.
Shift + ↑ ⇧ + ↑ Extend the row/cell selection upward.
Shift + ↓ ⇧ + ↓ Extend the row/cell selection downward.
Shift + → ⇧ + → Extend the cell selection to the right.
Shift + ← ⇧ + ← Extend the cell selection to the left.
Enter Enter Move the row/cell selection down.
Shift + Enter ⇧ + Enter Move the row/cell selection up.
Esc Esc Deselect all selected rows/cells.
Ctrl + A ⌘ + A Select all rows/cells on the current page.

Grouping

Windows Mac Actions
Ctrl + ↑ ⌘ + ↑ Collapse all visible groups.
Ctrl + ↓ ⌘ + ↓ Expand all visible groups.
Ctrl + Space ⌘ + Space Group by the focused header column.
Alt + ↑ ⌥ + ↑ Collapse the selected group.
Alt + ↓ ⌥ + ↓ Expand the selected group.

Print

Windows Mac Actions
Ctrl + P ⌘ + P Print the Grid.

Clipboard

Windows Mac Actions
Ctrl + C ⌘ + C Copy selected rows or cells to the clipboard.
Ctrl + Shift + H ⌘ + ⇧ + H Copy selected rows or cells with headers to the clipboard.

Editing

Windows Mac Actions
F2 F2 Start editing the selected row (Normal/Dialog) or the selected cell (Batch).
Enter Enter Save the form (Normal/Dialog) or save the current cell and start editing the next row cell (Batch).
Insert ⌥ + Enter Create a new add form based on the NewRowPosition.
Delete Delete Delete the selected record.
Tab Tab Navigate to the next editable cell (Normal/Dialog) or save the current cell and start editing the next cell (Batch).
Shift + Tab ⇧ + Tab Navigate to the previous editable cell (Normal/Dialog) or save the current cell and start editing the previous cell (Batch).
Shift + Enter ⇧ + Enter Save the current cell and start editing the previous row cell (Batch).

Filtering

Windows Mac Actions
Alt + ↓ ⌥ + ↓ Open the filter menu (Excel, menu, or checkbox) when its header is focused.

Column Menu

Windows Mac Actions
Alt + ↓ Alt + ↓ Open the column menu when its header is focused.

Reordering

Windows Mac Actions
Ctrl + ← / → ⌘ + ← / → Reorder the focused header column to the left or right.

Sorting

| Windows | Mac | Actions |
|———————————————–|——————————————–|———————————————————|
| Ctrl + ← / → | ⌘ + ← / → | Reorder the focused header column to the left or right. |

On Mac devices, the Command and Control keys can be interchanged based on system settings. When this switch is active, use the Command key in place of Control, and Control in place of Command for keyboard interactions.
For example:

  • To group columns when a header is focused, use Command + Space.
  • To expand visible groups, use Ctrl + Down Arrow.

Ensuring accessibility

The Syncfusion® Blazor DataGrid is validated for accessibility using axe-core integrated with Playwright tests.
Accessibility compliance can be evaluated using the interactive sample, which demonstrates the Grid’s behavior with accessibility tools and validation steps.

See also