このページの本文へ移動

G165:視認性の高いデフォルトのフォーカスインジケータが引き継がれるように、プラットフォームデフォルトのフォーカスインジケータを使用する

出典:WAIC. “ G165: 視認性の高いデフォルトのフォーカスインジケータが引き継がれるように、プラットフォームデフォルトのフォーカスインジケータを使用する新しいウィンドウを開きます ” WCAG 2.0 達成方法集(参照2024年8月1日)

概要

G165は、ユーザーが操作しているデバイスやOSの標準フォーカスインジケータをそのまま使用することで、視認性を確保する方法です。標準のフォーカスインジケータは、ユーザーがすでに慣れ親しんでいるため、直感的に利用でき、カスタマイズ可能な場合も多くあります。この方法は特に、視覚障害者やキーボード操作を主に利用するユーザーにとって有益です。

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

適用(対象)

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

標準フォーカスインジケータのメリット

一貫性

ユーザーは異なるウェブサイトやアプリケーション間で一貫したフォーカスインジケータを経験できる。

カスタマイズ可能

多くのプラットフォームでは、ユーザーがフォーカスインジケータの外観をカスタマイズできるため、個々の視覚ニーズに合わせて調整可能。

支援技術の互換性

標準のフォーカスインジケータは、スクリーンリーダーや他の支援技術と高い互換性がある。

実践的な方法

標準フォーカスインジケータの使用

ウェブコンテンツやアプリケーション開発において、CSSやJavaScriptでフォーカスインジケータを変更せず、デフォルトの状態を維持します。これは、特にフォーム要素やインタラクティブなコンポーネントにおいて重要です。

カスタマイズされたフォーカスインジケータの使用を避ける

コンテンツ制作者が独自のフォーカスインジケータを使用する場合、視認性や支援技術との互換性が低下する可能性があります。これを避けるため、デフォルトの設定を維持します。

フォーカスインジケータのカスタマイズが必要な場合

どうしてもカスタマイズが必要な場合は、視認性を高める工夫をします。例えば、太い線やコントラストの高い色を使用しますが、これもデフォルトの設定を損なわない範囲で行います。

まとめ

G165の原則は、ユーザーのデバイスやOSの標準フォーカスインジケータを使用することで、視認性と一貫性を確保し、支援技術との高い互換性を維持することです。特に視覚障害者やキーボード操作を主に利用するユーザーにとって、この方法は直感的で利用しやすくなります。コンテンツ制作者は、独自のフォーカスインジケータを使用する場合でも、視認性と互換性を重視したデザインを心がける必要があります。

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お問い合わせ

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

お問い合わせ