ARIA: menubar ロール

説明

メニューは、アクションや機能のセットなど、ユーザーに選択肢のリストを提供するウィジェットです。menubar タイプのメニューは通常、永続的に表示される水平のコマンドバーとして表示されます。メニューバーは、多くのデスクトップアプリケーションウィンドウの上部によく見られる、プルダウンメニューを含むメニューバーなど、ネイティブのオペレーティングシステムのメニューバーのように動作します。

menubar ロールは、多くのデスクトップアプリケーションのウィンドウ上部近くに見られるものと似たメニューバーを作成するために使用されます。視覚的に永続的で、通常は水平な、ユーザーに一貫したコマンドセットへの素早いアクセスを提供するメニュー項目のバーです。

menubar には、menuitem、menuitemradio、menuitemcheckbox の 3 種類のメニュー項目が含まれます。これらのメニュー項目は、オプションで 1 つ以上の group コンテナーにネストできます。グループまたは項目は、オプションで separator 要素で区切ることができます。すべてのメニュー項目は、無効化されていてもフォーカスを受け取ることができる必要がありますが、group と separator 要素はフォーカス可能ではありません。

ネイティブのメニューバーの例は、デスクトップブラウザーでこれを読んでいる場合、画面の上部に存在する可能性があるバーです。ウェブベースのメニューバーの例は、Google ドキュメントでドキュメント名の下に通常表示される「ファイル編集表示挿入表示形式」などと読める水平メニューバーです。

メニューバーのインタラクションは、デスクトップのグラフィカルユーザーインターフェイスにおける典型的なメニューバーのインタラクションと似ている必要があります。Google ドキュメントでは、これらのメニュー項目のそれぞれがポップアップサブメニューを持つ menuitem であるため、それぞれが aria-haspopup 属性を true に設定しています。menubar 要素にはありません。

メニューバーとすべてのメニュー項目はフォーカス可能で、tabindex 属性が設定されています。メニューバーがタブ移動によってフォーカスを受け取ると、キーボードフォーカスは最初の menuitem に配置されます。メニュー内の各項目は tabindex を -1 に設定していますが、最初の項目は tabindex を 0 に設定しています。

メニューバーがショートカットキーなどのコンテキストアクションの結果としてフォーカスを受け取った場合、Escape または Enter が呼び出し元のコンテキストにフォーカスを戻すことがあります。とはいえ、ユーザーエージェント、オペレーティングシステム、または支援技術のショートカットに干渉するショートカットキーを作成しないようにしてください。

どんなに深くネストされていても、すべてのメニュー項目は、無効化されていてもフォーカスを受け取ることができます。

menubar に表示されるラベルがある場合は、ラベル要素を参照する値に設定された aria-labelledby を含めてください。それ以外の場合は、説明的な aria-label を含めることでメニューバーにアクセシブル名を提供してください。

menubar 内の menuitem 要素には、メニュー項目の子サブメニューを含めることができます。サブメニューは何層にも深くネストできます。一般的に、外側の menubar は水平で、すべてのサブメニューは垂直です。そうではなくてメニューバーが垂直の場合は、menubar 要素に aria-orientation="vertical" を含めてください。それ以外の場合、デフォルト値が水平であるため、この属性は必要ありません。

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

フォーカスが menubar 内にある場合、それは常にメニューバー内のメニュー項目上にあります。フォーカスがメニューバー内のトップレベルの menuitem 上にある場合、次のキーボードインタラクションをサポートする必要があります：

↓: 現在フォーカスされている menuitem にサブメニューがある場合、サブメニューを開き、サブメニューの最初の項目にフォーカスを配置します。
↑: （オプション）現在フォーカスされている menuitem にサブメニューがある場合、サブメニューを開き、サブメニューの最後の項目にフォーカスを配置します。
→: 次の項目にフォーカスを移動し、オプションで最後から最初に折り返します。
←: 前の項目にフォーカスを移動し、オプションで最初から最後に折り返します。
Home: 矢印キーによる折り返しがサポートされていない場合、menubar の最初の項目にフォーカスを移動します。
End: 矢印キーによる折り返しがサポートされていない場合、menubar の最後の項目にフォーカスを移動します。
Tab: タブシーケンスの次の要素にフォーカスを移動します。それによってメニューバーを出る場合、メニューバー内のすべてのサブメニューが閉じられます。
shift + Tab: タブシーケンスの前の要素にフォーカスを移動します。それによってメニューバーを出る場合、メニューバー内のすべてのサブメニューが閉じられます。