HTML Academy · レッスン

aria-selectedとタブパターン

Q: 「aria-selectedとタブパターン」で何を学びますか？

キーボードで操作できるタブインターフェースを実装します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

キーボードで操作できるタブインターフェースを実装します

「aria-selectedとタブパターン」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

タブパターンの概要

タブインターフェースには、次の3つのARIAコンポーネントがあります：

role="tablist" — すべてのタブのコンテナー
role="tab" — 個々のタブボタン
role="tabpanel" — 各タブのコンテンツパネル

ARIAタブの構造

アクセシブルなタブの完全なマークアップ：

<div role="tablist" aria-label="Account Settings">
  <button role="tab" id="tab-1" aria-selected="true"
          aria-controls="panel-1">Profile</button>
  <button role="tab" id="tab-2" aria-selected="false"
          aria-controls="panel-2" tabindex="-1">Security</button>
  <button role="tab" id="tab-3" aria-selected="false"
          aria-controls="panel-3" tabindex="-1">Notifications</button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Profile content...
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Security content...
</div>

aria-selected

aria-selected は、選択コンテキスト内で現在アクティブな項目を示します。

<!-- In a tablist: -->
<button role="tab" aria-selected="true">Active Tab</button>
<button role="tab" aria-selected="false">Other Tab</button>

<!-- In a listbox: -->
<ul role="listbox">
  <li role="option" aria-selected="false">Option 1</li>
  <li role="option" aria-selected="true">Option 2</li>
</ul>

タブのキーボードパターン

ARIAパターンでは、タブに固有のキーボード動作が定義されています：

Tab — タブリスト内の選択されたタブにフォーカスを移動します
Arrow keys — タブ間を順番に移動します
もう一度Tab — タブリストからアクティブなパネルへフォーカスを移動します
Home — 最初のタブに移動します
End — 最後のタブに移動します

タブのキーボード操作の実装

矢印キーを使用したタブのキーボードナビゲーション：

const tabs = document.querySelectorAll('[role="tab"]');

tabs.forEach((tab, i) => {
  tab.addEventListener('keydown', (e) => {
    let target;
    if (e.key === 'ArrowRight') target = tabs[(i + 1) % tabs.length];
    if (e.key === 'ArrowLeft') target = tabs[(i - 1 + tabs.length) % tabs.length];
    if (e.key === 'Home') target = tabs[0];
    if (e.key === 'End') target = tabs[tabs.length - 1];

    if (target) {
      activateTab(target);
      target.focus();
    }
  });
});

activateTab関数

タブを切り替えてARIAを更新する関数：

function activateTab(selectedTab) {
  // Deactivate all tabs:
  document.querySelectorAll('[role="tab"]').forEach(tab => {
    tab.setAttribute('aria-selected', 'false');
    tab.setAttribute('tabindex', '-1');
    document.getElementById(tab.getAttribute('aria-controls')).hidden = true;
  });

  // Activate selected tab:
  selectedTab.setAttribute('aria-selected', 'true');
  selectedTab.setAttribute('tabindex', '0');
  document.getElementById(selectedTab.getAttribute('aria-controls')).hidden = false;
}

roving tabindexパターン

タブグループではroving tabindexを使用して、タブのうち1つだけをタブ順序に含めます：

<!-- Only the selected tab has tabindex=0 -->
<button role="tab" aria-selected="true" tabindex="0">Active</button>
<button role="tab" aria-selected="false" tabindex="-1">Other</button>
<button role="tab" aria-selected="false" tabindex="-1">Another</button>

<!-- When user arrows to a new tab:
     1. Set new tab tabindex=0
     2. Set old tab tabindex=-1
     3. Focus new tab -->

aria-selectedとaria-checkedの違い

aria-selectedとaria-checkedは異なるコンテキストで使用します：

aria-selected — 選択ウィジェットで使用します：タブ、listbox内のoption、tree内の項目
aria-checked — チェック可能な項目で使用します：チェックボックス、チェックマーク付きのメニュー項目

tabpanelのフォーカス

タブを有効にするとパネルは表示されますが、フォーカスはタブに残ります：

// Users can then Tab to move into the panel content
// The panel should not automatically receive focus

// Exception: if the panel is very long, consider moving focus
// to the panel heading for long-form content tabs

// Panel should have tabindex=-1 for programmatic focus:
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="-1">

自動アクティベーションと手動アクティベーション

タブをアクティベートする2つのモデル：

自動 — ユーザーが矢印キーで移動するとタブがアクティベートされます（よりシンプルなUX）
手動 — 矢印キーで移動した後、ユーザーがEnter/Spaceを押してアクティベートする必要があります（タブのコンテンツの読み込みが必要な場合に適しています）

アクセシブルなタブのスタイル設定

アクセシブルなタブの選択状態に対応するCSS：

[role="tab"] {
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1rem;
  cursor: pointer;
}

[role="tab"][aria-selected="true"] {
  border-bottom-color: #0070f3;
  font-weight: bold;
}

/* :focus-visible for keyboard users: */
[role="tab"]:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: -2px;
}

確認問題

タブリスト内のキーボードナビゲーションは、どのように動作すべきですか？

まとめ：aria-selectedとタブ

タブパターンの要点：

tablist → tab（aria-selected）→ tabpanel（aria-labelledby）
矢印キーでタブ間を移動し、Tabでパネルに入ります
roving tabindex：アクティブなタブだけがtabindex=0になります
アクティブなタブにはaria-selected="true"を設定します
非アクティブなパネルにはhidden属性を使用します

よくある質問

「aria-selectedとタブパターン」レッスンは無料ですか？

はい。「aria-selectedとタブパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「aria-selectedとタブパターン」で何を学びますか？

キーボードで操作できるタブインターフェースを実装しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「aria-selectedとタブパターン」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

トグルのaria-expandedとaria-controls
aria-selectedとタブパターン
ライブリージョン aria-live aria-atomic aria-relevant
スクリーンリーダーでのテスト

← HTML Academyに戻る