ツールバー

ツールバー（Toolbar）とは？

ツールバーは、関連する操作ボタンを1か所にまとめて並べた UI です。 文章エディタの「太字・斜体・下線」、画像編集の道具箱、メディアプレーヤーの再生コントロールなどが典型例です。

ボタンを並べるだけなら簡単ですが、アクセシビリティの肝は「ツールバー全体を1つのグループ＝1タブストップにする」ことです。

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

• キーボードだけで操作する人。ボタンを1つずつ Tab で辿る作りだと、 道具が10個あれば本文に着くまで Tab を10回。ツールバーはTab 1回で入り、中は ←→ で移動するのが約束事です。
• スクリーンリーダーを使う人。role="toolbar" とaria-label があると「○○ツールバー」とまとまりが伝わり、 中のボタン群を見通しよく扱えます。

この「グループで1タブストップ」を実現する仕組みがroving tabindex（フォーカスできる項目を常に1つだけにする手法）です。

ライブデモ（推奨実装）

下のツールバーは APG に沿った実装です。前後の入力欄と合わせてキーボードで操作してみてください。

キーボード操作

必要な WAI-ARIA / ロール

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

マークアップ:

<div role="toolbar" aria-label="文字の書式">
  <!-- 最初のボタンだけ tabindex="0"、残りは -1（roving tabindex） -->
  <button type="button" aria-pressed="false" tabindex="0">太字</button>
  <button type="button" aria-pressed="false" tabindex="-1">斜体</button>
  <button type="button" aria-pressed="false" tabindex="-1">下線</button>
</div>

roving tabindex と矢印キーのスクリプト:

document.querySelectorAll('[role="toolbar"]').forEach((bar) => {
  const items = Array.from(bar.querySelectorAll('button'));

  function focusItem(i) {
    items.forEach((b, n) => (b.tabIndex = n === i ? 0 : -1)); // 1つだけ 0
    items[i].focus();
  }

  items.forEach((btn, i) => {
    // トグルボタンは aria-pressed を反転
    btn.addEventListener('click', () => {
      btn.setAttribute('aria-pressed',
        String(btn.getAttribute('aria-pressed') !== 'true'));
    });
    btn.addEventListener('keydown', (e) => {
      let next = null;
      if (e.key === 'ArrowRight') next = (i + 1) % items.length;
      else if (e.key === 'ArrowLeft') next = (i - 1 + items.length) % items.length;
      else if (e.key === 'Home') next = 0;
      else if (e.key === 'End') next = items.length - 1;
      if (next !== null) { e.preventDefault(); focusItem(next); }
    });
  });
});

アンチパターン（Bad）

下のツールバーは、ボタンがすべて個別のタブストップになっていて矢印キーが効きません。 さらに「左寄せ」は <div> ボタンなのでフォーカスすらできません。

<!-- ❌ アンチパターン -->
<div class="toolbar">
  <!-- すべて個別のタブストップ。矢印キーで移動できず、Tab を何度も押す羽目に -->
  <button>太字</button>
  <button>斜体</button>
  <button>下線</button>
  <!-- さらに div ボタンはフォーカスすらできない -->
  <div class="btn" onclick="align('left')">左寄せ</div>
</div>

実装チェックリスト

• ボタン群を role="toolbar" + aria-label で囲んでいる
• ツールバー全体が 1タブストップ（Tab 1回で入る）
• roving tabindex：フォーカス中の1つだけ tabindex="0"、他は -1
• ←→ でボタン移動、Home/End で端へ移動できる
• 各ボタンはネイティブの <button>（div を使わない）
• トグルボタンに aria-pressed を付け、状態を更新している
• 抜けて戻ると最後にフォーカスしていたボタンに戻る
• フォーカスが見える（フォーカスリングを消していない）

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