このページの本文へ移動

G195:コンテンツ制作者が提供する視認性に優れたフォーカスインジケータを使用する

出典:WAIC. “ G195: コンテンツ制作者が提供する視認性に優れたフォーカスインジケータを使用する新しいウィンドウを開きます ” WCAG 2.0 達成方法集(参照2024年8月1日)

概要

G195の達成方法は、視認性に優れたフォーカスインジケータを提供し、ユーザーがフォーカスしている要素を簡単に識別できるようにすることを目的としています。多くのブラウザの初期設定ではフォーカスインジケータが見えにくくなることがあるため、高いコントラスト比を持った色、太字、光を放つような視覚的インジケータを使用してフォーカスを強調します。

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

適用(対象)

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

実践的な方法

高いコントラスト比を持った色の使用

フォーカスインジケータを明るい色に変更することで、背景色と明確に区別できるようにします。例えば、濃い背景色の場合は、白や黄色などの明るい色を使用します。

太字の使用

フォーカスされた要素の枠線やテキストを太字にすることで、他の要素と区別できるようにします。例えば、通常のテキストをフォーカス時に太字に変更することで、視覚的に強調されます。

光を放つような視覚的インジケータの使用

フォーカスインジケータが光を放つようなエフェクトを追加することで、視認性を向上させます。例えば、CSSを使用してフォーカスされた要素にボックスシャドウを追加し、外側に光が広がるような効果を与えます。

まとめ

G195の達成方法は、視認性に優れたフォーカスインジケータを提供することで、ユーザーがフォーカスしている要素を簡単に識別できるようにすることを目的としています。多くのブラウザの初期設定では、フォーカスインジケータが見えにくくなることがあるため、高いコントラスト比を持った色、太字、光を放つような視覚的インジケータを使用してフォーカスを強調することが推奨されます。これにより、アクセシビリティが向上し、すべてのユーザーがウェブコンテンツをより快適に利用できるようになります。

WCAG 2.0とその翻訳文書の利用について

本ページの内容は、「Web Content Accessibility Guidelines (WCAG) 2.0新しいウィンドウを開きます」、「WCAG 2.0 解説書新しいウィンドウを開きます」および「WCAG 2.0 達成方法集新しいウィンドウを開きます」からの引用を含んでいます。引用された内容は、W3CおよびWAICによって公開されており、以下のクリエイティブ・コモンズライセンスに基づいて使用されています。これらのガイドラインを参考にしつつ、ウェブアクセシビリティの向上に向けた具体的な取り組みを分かりやすく説明しています。

WCAG 2.0

この作品はクリエイティブ・コモンズ 表示 4.0 国際ライセンス新しいウィンドウを開きますの下に提供されています。

WCAG 2.0 解説書及び達成方法集

この作品はWCAG 2.0 解説書及び達成方法集からの引用を含みます。翻訳はWAICによって提供されており、文書のステータスは「勧告」です。なお、この文書の正式版はあくまでW3Cのサイト内にある英語版であることにご注意ください。

Contactお問い合わせ

当社ではウェブアクセシビリティ診断を提供しております。すべてのユーザーにアクセスできるウェブサイトを目指して、一緒に取り組みましょう。診断のご依頼や詳細については、お気軽にご連絡ください。

お問い合わせ