Checkmycolours.comにアクセスして、WCAG(アクセシビリティ)コンプライアンスについてWebサイトをテストしました。ツールは動作しますが、ツールが100%完璧かどうか疑問に思っています。
このツールでは、サイトが準拠するためにスタイルシートにA,EM,IMG{color:#000}
を含める必要があるようです(デフォルトの色を指定する必要があることを意味します)。そうしないと、ツールはアンカー、強調、画像タグに白い背景と白い前景を想定します。
また、このHTMLだけを使用して(スタイルシートを使用せずに)同じツールを使用して、途方もなく簡単なHTMLテストを実行しました。
<em>Test</em>
<p>Test</p>
<a href="test">Test</a>
<img src="broken" alt="test">
ツールは、アンカータグとイメージタグのエラーを報告します。これらの要素の前景色と背景色は白であると考えられています。強調と段落タグについては、色は黒で背景は白であると考えています。
そのcheckmycoloursツールが最も正確かどうかはわかりません。また、不適切な配色(黒地に黒など)が原因でコンテンツが表示されないサイトの広告については、Googleから報酬が得られないこともわかりました。
私が本当に知りたいのは、いくつかのHTML要素がCSSの色定義を必要とするか、すべてのHTML要素に特定のデフォルト色が付けられていると仮定することです
色の定義を必要とする要素(存在する場合)
ツールが意図していると思われるのは、コントラストが十分に高いことを確認することですが、前景と背景のデフォルトとして(一部の要素では)白と仮定する理由は私にはわかりません。コントラストのチェックは、作者が色を指定する要素に対してのみ行われ、作者が色を指定しない場合に適切なデフォルト色(ブラウザや他のユーザーエージェントが使用する色など)を想定します。作成者が前景(または背景のみ)の色のみを指定している場合は、警告を出す必要があります¹。
ユーザーエージェント を想像することはできません。これは、コンテンツを白に白で表示するのが理にかなっていますデフォルトではで、存在しないと仮定しても安全です(真剣に受け止めたい)。非常に多くのドキュメントが読めなくなるでしょう。
WCAG 2.0のガイドラインは技術固有ではないため、色を明示的に設定することについて何かを述べるものはありません(HTMLなどのスタイルシートを持つことができる技術にのみ適用されるため)。
ただし、WCAG 2.0の手法(ただし、これらの手法は 参考であり、規範的ではない !であることに注意してください) アクセス可能not色を指定するにはスタイルシートで:
G148:背景色を指定しない、テキストの色を指定しない、デフォルトを変更するテクノロジー機能を使用しない
この手法では、作成者は、単にテキストの色を指定せず、背景を指定しないことで、コントラスト測定を行う必要がなくなります。その結果、両方の色はユーザーエージェントによって完全に決定されます。
C23:メインコンテンツのテキストと背景色を指定せずに、CSSのバナー、機能、ナビゲーションなどのセカンダリコンテンツのテキストと背景色を指定する
この手法では、作成者はメイン領域のデフォルトのテキスト色と背景色を使用します。その結果、色はユーザーの色設定を介してユーザーエージェントによって完全に決定されます。ユーザーは、色の選択が自分のニーズに最適であることを確認し、最高の読書体験を提供できます。
訪問者の1人がコンテンツと背景を同じ色でレンダリングする主流のユーザーエージェントを使用すると仮定すると、ドキュメントにアクセスできなくなります(たとえば、 ガイドライン1.4識別可能 のコントラスト要件に違反します) 。ただし、これは障害のないすべての訪問者にも影響するため、WCAG 2.0を最初に相談する必要はありません。ただし、訪問者が assistive technology を使用してドキュメントをそのようにレンダリングする場合、WCAG 2.0が関連するようになり、コンテンツを区別できるようにする必要があります(たとえば、色を明示的に指定する) 。しかし、私が言ったように、私はそのようなユーザーエージェント(または支援技術)が存在しないことを確信しています(またはより良い:私は願っています)。
HTML5では、いくつかの デフォルトのCSSルール を定義しています。 フレージングコンテンツの場合 (a
、em
、およびimg
を含む):
'color'プロパティの初期値は黒であると予想されます。
CSS 2.1では HTML 4のデフォルトスタイルシート を推奨していますが、color
/background-color
は設定していません。システム/ OS次第だと思います。 6.4 The cascade と言う:
適合ユーザーエージェントは、デフォルトのスタイルシートを適用する必要があります(または、あたかもそれらが適用したかのように動作します)。ユーザーエージェントのデフォルトスタイルシートは、ドキュメント言語の一般的なプレゼンテーションの期待を満たす方法でドキュメント言語の要素を提示する必要があります[…]
[…]
ユーザーは、デフォルトのスタイルシートに影響するシステム設定(システムカラーなど)を変更できることに注意してください。
前景と背景の同じ色は、確かに「一般的なプレゼンテーションの期待を満たしていません」。
¹作成者がcolor
とbackground-color
のいずれかのみを指定し、他の色をデフォルトのユーザーエージェントスタイルシートに依存している場合、ユーザーがデフォルトの色を変更したためにドキュメントにアクセスできなくなる可能性があります。それにはWCAG 2.0の失敗があります。 F24:達成基準1.4.3、1.4.6、および1.4.8の失敗は、背景色を指定せずに前景色を指定したため、またはその逆です 。この問題は、img
要素が黒い背景に表示されている場合によく見られます。著者がそのcolor
に対して対照的なimg
値を指定するのを忘れた場合、alt
コンテンツ(画像の代わりに表示されます)は認識できません(デフォルトではテキストは通常黒であるため)。