フォーカスインジケーターを敢えて :focus で実装する

ウェブアクセシビリティの基本として、ユーザーがキーボード操作でフォーカス可能なオブジェクト (リンク、ボタン、フォーム入力要素など) にフォーカスを移動させた際には、フォーカスインジケーターが視覚的に表示される必要があります。W3C 勧告の Web Content Accessibility Guidelines (WCAG) では、以下の達成基準が規定されています。

達成基準 2.4.7 (フォーカスの可視化) では、ブラウザがデフォルトで提供するフォーカスリングを無効にしなければ一応は OK となります (それ自体の視認性が十分でなくても、ユーザーがフォーカスリングの外観をカスタマイズできる余地があるため)。より望ましいのは、ウェブサイト側で視認性に優れたオリジナルのフォーカスインジケーターをデザインし実装することですが、達成基準 2.4.13 (フォーカスの外観) でその具体的な要件 (フォーカスインジケーターの大きさや、フォーカス時と非フォーカス時の色のコントラスト比) が規定されています。

なお、ウェブサイト側でオリジナルのフォーカスインジケーターをデザインするにあたっては、達成基準 1.4.11 (非テキストのコントラスト) も同時に満たす必要があります。

フォーカスインジケーターの実装 (:focus または :focus-visible 擬似クラスで可能)

フォーカスインジケーターは、CSS の :focus または :focus-visible 擬似クラスを用いて実装することができます。もともとは :focus のみが CSS の仕様として定義されていましたが、:focus による実装ではオブジェクトをマウスでクリックしたときにもインジケーターが表示されるため、一部のデザイナーがこれを嫌い、:focus {outline: none;} という実装が散見されるようになってしまいました。これではキーボード操作に依存するユーザーが「今どこにフォーカスが当たっているのか」を視認することができず、アクセシビリティが妨げられてしまいます。

そこで、マウスクリックのときはフォーカスインジケーターを表示せず、Tab キーでフォーカス可能なオブジェクトにフォーカスを当てたときにのみフォーカスインジケーターを表示する擬似クラス :focus-visible が考案され、仕様に追加されました。W3C が公開している WCAG 関連文書 (WCAG 2.2 テクニック集) でも、達成基準 2.4.7 (フォーカスの可視化) を満たすのであれば:focus-visible による実装で十分とされています (参考 : C45: CSS の :focus-visible を用いてキーボードフォーカス表示を提供する)。

ベストプラクティスは :focus による実装

ただし、上述の WCAG 2.2 テクニック集の C45 には、下記の注記があります。

マウス又はポインタを使用する利用者が、たとえキーボードを使用して要素にフォーカスを設定していなくても、可視フォーカスインジケータがあることでメリットを得られる場合がある。ベストプラクティスとして、このような場合でも、明示的に :focus スタイルを提供することを検討されたい。
(There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit :focus style for these cases.)

つまり、WCAG の達成基準 (キーボード操作におけるフォーカスの可視化) を満たすという点では :focus-visible で十分であるものの、より多様なユーザー体験を考慮に入れると、ポインタ操作でもフォーカスインジケーターを視認できる :focus による実装がベストということになります。たとえば、以下のようなユースケースを想像してみると、わかりやすいかと思います。

WCAG を超えたユーザー体験 (Beyond WCAG) を目指すなら

WCAG の規定では、あくまでもキーボード操作におけるフォーカスの可視化が要件となっているため、:focus-visible によるフォーカスインジケーターの実装で十分と判定されます。先に挙げた「マウスを精緻に動かすのが困難なユーザー」「音声によって操作するユーザー」「視線 (または頭や顔の動き) によって操作するユーザー」の各ケースについて考えると、オブジェクトをクリックして得られる実質的な結果 (たとえばページが遷移する、設定が変わる、表示が変わる、など) それ自体がフィードバックとして足り得るので、:focus によるフォーカスインジケーターは必要不可欠というよりは nice to have (あればなおよい) なものと言えるかもしれません。

その一方で、昨今では Beyond WCAG という言葉がウェブアクセシビリティのコミュニティで聞かれるようになっています。WCAG の達成基準を満たすことを最終的なゴールとするのではなく、そこからさらに、よりよいユーザー体験を目指してアクセシビリティを高めてゆこうというものです。WCAG がスコープに含まないユースケースであっても「正しい箇所をクリックできた」という安心感をもたらすことができる :focus によるフォーカスインジケーターは、まさにこの Beyond WCAG の一例と言えるでしょう。いわゆる「UX」を大事にされる組織であれば、こうした実装を採用することも、意義のあるデザイン判断になるかと思います。

関連記事