WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F78: 達成基準 2.4.7 の失敗例 - 要素のアウトライン及びボーダーを視覚的なフォーカスインジケータを除去する又は非表示にするようにスタイル指定する

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

あらゆるウェブコンテンツ技術

これは、次の達成基準に関連する失敗例である:

解説

この文書は、ユーザエージェントでデフォルトに指定されているキーボードフォーカスの視覚的なインジケーターが非表示になっている、又はコンテンツ制作者が提供する視覚的なフォーカスインジケーターが提供されずに、ページ上の他のスタイル指定により非表示にされる時に起こる不適合の条件について述べている。フォーカスインジケーターを非表示に指定することで、ユーザエージェントはフォーカスインジケーターを表示しなくなる。他のスタイル指定によって、フォーカスインジケーターが提示されていても見づらくなることがある。例えばフォーカスのアウトラインと同じように見えるアウトライン、又はフォーカスインジケーターと同じ色になっているため識別できない太いボーダーといったものである。

事例

失敗例 1: CSSを用いて、フォーカスインジケーターを表示しないようにする

下記のCSSの事例では、デフォルトのフォーカスインジケーターを除去しているため、視覚的に認識可能なフォーカスインジケーターを提供するという要求に不適合となる。

コード例:

:focus {outline: none}

失敗例 2: 要素のアウトラインが、フォーカスインジケーターと視覚的に類似している

下記の CSS の事例は、リンクの周辺にフォーカスインジケーターと同じように見えるアウトラインを生成するものである。たとえユーザエージェントがフォーカスインジケーターを表示しているとしても、利用者にはどの要素が実際にフォーカスを持つのか判別できない。

コード例:

a {outline: thin dotted black}

失敗例 3: 要素が、フォーカスインジケーターを覆い隠すボーダーを持つ

下記のCSSの事例では、フォーカスインジケーターがボーダーの上に表示されたときに、フォーカスインジケーターに対してコントラストが十分でないボーダーをリンクの周辺に生成している。この場合、フォーカスインジケーターがボーダーのすぐ外側に表示されているが、両方とも黒で、ボーダーがフォカスインジケーターよりも太くなっている。これにより、「視覚的に認識可能」の定義を満たさない。

コード例:

a {border: medium solid black}

参考リソース

この達成方法に関する参考リソースはない。

検証

チェックポイント

  1. フォーカスを、キーボードを使ってページ上のすべてのフォーカス可能な要素に合わせる。

  2. フォーカスインジケーターが視覚的に認識可能である。

判定基準