ウェブサイトにおけるフォーカスのアウトラインについて詳しくなろう。

ウェブサイトにおけるフォーカスアウトライン（要素がアクティブであることを示す輪郭線）が、キーボードユーザーなどのアクセシビリティにとって不可欠です。

それは、キーボードで操作するユーザー（マウスを使わない人や運動機能に障害がある人など）にとって、現在どの要素にいるかを知るためです。

これまでなんとなくでフォーカスを扱ってしまっていたので、もう少し詳しくなるために調べてみました。

アウトラインは、技術的な要件としてだけでなく、サイトの視覚的に重要な要素です！
アクセシビリティやフォーカスアウトラインのスタイリングのヒントになれば幸いです。

カスタムアウトラインの実装

ブラウザのデフォルトのアウトラインは一貫性がなく、目立ちにくいことが多いため、アクセシビリティ専門家はカスタムアウトラインを推奨しているとのことです。

focus-visible の利用

:focus-visible 擬似クラスを使用することで、キーボードで要素を操作している場合にのみフォーカススタイルを適用できます。
これにより、マウスでクリックした際にアウトラインが残るのを防げます。

:focus と :focus-visible の違いについてより詳しく知りたい方は下記をご覧ください。

CSS カスタムプロパティの活用

CSS 変数を利用し、アウトラインの色、オフセット、スタイル、幅を要素ごとの調整します。

:root {
  --focus-outline-color: currentColor;
  --focus-outline-offset: 0.1rem;
  --focus-outline-style: solid;
  --focus-outline-width: 2px;
}

*:focus-visible {
  outline-color: var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  outline-style: var(--focus-outline-style);
  outline-width: var(--focus-outline-width);
}

ちなみに例で記載している currentColor という値を指定することでアウトラインの色を現在のテキストの色に設定できます。

アウトラインの見た目を改善する

アウトラインがギザギザ

画像引用：https://medienbaecker.com/articles/focus-outlines

要素内にアイコンなどが含まれるとアウトラインがギザギザになる場合があります。

解決方法

• コンテナ要素に overflow: hidden; を設定する
• display プロパティを変更したりする

角丸にする

outline プロパティは border-radius を尊重します。
ボタンなどに設定された角丸がアウトラインにも適用されます。

一部のブラウザでは、アウトラインにデフォルトで半径が適用されます。
すべてのブラウザで一貫した半径を適用したい場合は、明示的に設定するのが無難です。

outline-offset を活用する

アウトラインと要素の間に間隔を空けることで、アウトラインを目立たせ、視覚的に調整するのに役立ちます。

負のオフセットを設定し、アウトラインを要素の内側に表示することも可能です。

画像引用：https://medienbaecker.com/articles/focus-outlines

ダークモードなどに対応する

ダークモードなど背景色を設定により変更される場合にコントラストを確保する必要があります。
[data-dark-background] のようなデータ属性を用いることで対応できます。

.button {
  --focus-outline-color: #000000;
}

[data-dark-background] {
  --focus-outline-color: #ffffff;
}

アクセシブルなアウトラインの要件 (WCAG 2.2 AAA 要件)

• フォーカスアウトラインは少なくとも2pxの幅を持つこと
• フォーカスアウトラインの色は、背景色に対して 3:1 以上のコントラスト比を持つこと

WCAG 2.2 の AAA という高いレベルを必須でクリアすべきかは議論の余地がありますが、アクセシビリティ要件を満たすためにはカスタマイズが必要になることがほとんどだと認識して頭の片隅に入れておいた方が良さそうです。

アウトラインの改善アイディア

これ以降に書くスタイルはあくまでもアイディアの 1 つだと捉えてください。
記述スタイルがベストだという意味ではありませんのでご注意ください。

二重線にする

outline と box-shadow を組み合わせて、マルチカラーの二重線のように見せる。
ネイティブサポートがないためのワークアラウンドとなります。

*:focus-visible {
  outline: 2px solid white; /* 内側の線 */ /* box-shadow: (水平オフセット) (垂直オフセット) (ぼかし) (広がり) (色) */
  box-shadow: 0 0 0 4px black; /* 外側の線 */
}

ホバースタイルの適用

ホバー時と同じスタイルをフォーカス状態にも適用し、アクティブな要素であることをより明確にします。

.my-button:hover, /* ホバー時 */
.my-button:focus-visible /* キーボードフォーカス時 */ {
  background-color: var(--color-highlight);
  color: white;
}

フォーカスアウトラインのアニメーション

outline-offset などをアニメーション化し、視覚的なフィードバックを加える。
prefers-reduced-motion でアニメーションを望まないユーザーに配慮することも忘れずに。

@media (prefers-reduced-motion: no-preference) {
  *:focus-visible {
    animation: outline-bounce .5s; 
  }
}

@keyframes outline-bounce {
  0% { outline-offset: var(--focus-outline-offset) }
  50% { outline-offset: calc(var(--focus-outline-offset) * 2) } /* オフセットを広げる */
  100% { outline-offset: var(--focus-outline-offset) }
}

フォーカスのアウトラインあるある（注意点）

オーバーフローによるアウトラインの途切れ

スクロールコンテナなどでアウトラインが途切れる場合は、コンテナに負の outline-offset を設定するか、padding と負の margin を追加することで解決できます。

インライン要素とアウトライン

インラインのアンカー要素（<a>）の中にブロックレベルの要素を入れると、アウトラインが表示されない場合もあります。

コンポーネント単位で実装していると想定していなかったところで HTMLの構造をが崩れてしまうことがありますので注意してください。

クイックテストチェックリスト

フォーカスアウトラインを確認するためにやるべき簡単なチェックリストを紹介します。

• キーボードだけでサイトをナビゲートする
• 常に現在地が見えるか、すべてのアクティブ要素にアウトラインが表示されるかを確認する
• さまざまな背景に対するアウトラインの視認性とコントラストをテストする
• ギザギザなエッジや途切れたアウトラインなどの視覚的な問題を探す

全てを目視で行うのは大変なので、Chrome の拡張ツールを利用するなど検討してください。

まとめ

これまでフォーカスのことについてここまで考えたことはありませんでした。
調べてみてアクセシビリティについての知識は不足していることは否めません。

一朝一夕で身につけられるものでもないので、少しずつ知識と技術を身につけたいと思います。
デザイナーの要望に対して最適な提案と実装ができるように引き続き努めたいと思います。

参考記事