キーボードナビゲーションの実現

「Skip Link コンテンツをスキップ というナビゲーション」という記事でスキップリンクのことに言及したが，そもそもホームページはキーボードで全部操作出来るべきだという考えがあり，それがキーボードナビゲーションということになる．
(ウェブアクセシビリティともいわれている時もあるようだが詳細は不明)

WordPress テーマの公式サイト登録時にも注意されたことではある．

本サイトも一応，キーボードナビゲーションを実現したのだが，少し苦労した部分があるので備忘録として書いておく．

ドロップダウンメニューとハンバーガーメニューの両立

CSS だけで両メニューを実現しているので，キーボードナビゲーションは少し工夫がいる．
特に input の checkbox のオン・オフでメニューを開閉している部分はスマホ時は動かないといけないが，パソコン時は表示しないだけでなく，タブキーを押した時も飛ばないようにするべきである．

これは以下のように実現した．

• パソコン時には display: none; にしておいて，
• スマホ時には display: inherit; で復活しつつ，
• 非表示にするために opacity: 0; を追加する

という少々トリッキーな方法を使った．

親メニューにページが割り当たっていない場合でもタブキーでフォーカスを移す

ドロップダウンメニューの中には href が空でリンクになっていないものがある．
弊社のサイトでもそういう親メニューが存在する．

キーボードナビゲーションが効く(タブキーでジャンプしてフォーカスが来る)のは，タグでいうと
a, input, select, textarea, button
タグであり，しかも Aタグの場合は href に文字が入っていないとキーだけではアクセス出来ない．

そうなると，それ以外の時はフォーカスが当たらないのでどうしようもないかと思うが，そういう時のために tabindex という属性が存在する．
span など通常フォーカスが当たらない属性でも，tabindex という属性を使えばフォーカスが当たるようになる．
これを使って，Aタグでも href が空の場合には tabindex="0" という属性をいれてやるとフォーカスが当たって，ドロップダウンが効くようになる．

弊社のこのサイトはそれを使っているので興味のある方はみてもらえばと思う．
スマホでもパソコンでも，いつでもキーボードだけでサイトの閲覧が可能になっている．

CSSのみでメニューを作っているとスキップリンクを実現するだけでも結構面倒ではある．