資料格線 - 無障礙功能

了解資料格線如何實作無障礙功能和指南，包括遵循國際標準的鍵盤導航。

指南

常見的無障礙功能一致性指南包括

• 全球公認的標準：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