Tailwind CSSでキーボード操作時のフォーカスをスタイリングする方法

Tailwind CSS UXデザイン アクセシビリティ スタイリング フロントエンド

こんにちは。エキサイトでデザイナーをしている齋藤です。

エキサイトホールディングス Advent Calendar 2024 シリーズ2の7日目を担当します。

qiita.com

今回は、Tailwind CSSでキーボード操作時のフォーカスをスタイリングする方法をご紹介します。

理想状態

まずは理想状態をお示します。

Codepen内でtabキー（Safariではoption+ tab）を使用してボタンを選択しようとしてみてください。

See the Pen Tailwind CSSでfocus-visible by AyumuSaito (@ayumusaito-excite) on CodePen.

それぞれ、「理想状態のボタン」の方は赤い境界線で囲われ、「通常のボタン」ではブラウザ標準の境界線で囲われます。

フォーカス時のスタイルを変えたいシーンとは

ここで、なぜフォーカス時のスタイルを変える場合が発生するのかを整理します。

ボタン要素であればbuttonタグを用いるなど、適切にマークアップすればブラウザ標準の境界線が適用されるため、一見アクセシブルに思えます。

では、以下の場合だとどうでしょうか。Codepen内でtabキーを使用してボタンを選択しようとしてみてください。

See the Pen focus-visible:をスタイリングしない場合 by AyumuSaito (@ayumusaito-excite) on CodePen.

この場合のように、ブラウザ標準の境界線色に対して、ボタンの背景色のコントラスト比が低い場合にフォーカス状態であることがわからなくなってしまいます。

そうすると、キーボードを用いて操作しているユーザーが迷子なりかねないため、アクセシブルとは言えません。

そこで、フォーカス時のスタイルを変えるという動機が生じます。

どうやってスタイリングするか

純粋なCSSの場合、キーボードフォーカス時のスタイリングの際には、疑似クラスである:focus-visibleを用います。

Tailwind CSSの場合、:focus-visibleの代替となる、接頭辞focus-visible:が用意されています。

先の青ボタンがキーボードでフォーカスされた場合に赤い枠線にしたい場合は、以下のようになります。

See the Pen Untitled by AyumuSaito (@ayumusaito-excite) on CodePen. 

<button 
type="button" 
class="px-3 py-2 rounded bg-blue-700 text-white focus-visible:ring ring-red-600 focus-visible:outline-none"
>
  青色のボタン
</button>
  1. focus-visible:ringでキーボードフォーカス時に境界線を設けると設定
  2. ring-red-600で境界線色を指定
  3. focus-visible:outline-noneブラウザ標準のスタイルを無効化

まとめ

今回は、Tailwind CSSでキーボード操作時のフォーカスをスタイリングする方法をご紹介しました。

この方法を知っておくと、よりアクセシブルなスタイリングに一歩近づくと思います。

Tailwind CSSを使用される方の一助となれば幸いです。

ご精読ありがとうございました。