APG パターン

メニューパターン

メニューは、ユーザーが選択できるアクションや機能のリストを提供するウィジェットです。ドロップダウンメニューやコンテキストメニューなどに使用します。

キーボード操作

キー動作
Enter / Spaceメニューボタンでメニューを開く。メニュー項目を選択して実行
↓（下矢印）メニューを開く（閉じている場合）。次のメニュー項目にフォーカスを移動
↑（上矢印）前のメニュー項目にフォーカスを移動。最初の場合は最後に移動
Home最初のメニュー項目にフォーカスを移動
End最後のメニュー項目にフォーカスを移動
Escapeメニューを閉じ、トリガーボタンにフォーカスを戻す

必要な ARIA

メニューボタン
aria-haspopup="true"ポップアップメニューを持つことを示す
aria-expandedメニューの開閉状態（true/false）
aria-controls制御するメニュー要素のID
メニューコンテナ
role="menu"要素がメニューであることを示す
aria-labelメニューのアクセシブルな名前
メニュー項目
role="menuitem"メニューの各項目であることを示す
tabindexアクティブな項目は0、それ以外は-1

ライブデモ

「ファイル」ボタンをクリックまたはEnter/↓でメニューを開き、矢印キーで項目を移動、Enterで選択、Escapeで閉じます。

よくある間違い

  • メニューボタンにaria-haspopupを設定していない
  • aria-expandedをメニュー開閉時に更新していない
  • 矢印キーによるメニュー項目間の移動が実装されていない
  • Escapeキーでメニューが閉じない
  • メニューを閉じた後にトリガーボタンにフォーカスを戻していない
  • ナビゲーションリンクのリストにrole="menu"を誤用している（メニューは操作コマンドに使用）

参考リンク