数据表格 - 无障碍功能

了解数据表格如何实现无障碍功能特性和指南，包括遵循国际标准的键盘导航。

指南

常见的无障碍功能一致性指南包括

• 全球公认的标准：WCAG
• 美国
  • ADA - 美国司法部
  • Section 508 - 美国联邦机构
• 欧洲：EAA (欧洲无障碍法案)

WCAG 2.1 有三个一致性级别：A、AA 和 AAA。AA 级别超过了无障碍功能的基本标准，是大多数组织的常见目标，因此这也是我们旨在支持的级别。

WAI-ARIA 创作实践提供了关于如何优化数据表格无障碍功能的宝贵信息。

密度

您可以更改行和列标题的密度。

从工具栏选择密度

要从工具栏启用密度选择，您可以执行以下操作之一

1. 通过将 slots.toolbar 属性传递给数据表格来启用默认工具栏组件。
2. 创建一个仅包含 GridToolbarDensitySelector 组件的特定工具栏，并使用数据表格 slots 属性中的 toolbar 属性应用它。

然后，用户可以使用工具栏中的密度选择菜单更改数据表格的密度，如下面的演示所示

要禁用密度选择菜单，请将 disableDensitySelector 属性传递给数据表格。

以编程方式设置密度

数据表格公开了 density 属性，该属性支持以下值

• standard (默认)
• compact
• comfortable

您可以通过以下方式之一以编程方式设置密度

1. 非受控 - 使用 initialState.density 属性初始化密度。

   <DataGrid
     initialState={{
       density: 'compact',
     }}
   />
   

   复制已复制(或 $keyC)

2. 受控 - 传递 density 和 onDensityChange 属性。对于更高级的用例，您还可以订阅 densityChange 网格事件。

   const [density, setDensity] = React.useState<GridDensity>('compact');
   
   return (
     <DataGrid
       density={density}
       onDensityChange={(newDensity) => setDensity(newDensity)}
     />
   );
   

   复制已复制(或 $keyC)

如果提供了 rowHeight 和 columnHeaderHeight 属性，则 density 属性将应用由它们确定的值。用户可以使用可选的工具栏密度选择器覆盖此设置。

以下演示显示了一个受控密度设置为 compact 的数据表格，并在用户使用工具栏中的密度选择器更改密度时将当前密度输出到控制台

键盘导航

数据表格监听来自用户的键盘交互，并响应单元格内的按键操作发出事件。

Tab 键顺序

根据 WAI-ARIA 创作实践，复合小部件包含的可聚焦元素中，只有一个应包含在页面 tab 键顺序中。要使元素包含在 tab 键顺序中，它需要具有 tabIndex 值为零或更大。

当用户聚焦于数据表格单元格时，第一个具有 tabIndex={0} 的内部元素会接收焦点。如果没有具有 tabIndex={0} 的元素，则焦点会设置在单元格本身上。

下面的两个数据表格说明了页面 tab 键顺序管理不当如何影响用户体验，使其难以浏览数据集

如果您使用 renderCell 方法自定义单元格渲染，则您有责任从页面 tab 键顺序中删除可聚焦元素。使用传递给 renderCell 参数的 tabIndex 属性来确定渲染的单元格是否具有焦点，以及是否因此应从 tab 键顺序中删除内部元素

renderCell: (params) => (
  <div>
    <Link tabIndex={params.tabIndex} href="/#">
      more info
    </Link>
  </div>
);

导航

选择

排序

分组和透视

API

• DataGrid
• DataGridPro
• DataGridPremium