Tabキーによるフォーカス・ナビゲーションについての覚え書き

基本用語

• Webブラウザの閲覧時に、Tabキーを押して一定の順序でフォーカスを移動させることを「シーケンシャル・フォーカス・ナビゲーション」などという。
  • フォーカスしていることを表す青い枠は「フォーカスリング」という。

基本操作

• <a> にフォーカスした状態で、Enterキーを押すと遷移する。
• <button> は、Enterキー / Spaceキーで発動する。
• Safari は Tabキーのみでは、十分にフォーカス移動できず、ボタンなどがスキップされる。これは Safari の設定をいじることで解決可能である（参考記事）。ウェブサイト開発者の側からどうこうできる問題ではない。
• Mac では、ブラウザ上部に表示される警告ダイアログを、キーボードのみで十分に操作することはできない。これは仕様なので諦めるしかない。
  

HTML・CSSコーディングの注意点

• リセットCSSに下記コードを用意するとよい。
  • 疑似要素 :focus-visible にフォーカスリング（青い枠）を設定する。マウス操作でクリックした時にはフォーカスリングが表示されないが、Tabキーを使ったときには表示される。
  • :focus を使うと、マウス操作のときにもリングが表示され、見映えがよくないので注意。

reset.scss

input,
textarea,
button,
select {
    &:focus {
        outline: none;
    }
    &:focus-visible {
        outline: -webkit-focus-ring-color auto 1px;
    }
}

• チェックボックス・ラジオボタンは決して　display: none / visibility: hidden にしてはいけない。絶対にフォーカスできなくなってしまう。
  • tabindex をつければフォーカス出来るようになるが、Enter / Space で選択できないため無意味である。
  • かつては、チェックボックス・ラジオボタンを display: none にして、:before / :after でスタイリングするのが一般的であったが、これは古い手法である。最新のCSS仕様では、チェックボックス・ラジオボタンを直接スタイリングすることが可能であり、こちらの方が望ましい。（参考記事）

• HTMLのインラインイベントハンドラーについて
  • 特別な理由がない限り、onmousedown 属性よりも onclick 属性を使うべきである。
  • onclick に設定した内容は、Enterキー / Spaceキー でも発動する。そのため、別途 onkeydown などを設定する手間を省ける
  • onmousedown に設定した内容は、キーボードでは発動しない。
  • そもそも、HTMLのインラインイベントハンドラーを使うべきではないという話もある（MDN）が、まだまだ案件によっては完全排除は難しいだろう。

• アコーディオンは <details> と <summary> で作ったほうがよい。
  • こちらの記事が詳しい。

• モーダルは <dialog> で作った方がよい。
  • こちらの記事が詳しい。
  • <dialog> を使えば　Tabキーによるフォーカス・ナビゲーションを簡単に制御することができる。逆に、<dialog> を使わないと、ゴチャゴチャした JavaScript コードを自作するなり、ライブラリを組み合わせる必要なりがあって苦行である。
  • まだキッチリと考えきってはいないが、ハンバーガーメニューも <dialog> で作った方がよい気がする。テキトーに古い手法で作ると、「閉じた状態のハンバーガーメニューの中のリンクにフォーカスが移動してしまい、ユーザーがフォーカスを見失う」といった事態が発生する。

• 同じ見た目のボタンを表現するのに <a> と <button> が混在していると、アクセシビリティ上の問題が発生する。
  • <a> は、Enter キーを押せば遷移できるが、Space キーを押しても何も起きない（代わりにページがスクロールしてしまう）。一方、<button> は、Enter キーでも Space キーでも発動する。
  • 従って、<a> を使って「ボタンのようなもの」を実装していると、ユーザーが戸惑う可能性がある。
  • しかし、<a> を使って「ボタンのようなもの」を実装したい場面は、実際のところ多い。（例えば「削除」と書いたボタン風<a>をクリックさせることで、特定のURLにフォームを送信してデータを更新・削除するなど。）
  • ではどうすればいいのか？　今の私はまだ結論を出せていない。 もう少し時間をかけて調査・考察する必要がある。
    • パッと思いつく方法1：<a> に onkeydown などを設定する。Spaceキーが押下されたときに、クリックと同様に扱う JavaScript 関数を用意。
    • パッと思いつく方法2：全部 <button> でつくる。<a>要素のような動作をさせたいときには 　<button onclick="window.location.href='https://example.com'">ほげほげ</button> と記載する。
    • どちらにしろ直観的な書き方とは言いがたく、余計な一手間が必要である。
    • （追記）<button> をリンク代わりに用いると、「ホバーで遷移先が分からない」「Ctrl(Cmd) + 右クリックから別ウィンドウに開けない」といった問題があるらしく、やはり望ましくなさそうである。