アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス

2020年11月14日 jQuery, アクセシビリティ 多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは tab キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ ↑私が10年以上利用している会計ソフト！ こちらのGif画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常のHTMLとCSSを使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみに

[burnworks]

JS無効時も考えてあげて。子メニュー部分はCSSでdisplay:none;ではなくJSで処理、JS無効の場合は子メニューが最初から展開状態（デザイン調整必要だけど）になるなど（それか他にも遷移手段の用意があればいいけど）

[ant0720]

配慮が大事か、切捨が大事か。どのみち、ここTAB使えますよーって書いとかないとわからんよなー

[akanenechan]

カテゴリー

[yayocan]

プルダウンメニュー

[ichitaso]

ナビメニュー ホバー 表示

[Falky]

そんなことより(いや、そっちも大事なんだけど)、タブレットにPC版表示見せるなら、ドロップダウンメニューもきちんと使えるように実装してくださいよ。hoverとかonmouseoverとか前提にされるとさあ…

[tak4hir0]

アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス

[shinagaki]

VIM操作でブラウジングしてるからドロップダウンメニュー嫌い

[s99e209]

構造が複雑な2階層のドロップダウンメニューでも使いやすくする方法。 「Accessible Mega Menu」プラグインは、設置するだけで簡単に実装できるってのはいいな。

[lost_and_found]

なるほど

[monbran4989]

タブなんか使わないだろw

[hedeyoshi]

アクセシビリティ!

[kagioo2uma]

こういう配慮は大事

[maritimecolor]

なるほど・・・。普通のドロップダウンってタブキーじゃ開かないのか・・・知らなかった。

[jislotz]

WAI-ARIA使ってますねー。

[Appakun]

ん〜いいっすね