0Pricing
HTML Academy · レッスン

トグルのaria-expandedとaria-controls

ARIAでアクセシブルな開示ウィジェットとアコーディオンを作成します

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

トグルパターンの概要

トグルコントロール（アコーディオン、ドロップダウン、メニュー）では、開閉状態を伝えるためにARIAが必要です：

  • aria-expanded — コントロールの開閉状態を示します
  • aria-controls — コントロールと操作対象の要素を関連付けます

aria-expanded

aria-expanded は、操作対象の要素が展開されているか折りたたまれているかを伝えます。

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
</ul>
<script>
btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});
</script>

aria-controls

aria-controls は、操作対象となる要素のidを参照します。

<button
  id="details-btn"
  aria-expanded="false"
  aria-controls="details-panel"
>
  Show Details
</button>
<div id="details-panel" hidden>
  <p>Additional details go here...</p>
</div>
<!-- Screen reader: 'Show Details, button, collapsed'
     After click: 'Show Details, button, expanded' -->

アコーディオンパターン

aria-expandedを使用したアクセシブルなアコーディオン：

<div class="accordion">
  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-1"
    >Section 1</button>
  </h3>
  <div id="panel-1" hidden>
    <p>Panel 1 content...</p>
  </div>

  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-2"
    >Section 2</button>
  </h3>
  <div id="panel-2" hidden>
    <p>Panel 2 content...</p>
  </div>
</div>

ドロップダウンメニューのパターン

アクセシブルなナビゲーション用ドロップダウン：

<nav>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    aria-controls="products-menu"
  >Products</button>

  <ul id="products-menu" role="menu" hidden>
    <li role="menuitem"><a href="/widget">Widget</a></li>
    <li role="menuitem"><a href="/gadget">Gadget</a></li>
  </ul>
</nav>

aria-haspopup

aria-haspopup は、コントロールを有効にするとポップアップが開くことを示します。

<button aria-haspopup="menu">File</button>
<!-- Values: true (menu), menu, listbox, tree, grid, dialog -->
<!-- Screen reader: 'File, button, has popup' -->

<!-- Note: aria-haspopup="true" is equivalent to "menu" -->
<!-- Use specific values when the popup type matters -->

Details/SummaryのARIA補足

ネイティブのdetails/summaryは、すでに展開状態を伝えるため、ARIAは必要ありません。

<details>
  <summary>FAQ Question</summary>
  <p>Answer goes here.</p>
</details>
<!-- Browser automatically provides aria-expanded
     and the disclosure widget semantics -->
<!-- No need to add aria-expanded manually to summary -->

aria-expandedの状態に対応するCSS

CSSのフックとしてaria-expandedを使用します：

/* Panel hidden by default: */
[aria-controls] + [hidden] {
  display: none;
}

/* Or using aria-expanded on the button: */
[aria-expanded="false"] + .panel {
  display: none;
}

[aria-expanded="true"] + .panel {
  display: block;
}

/* Rotate arrow icon: */
[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

トグルのキーボード要件

トグルコンポーネントは、キーボード操作に対応する必要があります：

  • EnterまたはSpace — トグルボタンを有効にします
  • Escape — ドロップダウンまたはメニューを閉じます
  • Arrow keys — 開いているメニュー内を移動します

トグル後のフォーカス管理

コンテンツを切り替えた後は、適切にフォーカスを管理します：

// Accordion: focus stays on the button (usually OK)
// Dropdown menu: move focus to first menu item on open

button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !expanded);
  panel.hidden = expanded;

  if (!expanded) {
    // Opening a dropdown: focus first item
    panel.querySelector('a, button, [tabindex]')?.focus();
  }
});

モバイルでの考慮事項

モバイルでトグルコンポーネントを使用する場合：

  • タッチターゲットは44×44px以上にする必要があります（WCAG 2.5.5）
  • aria-expandedはモバイルのスクリーンリーダー（iOS VoiceOver、Android TalkBack）でサポートされています
  • スワイプジェスチャーでキーボードやボタンによる操作を置き換えないでください

確認問題

操作対象のセクションが非表示の場合、aria-expandedにはどの値を設定すべきですか？

まとめ：aria-expandedとaria-controls

トグルにおけるARIAの要点：

  • aria-expanded="true/false" — コントロールの開閉状態
  • aria-controls="id" — コントロールとそのパネルを関連付けます
  • aria-haspopup — ポップアップが利用できることを示します
  • トグルするたびにaria-expandedを更新します
  • 開いたメニュー内にフォーカスを移動し、閉じるとトリガーに戻します

よくある質問

「トグルのaria-expandedとaria-controls」レッスンは無料ですか？

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

「トグルのaria-expandedとaria-controls」で何を学びますか？

ARIAでアクセシブルな開示ウィジェットとアコーディオンを作成します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「トグルのaria-expandedとaria-controls」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. トグルのaria-expandedとaria-controls
  2. aria-selectedとタブパターン
  3. ライブリージョン aria-live aria-atomic aria-relevant
  4. スクリーンリーダーでのテスト
← HTML Academyに戻る