box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない

フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングはキーボード操作をしているユーザーにとって現在のフォーカス位置を把握するための重要な要素です。このことは WCAG 2.2 の 2.4.7 項目で要求されています。

(レベル AA) キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスインジケータが見える操作モードがある。

達成基準 2.4.7 フォーカスの可視化

ブラウザのデフォルトのスタイルでは outline プロパティを使って実装されています。

デフォルトのスタイルはブラウザによって差異があり、また多くのブラウザでは青色のリングとして表示されるため、プロダクトのデザインに合わせるためカスタマイズして表示したいことでしょう。CSS の outline プロパティの値を変更することで、色や太さを変更できます。下記の CSS の例では、フォーカスリングの色を赤色に変更し、より太く表示するようにしています。

button:focus {
  outline: 2px solid red;
}

box-shadow で実装されたフォーカスリング

より柔軟なデザインを実現するために、box-shadow プロパティを使ってフォーカスリングを実装することもあります。例えば box-shadow プロパティを使えば自由な形状のフォーカスリングを作成できたり、元の要素の width や height を気にせずに実装できるというメリットがあります。

box-shadow プロパティを使ってフォーカスリングを実装する場合、ブラウザのデフォルトの outline が表示されないようにする必要があります。

button:focus {
  outline: 0;
  box-shadow: 0 0 3px 1px red;
}

ハイコントラストモードでは box-shadow が表示されない

box-shadow プロパティを使用したフォーカスリングは CSS フレームワークをはじめ多くのウェブサイトで利用されています。しかし、先ほどの outline: 0; を使用して元の outline を非表示にした場合、ハイコントラストモードでフォーカスリングが表示されないという問題があります。

ハイコントラストモードは Windows などの　OS で提供されているアクセシビリティ機能の 1 つで、コントラスト比が高い配色に変更することで、視覚障害のあるユーザーがウェブサイトを利用しやすくするための機能です。

ハイコントラストモードを使用している場合、強制的に配色が変更されるため、以下の CSS プロパティはブラウザが指定した値が代わりに適用されます。

• color
• background-color
• text-decoration-color
• text-emphasis-color
• border-color
• outline-color
• column-rule-color
• -webkit-tap-highlight-color
• SVG fill 属性
• SVG stroke 属性

また、以下のプロパティは特別な扱いとなります。

• box-shadow：none に強制される
• text-shadow：none に強制される
• background-image：URL ベースの文字列ではない場合、none に強制される
• color-schema：light dark に強制される
• scrollbar-color：auto に強制される

上記の通り、ハイコントラストモードでは box-shadow プロパティが none に強制されるため、フォーカスリングが表示されなってしまうのです。

ハイコントラストモードは Chrome の Devtools のコマンドパレットを Ctrl + Shift + P で開き、「Emulate CSS forced-color:auto」を検索することで有効にできます。

確かに、ハイコントラストモードを有効にすると、ボタンにフォーカスしてもフォーカスリングが表示されません。

ハイコントラストモードでもフォーカスリングを表示する

ハイコントラストモードでもフォーカスリングを表示するためには outline を非表示にしないことが必要です。ワークアラウンドとして、outline プロパティを transparent に設定する方法があります。

button:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 3px 1px red;
}

この方法を用いることで、通常時は非表示になる outline をハイコントラストモードにおいては表示できます。ハイコントラストモードではデフォルトの outline が表示されることが確認できます。

参考

• Web Accessibility Cookbook
• accessibility - CSS box-shadow vs outline - Stack Overflow
• forced-colors - CSS: カスケーディングスタイルシート | MDN