ツリーグリッド

ツリーグリッド（treegrid）とは？

ツリーグリッドは、「行を開いたり閉じたりできる表（グリッド）」です。 メールのスレッド一覧、ファイル/フォルダの一覧、コメントツリーなど、 「表形式のデータ」と「階層（親 → 子）の展開」を同時に扱いたいときに使います。

ただの表（table）に「行をたためる」機能が加わったもの、と考えると分かりやすいです。 だからこそ、表としての構造（行・セル・見出し）と、ツリーとしての状態（開いている / 閉じている）の両方を支援技術に伝える必要があります。

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

見た目だけで作ると、次の人たちが取り残されます。

• キーボードだけで操作する人。行が <div> だとTab でフォーカスできず、矢印で行を移動することも、開閉することもできません。
• スクリーンリーダーを使う人。role が無いと「表」とも「行」とも認識されず、 どのセルがどの見出しの値なのか、そしてその行が開いているのか閉じているのかが伝わりません。

解決策は、role="treegrid" / role="row" / role="gridcell" で構造を伝え、 親行に aria-expanded を付けて開閉状態を伝えること。 そして矢印キーで操作できるようにすることです。

ライブデモ（推奨実装）

下は APG に沿って実装したメールのスレッド一覧です。マウスを使わず、キーボードだけで操作してみてください。

キーボード操作

必要な WAI-ARIA / ロール

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

マークアップ:

<table role="treegrid" aria-label="受信トレイ">
  <thead>
    <tr role="row">
      <th role="columnheader">差出人</th>
      <th role="columnheader">件名</th>
      <th role="columnheader">日時</th>
    </tr>
  </thead>
  <tbody>
    <!-- 親行：展開できる。aria-expanded で開閉を伝える -->
    <tr role="row"
        aria-level="1" aria-posinset="1" aria-setsize="2"
        aria-expanded="true" tabindex="0">
      <td role="gridcell">山田さん</td>
      <td role="gridcell">忘年会の件（3件）</td>
      <td role="gridcell">12/10</td>
    </tr>
    <!-- 子行：親が閉じている間は hidden -->
    <tr role="row" aria-level="2" aria-posinset="1" aria-setsize="2" tabindex="-1">
      <td role="gridcell">山田さん</td>
      <td role="gridcell">Re: 候補日のご相談</td>
      <td role="gridcell">12/10</td>
    </tr>
    <tr role="row" aria-level="2" aria-posinset="2" aria-setsize="2" tabindex="-1">
      <td role="gridcell">佐藤さん</td>
      <td role="gridcell">Re: お店を予約しました</td>
      <td role="gridcell">12/11</td>
    </tr>
  </tbody>
</table>

キーボード操作と状態同期のスクリプト:

const grid = document.querySelector('[role="treegrid"]');
const rows = Array.from(grid.querySelectorAll('tbody [role="row"]'));

// いま操作できる（画面に見えている）行だけを集める
const visibleRows = () => rows.filter((r) => !r.hidden);

// 1つだけ tabindex="0"、残りは "-1"（roving tabindex）
function focusRow(row) {
  rows.forEach((r) => r.setAttribute('tabindex', r === row ? '0' : '-1'));
  row.focus();
}

// 親行に続く、1段深い子行を開閉する
function setExpanded(row, open) {
  row.setAttribute('aria-expanded', String(open));
  let next = row.nextElementSibling;
  while (next && next.getAttribute('aria-level') === '2') {
    next.hidden = !open;        // 閉じる行はキーボード/読み上げの対象外に
    next = next.nextElementSibling;
  }
}

grid.addEventListener('keydown', (e) => {
  const row = e.target.closest('[role="row"]');
  if (!row) return;
  const list = visibleRows();
  const i = list.indexOf(row);
  const expandable = row.hasAttribute('aria-expanded');
  const isOpen = row.getAttribute('aria-expanded') === 'true';
  let target = null;

  switch (e.key) {
    case 'ArrowDown': target = list[Math.min(i + 1, list.length - 1)]; break;
    case 'ArrowUp':   target = list[Math.max(i - 1, 0)]; break;
    case 'Home':      target = list[0]; break;
    case 'End':       target = list[list.length - 1]; break;
    case 'ArrowRight':
      if (expandable && !isOpen) { e.preventDefault(); setExpanded(row, true); }
      return;
    case 'ArrowLeft':
      if (expandable && isOpen) { e.preventDefault(); setExpanded(row, false); }
      return;
    default: return;
  }
  if (target) { e.preventDefault(); focusRow(target); }
});

アンチパターン（Bad）

下は <div> と onclick だけで作った「見た目だけ同じ」スレッド一覧です。マウスでは開けますが、キーボードでは一切操作できません。上のデモと同じように Tab や矢印キーを試して、違いを体感してください。

<!-- ❌ アンチパターン -->
<div class="grid">
  <div class="head">差出人 / 件名 / 日時</div>
  <!-- div なのでフォーカスできず、行・セル・開閉の意味も持たない -->
  <div class="row" onclick="toggle('thread')">
    山田さん｜忘年会の件（3件）｜12/10 ＋
  </div>
  <div id="thread" style="display:none">
    <div class="row">山田さん｜Re: 候補日のご相談｜12/10</div>
    <div class="row">佐藤さん｜Re: お店を予約しました｜12/11</div>
  </div>
</div>

実装チェックリスト

• 外枠に role="treegrid" と aria-label（名前）が付いている
• 行は role="row"、セルは role="gridcell" / role="columnheader"
• 展開できる親行に aria-expanded があり、開閉と常に一致している
• 閉じている子行は hidden でキーボード/読み上げから外れている
• グリッド内は1タブストップで、↑↓ で行移動できる（roving tabindex）
• → で展開、← で折りたたみができる
• （任意）Home / End で最初・最後の行へ移動できる
• （任意）aria-level / aria-posinset / aria-setsize で階層と位置を伝える
• キーボードだけで操作でき、フォーカスが見える（フォーカスリングを消していない）

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