グリッド

グリッド（データグリッド）とは？

グリッドは、表形式のデータをキーボードの矢印キーで自由に動き回れるように作った、対話的な UI です。表計算ソフトのように「セルからセルへ」フォーカスを移しながら 操作できるのが特徴です。

ここで言うグリッドは、CSS のレイアウト用 grid とは別物です。 また、ただ並べて見せるだけの表なら <table> を使うべきで、 グリッドにする必要はありません。「セル単位でフォーカスを動かしたい」「セル内に操作要素がある」 といった対話が必要なときにだけグリッドを使います。

なぜアクセシビリティが大事なの？

表を「触れるもの」にするほど、設計を誤ると操作不能な人が出ます。

• キーボードだけで操作する人。セルに onclick を付けただけだと、Tab でも矢印でもセルに到達できず、まったく操作できません。
• スクリーンリーダーを使う人。role="grid" が無いと「グリッド」と 認識されず、行・列・セルの構造や「いま何行目の何列目か」が伝わりません。

解決策は、role="grid" で構造を宣言し、矢印キーでフォーカスを動かす （ローミング tabindex）ことです。グリッド全体を1つのタブストップにして、 中は矢印で移動させます。

ライブデモ（推奨実装）

下の社員一覧は APG に沿った対話的グリッドです。マウスを使わず、Tab で一度フォーカスを入れたら、あとは矢印キーだけで セル間を移動してみてください。

キーボード操作

必要な WAI-ARIA / ロール

実装：推奨パターン（Good）

マークアップ:

<div role="grid" aria-labelledby="grid-cap">
  <div role="row">
    <span role="columnheader" tabindex="-1">社員ID</span>
    <span role="columnheader" tabindex="-1">氏名</span>
    <span role="columnheader" tabindex="-1">部署</span>
    <span role="columnheader" tabindex="-1">内線</span>
  </div>
  <div role="row">
    <!-- グリッド全体で最初のセルだけ tabindex="0"（残りは -1） -->
    <span role="gridcell" tabindex="0">E-001</span>
    <span role="gridcell" tabindex="-1">佐藤 花子</span>
    <span role="gridcell" tabindex="-1">営業部</span>
    <span role="gridcell" tabindex="-1">1201</span>
  </div>
  <!-- 以降の行も role="row" + role="gridcell" tabindex="-1" を並べる -->
</div>

キーボード操作のスクリプト（フォーカス移動と tabindex の付け替えがすべて）:

const grid = document.getElementById('grid-good');
if (grid) {
  // 2次元配列としてセルを把握する（行ごとのセル配列）
  const rows = Array.from(grid.querySelectorAll<HTMLElement>('[role="row"]'));
  const cells = rows.map((row) =>
    Array.from(row.querySelectorAll<HTMLElement>('[role="columnheader"],[role="gridcell"]'))
  );

  let r = 0; // 現在の行
  let c = 0; // 現在の列

  // 現在位置のセルだけ tabindex="0"、他は -1 にして 1タブストップにする
  function focusCell(nextR: number, nextC: number) {
    const maxR = cells.length - 1;
    r = Math.max(0, Math.min(nextR, maxR));
    const maxC = cells[r].length - 1;
    c = Math.max(0, Math.min(nextC, maxC));
    cells.flat().forEach((cell) => cell.setAttribute('tabindex', '-1'));
    const target = cells[r][c];
    target.setAttribute('tabindex', '0');
    target.focus();
  }

  grid.addEventListener('keydown', (e) => {
    switch (e.key) {
      case 'ArrowRight': focusCell(r, c + 1); break;
      case 'ArrowLeft':  focusCell(r, c - 1); break;
      case 'ArrowDown':  focusCell(r + 1, c); break;
      case 'ArrowUp':    focusCell(r - 1, c); break;
      case 'Home':
        if (e.ctrlKey) focusCell(0, 0);            // 先頭セルへ
        else focusCell(r, 0);                       // 行の先頭へ
        break;
      case 'End':
        if (e.ctrlKey) focusCell(cells.length - 1, // 末尾セルへ
          cells[cells.length - 1].length - 1);
        else focusCell(r, cells[r].length - 1);    // 行の末尾へ
        break;
      default: return; // 関係ないキーはブラウザに任せる
    }
    e.preventDefault();
  });

  // クリックしたセルにも現在位置を合わせる
  cells.forEach((row, ri) =>
    row.forEach((cell, ci) => {
      cell.addEventListener('click', () => focusCell(ri, ci));
    })
  );
}

アンチパターン（Bad）

下は <table> のセルに onclick を付けただけの「対話できるつもり」の表です。マウスでは選べますが、キーボードでは一切操作できません。上のデモと同じように Tab → 矢印キーを試して、違いを体感してください。

<!-- ❌ アンチパターン -->
<!-- 見た目は表だが「対話的グリッド」としては成立していない -->
<table>
  <tr>
    <th>社員ID</th><th>氏名</th><th>部署</th><th>内線</th>
  </tr>
  <tr>
    <!-- onclick だけ。role も tabindex もキー処理も無い -->
    <td onclick="select(this)">E-001</td>
    <td onclick="select(this)">佐藤 花子</td>
    <td onclick="select(this)">営業部</td>
    <td onclick="select(this)">1201</td>
  </tr>
</table>

実装チェックリスト

• 外枠に role="grid" と名前（aria-label / aria-labelledby）がある
• 行は role="row"、見出しは role="columnheader"、セルは role="gridcell"
• 常に1つのセルだけ tabindex="0"、残りは "-1"（ローミング tabindex）
• 矢印キーでセル移動でき、Home/End で行の端へ移動できる
• （推奨）Ctrl+Home/End でグリッドの端へ移動できる
• Tab はセル移動ではなく「グリッドの外へ出る」キーになっている
• キーボードだけで操作でき、フォーカスが見える（フォーカスリングを消していない）

原文（英語）:Grid Pattern — W3C APG（新しいタブで開きます）