KOYO DIGITAL WORKSパーツギャラリー

メガメニュー

ロールオーバー&キーボード操作でメガメニューを表示

キーボードで操作できる、アクセシビリティに配慮されたメガメニューです。

  • Chrome
  • Firefox
  • IE11
  • [Tab] キーでメインメニュー上をフォーカス移動する。メインメニュー上にフォーカスが当たっていれば、左右矢印キーでもフォーカス移動できる。
  • メインメニューのある項目にフォーカスが当たった状態で [Enter] キー/下矢印キー/スペースキーのいずれかを押すと、サブメニューが開く。
  • サブメニューが開いた状態で [Tab] キーを押すと、そのサブメニューの中でフォーカス移動する。上下矢印キーでもフォーカス移動できる。
  • サブメニュー内の項目にフォーカスが当たっている状態で、左右矢印キーを押すと、そのサブメニュー内で、フォーカスを横移動できる (各列の一番上のフォーカス可能な要素にフォーカスが当たる)。
  • サブメニュー内のいちばん左 (いちばん右) の列にフォーカスが当たっている状態でさらに左矢印キー (右矢印キー) を押すと、メインメニュー項目にフォーカスが当たる。そのうえで左右矢印キーを押すと、サブメニューが開いた状態でメインメニュー上をフォーカス移動できる。
  • [Esc] キ―でサブメニューを閉じる。

参考サイト:http://website-usability.info/2014/05/entry_140512.html

おすすめコンテンツ

リッチな動きをWebサイトに パーツギャラリー デザインギャラリー
ページの先頭へ