トップレベルリンク付きディスクロージャーナビゲーションメニューの例

この例について

重要

この例では、口語的な意味で「メニュー」という言葉を使用してナビゲーションリンクのセットを参照していますが、WAI-ARIA のメニューロールは使用していません。このサイトナビゲーションの実装では、支援技術がメニューロールを持つウィジェットに期待する複雑な機能を提供しないため、メニューロールは使用しません。典型的なサイトナビゲーションには、メニュー及びメニューバーのパターンで指定されているすべてのキーボードインタラクションは必要ありません。

次の例は、ディスクロージャーのパターンを使用して、架空の大学のウェブサイトのナビゲーションバーにあるリンクのドロップダウンリストを表示及び非表示にする方法を示しています。他のディスクロージャーナビゲーションメニューの例とは異なり、この例にはディスクロージャーボタンと並んでトップレベルのリンクが含まれています。

類似の例には以下があります:

使用例の選択肢

この例では、キーボードサポートを実装する 2 つの異なる方法を示しています。次のチェックボックスでそれらを切り替えます。

矢印キー、Home、及び End の任意のサポートを含める

例

架空の大学

ナビゲーションにディスクロージャー + リンクパターンを使用

ホーム

サンプルコンテンツセクション。上記のリンクを作動させると、このリージョンに更新及びナビゲートされます。

アクセシビリティ機能

このリンクとディスクロージャーボタンのセットは、架空の大学のウェブサイトのナビゲーションを提供するため、それらを含むリストは架空の大学という名前のナビゲーションランドマークでラップされています。
リスト構造のセマンティクスは、ナビゲーションシステムの階層を支援技術利用者に伝えます。トップレベルのリストには 3 つのアイテムがあり、各アイテムにはトップレベルのリンクと関連するディスクロージャーボタンが含まれています。ディスクロージャーボタンによって制御されるリンクのセットは、ボタンを含むリストアイテム内にネストされたリストにあります。
ドロップダウンが開いていて、フォーカスがナビゲーションリージョン内にある場合、Esc を押すとドロップダウンが閉じます。フォーカスをナビゲーションリージョンから移動すると、開いているドロップダウンも閉じます。
任意のナビゲーションキー（矢印キー、Home、及び End）：
1. 任意の矢印キーサポートを有効にすると、フォーカスがナビゲーションリージョン内に含まれている場合のデフォルトのページスクロール動作が防止されます。
2. 任意のナビゲーションキーサポートは、主にスクリーンリーダーを実行していないキーボード利用者のためのものです。読み取りモードとインタラクションモードの両方を持つスクリーンリーダーは、これらのナビゲーションキーをインターセプトし、スクリーンリーダーが読み取りモードのときにページに渡しません。この例と対話する場合、この例ではスクリーンリーダーのインタラクションモードをトリガするウィジェットロールを使用しないため、通常、このようなスクリーンリーダーは読み取りモードになります。
3. 実装されている場合、任意のナビゲーションキーは、ボタンとリンク間のタブ移動を補足しますが、置き換えるものではありません。これは、ボタンとリンクが、ページの Tab シーケンスで 1 つのストップのみを占有し、すべての子孫のフォーカスを管理することが期待される grid などのウィジェットロールを持つ要素に含まれていないためです。

キーボードのサポート

キー	機能
`Tab` `Shift` + `Tab`	トップレベルのリンクとボタンの間でキーボードフォーカスを移動し、ドロップダウンが開いている場合は、ドロップダウン内のリンクを介して移動します。
`Space` 又は `Enter`	フォーカスがディスクロージャーボタンにある場合は、ボタンを作動させ、ドロップダウンの表示/非表示を切り替えます。フォーカスがリンクにある場合：いずれかのリンクに `aria-current` が設定されている場合は、それを削除します。フォーカスされたリンクに `aria-current="page"` を設定します。フォーカスされたリンクを作動させます。
`Escape`	ドロップダウンが開いている場合は、それを閉じて、そのドロップダウンを制御するボタンにフォーカスを設定します。
`↓` 又は `→` （任意）	フォーカスがトップレベルのリンク又は折りたたまれたドロップダウンを持つボタンにあり、それが最後のトップレベルのアイテムでない場合は、フォーカスを次のトップレベルのリンク又はボタンに移動します。フォーカスがトップレベルのボタンにあり、そのドロップダウンが展開されている場合は、フォーカスをドロップダウンの最初のリンクに移動します。展開されたドロップダウン内のリンクにフォーカスがあり、それが最後のリンクでない場合は、フォーカスを次のリンクに移動します。
`↑` 又は `←` （任意）	フォーカスがトップレベルのリンク又はボタンにあり、それが最初のアイテムでない場合は、フォーカスを前のリンク又はボタンに移動します。展開されたドロップダウン内のリンクにフォーカスがあり、それが最初のリンクでない場合は、フォーカスを前のリンクに移動します。
`Home` （任意）	フォーカスがトップレベルのリンクボタンにあり、それが最初のアイテムでない場合は、フォーカスを最初のアイテムに移動します。展開されたドロップダウン内のリンクにフォーカスがあり、それが最初のリンクでない場合は、フォーカスを最初のリンクに移動します。
`End` （任意）	フォーカスがトップレベルのリンク又はボタンにあり、それが最後のアイテムでない場合は、フォーカスを最後のアイテムに移動します。展開されたドロップダウン内のリンクにフォーカスがあり、それが最後のリンクでない場合は、フォーカスを最後のリンクに移動します。

ロール、プロパティ、ステート、及び tabindex 属性

属性	要素	使用法
`aria-controls="IDREF"`	`button`	ディスクロージャーボタンが、`IDREF` 値によって識別されるコンテナの表示を制御することを示します。
`aria-expanded="false"`	`button`	ディスクロージャーボタンによって制御されるコンテナが非表示であることを示します。 CSS 属性セレクター（例：`[aria-expanded="false"]`）は、視覚的な状態を `aria-expanded` 属性の値と同期させるために使用されます。
`aria-expanded="true"`	`button`	ディスクロージャーボタンによって制御されるコンテナが表示されていることを示します。 CSS 属性セレクター（例：`[aria-expanded="true"]`）は、視覚的な状態を `aria-expanded` 属性の値と同期させるために使用されます。
`aria-current="page"`	`a`	リンクによって参照されるページが現在表示されていることを示します。

JavaScript 及び CSS のソースコード

CSS: disclosure-navigation.css
Javascript: disclosureMenu.js

HTML のソースコード

以下の HTML コードをコピーするには、CodePen で開いてください。


<header class="sample-header">
  <div class="title" id="id_website_title">
    架空の大学
  </div>
  <div class="tagline">
    ナビゲーションにディスクロージャー + リンクパターンを使用
  </div>
</header>
<nav aria-label="架空の大学">
  <ul id="exTest" class="disclosure-nav">
    <li>
      <a href="#mythical-page-content" class="main-link">
        大学について
      </a>
      <button type="button"
              aria-expanded="false"
              aria-controls="id_about_menu"
              aria-label="その他の「大学について」のページ"></button>
      <ul id="id_about_menu" style="display: none">
        <li>
          <a href="#mythical-page-content">
            概要
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            管理
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            大学の概要
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            キャンパスツアー
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#mythical-page-content" class="main-link">
        入学案内
      </a>
      <button type="button"
              aria-expanded="false"
              aria-controls="id_admissions_menu"
              aria-label="その他の「入学案内」のページ"></button>
      <ul id="id_admissions_menu" style="display: none">
        <li>
          <a href="#mythical-page-content">
            応募
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            授業料
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            登録
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            訪問
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            フォトツアー
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            接続
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#mythical-page-content" class="main-link">
        学術情報
      </a>
      <button type="button"
              aria-expanded="false"
              aria-controls="id_academics_menu"
              aria-label="その他の「学術情報」のページ"></button>
      <ul id="id_academics_menu" style="display: none">
        <li>
          <a href="#mythical-page-content">
            大学と学校
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            研究プログラム
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            優等プログラム
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            オンラインコース
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            コースエクスプローラー
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            クラス登録
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            学年暦
          </a>
        </li>
        <li>
          <a href="#mythical-page-content">
            成績証明書
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
<div id="mythical-page-content"
     class="disclosure-page-content"
     tabindex="-1"
     role="region"
     aria-labelledby="mythical-page-heading">
  <h3 id="mythical-page-heading">
    ホーム
  </h3>
  <p>
    サンプルコンテンツセクション。
    上記のリンクを作動させると、このリージョンに更新及びナビゲートされます。
  </p>
</div>
<footer class="sample-footer">
  架空の大学のフッター情報
</footer>