ARIA: menu ロール

menu ロールは、ユーザーに選択肢のリストを提供する複合ウィジェットの一種です。

説明

menu は一般的に、ユーザーが呼び出すことができる共通のアクションや機能のグループ化を表します。menu ロールは、デスクトップアプリケーションのメニューと同様の方法でメニュー項目のリストが提示される場合に適切です。ポップアップメニューとしても知られるサブメニューも、menu ロールを持ちます。

「メニュー」という用語はサイトナビゲーションを説明するために一般的に使用される用語ですが、menu ロールは複合ウィジェットのフォーカス管理や最初の文字でのナビゲーションなどの複雑な機能を必要とするアクションや機能のリストのためのものです。

メニューは、常に表示されるコントロールのリストであるか、開閉できるウィジェットです。閉じられた menu ウィジェットは通常、メニューボタンを活性化する、サブメニューを開くメニュー内の項目を選択する、または Windows でコンテキスト固有のメニューを開く Shift + F10 などのコマンドを呼び出すことによって開かれる、または表示されます。

ユーザーが開かれたメニュー内の選択肢を活性化すると、メニューは通常閉じられます。メニューの選択肢アクションがサブメニューを呼び出す場合、メニューは開いたままになり、サブメニューが表示されます。

メニューが開くと、キーボードフォーカスは最初のメニュー項目に置かれます。キーボードアクセシブルにするには、すべての子孫のフォーカスを管理する必要があります：menu 内のすべてのメニュー項目はフォーカス可能です。メニューを開くメニューボタンとメニュー項目は、メニュー自体ではなく、フォーカス可能な要素です。

メニュー項目には menuitem、menuitemcheckbox、menuitemradio が含まれます。無効化されたメニュー項目はフォーカス可能ですが、活性化することはできません。

メニュー項目は group ロールを持つ要素でグループ化でき、separator ロールを持つ要素で区切ることができます。group も separator もフォーカスを受け取らず、インタラクティブではありません。

menu がコンテキストアクションの結果として開かれる場合、Escape または Enter は呼び出したコンテキストにフォーカスを戻すことがあります。フォーカスがメニューボタンにある場合、Enter を押すことでメニューが開き、最初のメニュー項目にフォーカスが当たります。フォーカスがメニュー自体にある場合、Escape はメニューを閉じ、メニューボタンまたは親のメニューバー項目（またはメニューを開いたコンテキストアクション）にフォーカスを戻します。

menu ロールを持つ要素は、暗黙的な aria-orientation 値として vertical を持ちます。水平方向のメニューには、aria-orientation="horizontal" を使用してください。

メニューが視覚的に永続的である場合は、menubar ロールを検討してください。

キーボードインタラクション

Space / Enter: 項目が親メニュー項目の場合、サブメニューを開き、サブメニューの最初の項目にフォーカスを移動します。そうでなければ、メニュー項目を有効化し、新しいコンテンツを読み込み、コンテンツのタイトルとなる見出しにフォーカスを配置します。
Escape: サブメニューにいる場合、サブメニューを閉じ、親メニューまたはメニューバー項目にフォーカスを移動します。
Right Arrow: メニューバーでは、メニューバーの次の項目にフォーカスを移動します。フォーカスが最後の項目にある場合は、最初の項目にフォーカスを移動します。サブメニューにいる場合、フォーカスがサブメニューを持たない項目にある場合は、サブメニューを閉じ、メニューバーの次の項目にフォーカスを移動します。そうでなければ、新しくフォーカスされたメニューバー項目のサブメニューを開き、その親メニューバー項目にフォーカスを保持します。メニューバーやサブメニューにおらず、サブメニューを持つ menuitem でない場合、フォーカスがメニューの最後のフォーカス可能要素でない場合は、オプションで次のフォーカス可能要素にフォーカスを移動します。
Left Arrow: メニューバーの前の項目にフォーカスを移動します。フォーカスが最初の項目にある場合は、最後の項目にフォーカスを移動します。サブメニューにいる場合は、サブメニューを閉じ、親メニュー項目にフォーカスを移動します。メニューバーやサブメニューにいない場合、フォーカスがメニューの最初のフォーカス可能要素でない場合は、オプションで最後のフォーカス可能要素にフォーカスを移動します。
Down Arrow: サブメニューを開き、サブメニューの最初の項目にフォーカスを移動します。
Up Arrow: サブメニューを開き、サブメニューの最後の項目にフォーカスを移動します。
Home: メニューバーの最初の項目にフォーカスを移動します。
End: メニューバーの最後の項目にフォーカスを移動します。
任意の文字キー: 入力された文字で始まる名前を持つメニューバーの次の項目にフォーカスを移動します。入力された文字で始まる名前を持つ項目がない場合、フォーカスは移動しません。

例

以下は 2 つのメニュー実装の例です。

例 1: ナビゲーションメニュー

html

<div>
  <button id="menubutton" aria-haspopup="true" aria-controls="menu">
    <img src="hamburger.svg" alt="Page Sections" />
  </button>
  <ul id="menu" role="menu" aria-labelledby="menubutton">
    <li role="presentation">
      <a role="menuitem" href="#description">Description</a>
    </li>
    <li role="presentation">
      <a
        role="menuitem"
        href="#associated_wai-aria_roles_states_and_properties">
        Associated WAI-ARIA roles, states, and properties
      </a>
    </li>
    <li role="presentation">
      <a role="menuitem" href="#keyboard_interactions">
        Keyboard interactions
      </a>
    </li>
    <li role="presentation">
      <a role="menuitem" href="#examples">Examples</a>
    </li>
    <li role="presentation">
      <a role="menuitem" href="#specifications">Specifications</a>
    </li>
    <li role="presentation">
      <a role="menuitem" href="#see_also">See Also</a>
    </li>
  </ul>
</div>

デフォルトでアクセシブルなこのナビゲーションウィジェットを段階的に拡張するには、menu を隠すクラスとインタラクティブなメニュー項目コンテンツへの tabindex="-1" の追加を、読み込み時に JavaScript で行うべきです。

サイトナビゲーション用の「メニュー」を含める場合は、menu ロールを使用しないでください。むしろ、メインサイトナビゲーションには、ネイティブ HTML の <nav> 要素または単にリンクのリストを使用してください。menu ロールは、フォーカス管理を必要とする複合ウィジェット用に予約されるべきです。説明と追加の例については、ARIA practices for disclosure navigation を参照してください。

例 2: メニューバーサブメニューオプションピッカー

以下のコードスニペットは、メニューバーにネストされたポップアップメニューです。これは、メニューボタンが活性化されたときに表示されます。これは、色オプションのリストからテキスト色を選択するためのメニューです：

html

<div>
  <button
    type="button"
    aria-haspopup="menu"
    aria-controls="colormenu"
    tabindex="0"
    aria-label="Text Color: purple">
    Purple
  </button>
  <ul role="menu" id="colormenu" aria-label="Color Options" tabindex="-1">
    <li
      role="menuitemradio"
      aria-checked="true"
      style="color: purple"
      tabindex="-1">
      Purple
    </li>
    <li
      role="menuitemradio"
      aria-checked="false"
      style="color: magenta"
      tabindex="-1">
      Magenta
    </li>
    <li
      role="menuitemradio"
      aria-checked="false"
      style="color: black;"
      tabindex="-1">
      Black
    </li>
  </ul>
</div>

メニューを開くボタンには aria-haspopup="menu" が設定されており、制御するポップアップが menu であることを明示的に示しています。

メニューを開くために、ユーザーは一般的にオープナーとしてメニューボタンとインタラクトします。メニューボタンはフォーカス可能で、クリックとキーボードイベントの両方に応答する必要があります。フォーカスされているとき、Enter、Space、Down Arrow、または Up Arrow を選択すると、メニューが開き、メニュー項目にフォーカスが配置されます。

メニューの開閉は、ボタンの aria-expanded="true" 属性を切り替えます。これは、メニューが開いているときに追加されます。メニューが閉じられているときは削除されるか、false に設定されます。true の値は、メニューが表示されており、メニューボタンを活性化するとメニューが閉じることを示します。

メニューが開いているとき、ユーザーがメニュー項目を矢印キーで移動するため、ボタン自体は一般的にフォーカスを受け取りません。Escape とオプションで Shift + Tab がメニューを閉じ、メニューボタンにフォーカスを戻します。

menu ロールが <ul> に設定され、<ul> 要素をメニューとして識別します。

メニューの表示と非表示は CSS で行うことができます。例えば、これらのコード例では、属性と次の兄弟セレクターを使用してメニューの表示を切り替えることができます：

css

[role="menu"] {
  display: none;
}
[aria-expanded="true"] + [role="menu"] {
  display: block;
}

ナビゲーション例には静的なボタンがあります。サブメニュー例には、ユーザーが新しい値を選択したときに更新されるボタンがあります。この場合、aria-label="Text Color: purple" が menu 要素に設定されています。これは、メニューのアクセシブル名を「Text color: purple」として定義しており、メニューの目的（テキスト色の選択）と現在の値（purple）を識別しています。新しい色が選択されたとき、aria-label プロパティの値も更新されるべきです。

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA) # menu
Unknown specification

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年8月11日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content

ARIA: menu ロール

説明

関連する WAI-ARIA のロール、ステート、プロパティ

キーボードインタラクション

例

例 1: ナビゲーションメニュー

例 2: メニューバーサブメニューオプションピッカー

仕様書

関連情報

Help improve MDN