C15：ユーザインタフェースコンポーネントがフォーカスを受けとったときの提示を変更するために、CSSを使用する

概要

C15は、CSSを用いてインタラクティブな要素がフォーカスされたときに、その提示を変更することを推奨します。これには、ボタン、リンク、フォームフィールドなど、ユーザーが操作する要素が含まれます。視覚的なフィードバックは、色の変更、ボーダーの追加や変更、背景色の変更などによって実現されます。これにより、視覚的な手がかりが強化され、特に視覚に障害のあるユーザーや、高コントラストを必要とするユーザーにとって重要なアクセシビリティ改善が図れます。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

適用（対象）

こちらは、次の達成基準に関連する達成方法です。

• 2.4.7 フォーカスの可視化

実践的な方法

実際にCSSを使用してフォーカスのスタイルを変更する方法をいくつか紹介します。これらの方法は、簡単に実装でき、フォーカスの可視性を向上させるのに役立ちます。

a:focus, button:focus {
  outline: 2px solid #ff0000; /* 赤色のアウトラインを追加 */
}

input:focus {
  background-color: #e0f7fa; /* フォーカス時に背景色を変更 */
}

textarea:focus {
  border: 2px dashed #00bcd4; /* フォーカス時にダッシュボーダーを追加 */
}

select:focus {
  box-shadow: 0 0 5px 2px #673ab7; /* フォーカス時にボックスシャドウを追加 */
}

まとめ

C15は、CSSを使用してユーザインタフェースコンポーネントがフォーカスを受け取ったときの視覚的なフィードバックを提供するための重要な方法です。これにより、ユーザーはインタラクティブな要素を簡単に認識し、ウェブページのナビゲーションが容易になります。特に視覚障害を持つユーザーや、高コントラストの視覚表示を必要とするユーザーにとって、この視覚的フィードバックは不可欠です。