要約

  • W3Cの2018年2月のSelectors Level 4草案は、:focusが示す現在のフォーカスと、ブラウザーが表示すべきと判断したフォーカスを:focus-visibleで区別した。
  • その後の草案は、キーボード入力、文字欄、常時表示の設定、スクリプトによる移動を判断の手掛かりとして説明した。ブラウザーがタイミングを知り、サイトが目印を描く。

デザイナーがマウスでボタンをクリックすると、予定にない輪郭線が現れた。色を吟味したボタンの周りで妙に張り切っている。CSSで消せば画面はすっきりする。ところが次の読者はTabキーでページを進む。フォーカスは確かにそのボタンへ移ったのに、どこへ来たのかが見えない。次のEnterキーは行き先不明の小包になる。目立ったことを理由に解雇された輪郭線は、目立つのが仕事だった。

2018年2月2日のW3C草案は二つの事実を切り分けた。:focusは入力を受ける要素を示す。:focus-visibleは、その要素のフォーカスを見えるようにすべきだとユーザーエージェントが判断したときに当たる。草案は文字入力欄とボタンを並べて考える。文字欄では次のキーが中身を書き換える。Tabで着いたボタンでは、ポインターのような位置の手掛かりがない。マウスで直接押したボタンなら、今のクリック自体が行き先を知らせる。同じボタンでも、到着の仕方で必要な案内が変わる。

ブラウザーは利用者がどう進んだかを見ている。サイトは輪郭の太さ、色、周囲とのコントラストを決められる。そこで:focusにまとめて「輪郭なし」と命じるのは、ブラウザーが持つ手掛かりを読者に渡す前に捨てる行為だ。:focus-visibleに読みやすい目印を与えれば、デザインの自由は残る。輪郭線に昔の制服を着せ続ける必要はない。勤務中の所在だけは知らせてもらう。

2018年11月21日の草案には、遠慮のない見本がある。:focus-visibleに当たる要素に太い黄色い線を引き、リンクには黄色い背景も加える。これはブラウザーの飾りを仕方なく受け入れる話ではない。ページ全体に一貫した、はっきり分かる案内を作者が作る例だ。リンクやボタンが並ぶ画面で、現在地を探す人には小さな気遣いより確実な標識が効く。

同じ草案は判断材料も挙げた。常にフォーカス表示を見たいという利用者の設定は尊重する。文字を打てる欄では入力先を示す。キーボードや他の非ポインター機器で進んだときは目印が助けになる。一方、ポインターでボタンを押した瞬間には別の位置情報がある。これらはブラウザーへの提案で、利用環境や設定を加味する余地を残している。CSSはその判断結果を選択子で受け取る。

もっと面白いのは、スクリプトがフォーカスを移す場面だ。キーボードでパネルを開き、プログラムがその中の最初の操作へ移す。11月草案は、直前の要素に可視の目印があったなら、移動先にも表示を引き継ぐ考え方を示した。入口をくぐった途端に現在地が消えたら、読者はパネルで迷子になる。ポインターから始まった経路についても連続性を扱う。ブラウザーは一つ一つのボタンを別件として処理するだけでなく、読者の歩いてきた道を覚える。

2022年5月7日の草案では説明が簡潔になった。現在フォーカスを持つ要素には:focusが当たる。ブラウザーが表示を有用と判断した場面には:focus-visibleが当たる。サイトは目印の見た目を変えられるが、その出現のタイミングまで独自に推理しなくてよい。草案はブラウザーの標準的なフォーカス装飾にもこの選択子を使うよう勧める。標準の線とサイト独自の線が、同じボタンの周りで別々の時計を見ずに済む。

2022年11月11日の草案もこの仕組みを保った。W3Cの公開履歴には各改訂の日付が並ぶ。完成した考え方は小さい。マウスのクリックでは静かなボタンが、Tabでたどり着いたときには現在地を明るく知らせる。サイトはその光の色を選べる。読者は次のキーがどこへ届くかを知る。

輪郭線は職場に戻った。今度の肩書きは「余計な線」ではなく、道案内である。