ディスクロージャーナビゲーションメニューの例

この例について

重要

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

次の例は、ディスクロージャーのパターンを使用して、架空の大学のウェブサイトのナビゲーションバーにあるリンクのドロップダウンリストを表示及び非表示にする方法を示しています。各ディスクロージャーボタンはウェブサイトのセクションを表し、それを展開するとそのセクション内のページへのリンクのリストが表示されます。

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

使用例の選択肢

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

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

例

架空の大学

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

アクセシビリティ機能

この一連のディスクロージャーボタンは、架空の大学のウェブサイトのナビゲーションリンクの表示を制御するため、それらを含むリストは架空の大学という名前のナビゲーションランドマークでラップされています。
リスト構造のセマンティクスは、ナビゲーションシステムの階層を支援技術利用者に伝えます。 3 つのボタンのトップレベルセットは 3 つのアイテムのリストにあり、各ボタンによって制御されるリンクのセットは、制御ボタンを持つアイテム内にネストされたリスト内に含まれています。
ドロップダウンが開いていて、フォーカスがナビゲーションリージョン内にある場合、Esc を押すとドロップダウンが閉じます。フォーカスをナビゲーションリージョンから移動すると、開いているドロップダウンも閉じます。この Esc の動作を実装することは、WCAG 2.1 1.4.13: ホバー又はフォーカス上のコンテンツ基準を満たすために必要です。
表示/非表示状態の視覚的インジケーターは、CSS ::after 疑似要素の境界線スタイルを使用して作成されるため、キャレットはオペレーティングシステムとブラウザのハイコントラストモードで確実にレンダリングされます。
任意のナビゲーションキー（矢印キー、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 で開いてください。


<nav aria-label="架空の大学">
  <ul id="exTest" class="disclosure-nav">
    <li>
      <button type="button"
              aria-expanded="true"
              aria-controls="id_about_menu">
        大学について
      </button>
      <ul id="id_about_menu">
        <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>
      <button type="button"
              aria-expanded="true"
              aria-controls="id_admissions_menu">
        入学案内
      </button>
      <ul id="id_admissions_menu">
        <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>
      <button type="button"
              aria-expanded="true"
              aria-controls="id_academics_menu">
        学術情報
      </button>
      <ul id="id_academics_menu">
        <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-label="架空の大学のサンプルページコンテンツ">
  <h3 id="mythical-page-heading">
    架空の大学
  </h3>
  <p>
    サンプルコンテンツセクション。
    上記のリンクを作動させると、このリージョンに更新及びナビゲートされます。
  </p>
</div>