メガメニュー
ロールオーバー&キーボード操作でメガメニューを表示
キーボードで操作できる、アクセシビリティに配慮されたメガメニューです。
- Chrome
- Firefox
- IE11
- [Tab] キーでメインメニュー上をフォーカス移動する。メインメニュー上にフォーカスが当たっていれば、左右矢印キーでもフォーカス移動できる。
- メインメニューのある項目にフォーカスが当たった状態で [Enter] キー/下矢印キー/スペースキーのいずれかを押すと、サブメニューが開く。
- サブメニューが開いた状態で [Tab] キーを押すと、そのサブメニューの中でフォーカス移動する。上下矢印キーでもフォーカス移動できる。
- サブメニュー内の項目にフォーカスが当たっている状態で、左右矢印キーを押すと、そのサブメニュー内で、フォーカスを横移動できる (各列の一番上のフォーカス可能な要素にフォーカスが当たる)。
- サブメニュー内のいちばん左 (いちばん右) の列にフォーカスが当たっている状態でさらに左矢印キー (右矢印キー) を押すと、メインメニュー項目にフォーカスが当たる。そのうえで左右矢印キーを押すと、サブメニューが開いた状態でメインメニュー上をフォーカス移動できる。
- [Esc] キ―でサブメニューを閉じる。
参考サイト:http://website-usability.info/2014/05/entry_140512.html