Accessibility in Flutter DataGrid (SfDataGrid)

8 Jul 202613 minutes to read

The SfDataGrid widget is designed with comprehensive accessibility features to ensure all users, including those using assistive technologies, can interact with data effectively. This section covers built-in accessibility support and best practices for implementing an accessible data grid experience.

Screen reader support

The SfDataGrid supports screen readers through the following interactions on Android and iOS platforms:

• Cell contents can be read by tapping the required cell.
• Adjacent cell content can be navigated by swiping left or right.

• Scroll the DataGrid vertically and horizontally by dragging with two fingers.

• Cell contents can be read by tapping the required cell.
• Read adjacent cell content by swiping right or left.
• Scroll the DataGrid vertically and horizontally by dragging with two fingers.

Sufficient contrast

The SfDataGrid provides sufficient color contrast to make cell content more readable and compliant with WCAG 2.1 AA standards. Customize the appearance of DataGrid elements using the following properties:

• currentCellStyle — Styling for the currently selected cell
• frozenPaneElevation — Shadow depth for frozen panes
• frozenPaneLineColor — Border color for frozen pane dividers
• gridLineColor — Color of grid lines between cells
• headerColor — Background color of column headers
• headerHoverColor — Header background color on hover
• selectionColor — Background color for selected cells
• sortIconColor — Color of sort indicator icons

Large fonts

Since SfDataGrid receives widgets from the user for each cell, the font size in those widgets automatically adjusts based on OS text scale settings on Android and iOS platforms. To ensure cell content remains clearly visible, row heights adjust automatically based on the MediaQueryData.textScaleFactor.

The following example demonstrates how to apply a custom text scale factor:

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

@override
Widget build(BuildContext context) {
  return MediaQuery(
    data: MediaQueryData(textScaleFactor: 1.5),
    child: SfDataGrid(
      source: _employeeDataSource, 
      columns: <GridColumn>[
        GridColumn(
          columnName: 'id',
          label: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            alignment: Alignment.centerRight,
            child: Text(
              'ID',
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
        GridColumn(
          columnName: 'name',
          label: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            alignment: Alignment.centerLeft,
            child: Text(
              'Name',
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
        GridColumn(
          columnName: 'salary',
          label: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            alignment: Alignment.centerRight,
            child: Text(
              'Salary',
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
        GridColumn(
          columnName: 'designation',
          label: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            alignment: Alignment.centerLeft,
            child: Text(
              'Designation',
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
      ],
    ),
  );
}

Keyboard navigation

The SfDataGrid supports keyboard navigation for enhanced accessibility and desktop usability. Enable keyboard navigation by configuring the selectionMode and navigationMode properties.

Supported keyboard interactions:

• Arrow keys — Navigate between cells (up, down, left, right)
• Tab/Shift+Tab — Move focus to the next/previous cell
• Enter — Select/activate the current cell
• Ctrl+Home — Navigate to the first cell
• Ctrl+End — Navigate to the last cell
• Page Up/Page Down — Scroll vertically by one page

For detailed keyboard behavior documentation, refer to the keyboard behavior guide.

The following example enables keyboard navigation:

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfDataGrid(
        source: _employeeDataSource,
        selectionMode: SelectionMode.single,
        navigationMode: GridNavigationMode.cell,
        columns: <GridColumn>[
          GridColumn(
            columnName: 'id',
            label: Container(
              padding: EdgeInsets.all(16.0),
              alignment: Alignment.center,
              child: Text('ID'),
            ),
          ),
          GridColumn(
            columnName: 'name',
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Name'),
            ),
          ),
          GridColumn(
            columnName: 'designation',
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Designation', overflow: TextOverflow.ellipsis),
            ),
          ),
          GridColumn(
            columnName: 'salary',
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Salary'),
            ),
          ),
        ],
      ),
    );
  }

Visual density

Row heights in SfDataGrid automatically adjust based on the visualDensity property. This allows you to create compact or spacious layouts that adapt to user preferences and device capabilities.

DART

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Theme(
        data: ThemeData(visualDensity: VisualDensity.compact),
        child: SfDataGrid(
          source: _employeeDataSource,
          columns: <GridColumn>[
            GridColumn(
              columnName: 'id',
              label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerRight,
                child: Text('ID', overflow: TextOverflow.ellipsis),
              ),
            ),
            GridColumn(
              columnName: 'name',
              label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerLeft,
                child: Text('Name', overflow: TextOverflow.ellipsis),
              ),
            ),
            GridColumn(
              columnName: 'salary',
              label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerRight,
                child: Text('Salary', overflow: TextOverflow.ellipsis),
              ),
            ),
            GridColumn(
              columnName: 'designation',
              label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerLeft,
                child: Text('Designation', overflow: TextOverflow.ellipsis),
              ),
            ),
          ],
        ),
      ),
    );
  }