WCAG2の「十分な達成方法」について

あるいは必要十分条件について1

Nu Html Checkerの場合

Nu Html Checkerは、HTMLをチェックするツールである。Nu Html Checkerで特定の(種類の)エラーを0にすることは、「構文解析」のWCAGの達成基準を満たすための必要十分条件となる。

達成基準 4.1.1 構文解析 (レベル A): マークアップ言語を用いて実装されているコンテンツにおいては、要素には完全な開始タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属性がなく、どの ID も一意的である。ただし、仕様で認められているものを除く。

筆者による上記引用のハイライト部分“どのIDも一意的であること”について見てみる。たとえば以下のHTML断片のように、1つのページに同じid属性値が2回出現することはHTMLのエラーであり、かつ、WCAGの達成基準の違反となる:

<div id="id_1">...</div>
<div id="id_1">...</div>

このようなHTMLのエラーのほかに、達成基準4.1.1の対象となるすべての問題をNu Html Checkerは検出できるので、その対象となるエラーを0にすることは、達成基準4.1.1を満たすために必要なことである。また、Nu Html Checkerが報告するエラーを0にすることによって、達成基準4.1.1を十分に満たすことができる。

すべてのNu Html Checkerが報告するエラーを0にすることは、WCAGの達成基準を満たすために必要ではない。たとえば、次のようなHTML断片は、HTML仕様に違反しているためにエラーとなるが、このエラーはどのWCAG達成基準にも違反していることにはならない:

<!-- div要素にx-error属性は存在しない -->
<div x-error="hoge">...</div>

また、warningは(当然ではあるが)HTMLのエラーではなく、たいていの場合、どのWCAG達成基準の違反にもならない。たとえば、script要素のtype属性は(冗長で)不要であるために検出される:

<!-- script要素のtype属性は不要である -->
<script type="application/javascript" src="script.js"></script>

ただし、特定のwarning2は、達成基準の違反となる。たとえば、次の項目は後述のAxe DevToolsで達成基準4.1.2の問題として報告される:

<!-- See: WAI-ARIA 1.2 https://www.w3.org/TR/wai-aria-1.2/#prohibitedattributes -->
<div aria-label="label text">...</div>

Nu Html Checkerでエラーもwarningも0にすることは、WCAGの(全部の)達成基準を満たすために必要でも十分でもない。しかし、特定のエラーおよびwarningは、達成基準を満たすための必要条件となる(ただし、どのエラーやwarningがどの達成基準に関連するのか、Nu Html Checker自身は教えてくれない)。このことから、Nu Html Checkerによるエラーもwarningも0にすることを、WCAG達成基準の観点から個人的には強く推奨する。

Axe DevToolsの場合

Axe DevTools3は、ウェブアクセシビリティをチェックするツールとして知られている。

たとえば、次のようなHTML断片について、Axe DevToolsは(コントラスト比4.5:1未満であるというコントラスト比の問題として)エラーを検出する:

<style>
body { 
  background-color: #fff;
}
a {
  color: #0088cc; /* コントラスト比 3.9:1 */
}
a:hover {
  color: #005580; /* コントラスト比 8:1 */
}
</style>
...
<a href="/link">リンクテキスト</a>

しかし、以下のHTML断片に対して、Axe DevToolsは、ホバー時のコントラスト比に問題があることをエラーとして検出できない:

<style>
body { 
  background-color: #fff;
}
a {
  color: #005580; /* コントラスト比 8:1 */
}
a:hover {
  color: #0088cc; /* コントラスト比 3.9:1 */
}
</style>
...
<a href="/link">リンクテキスト</a>

Axe DevToolsに限らず、ウェブアクセシビリティのツールで検出される「エラーとなる」項目を0にすることは、達成基準を満たすために必要であるが、ツールはすべての達成基準上の問題を検出できるわけではないので、十分ではない。

いわゆるスキップリンクについて

WCAG 2.1には「ブロックスキップ」という達成基準がある:

達成基準 2.4.1 ブロックスキップ (レベル A): 複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる。

この達成基準を満たすための、「十分な達成方法」は大きく2つのパターンがある。この記事で説明するWCAG 2.1達成方法集にある達成方法もあわせて示す:

  1. 繰り返されるブロックをスキップするリンクを作成する
  2. スキップ可能な方法で繰り返されるブロックをグループ化する

具体例としてW3C WAIのページを用いて説明する。

このページでは、ページの冒頭に「Skip to Content」というリンクがあり、このリンクでメインコンテンツまで「スキップ」できる。これはG1の達成方法そのものである。以下にコード断片を示す:

<nav>
  <ul>
    <li><a href="#main">Skip to Content</a></li>
    ..
  </ul>
</nav>
<header>...</header>
<main id="main">
  ...
  <h2 id="mwa-title">
    <span class="title">Making the Web Accessible</span>
  </h2>
  ..
</main>

一方で、メインコンテンツ(main要素の箇所)の開始位置には見出し要素が提供されている(これはH69そのものである)。つまり、2種類の方法でブロックスキップの達成基準は満たされている。見方を変えると、適切な箇所に見出しさえ提供できていれば、H69の達成方法となるため、自動的にブロックスキップの達成基準は満たされることになる。言いかえると、WCAGの達成基準を満たすために、スキップリンクを導入することは必須ではない4

ところで、ARIA11はARIAランドマークとしてmainロールについて言及しているが、main要素について言及しているわけではない。つまりARIA11そのものではない(しかしmain要素はmainロールと同じ機能なので、ARIA11と同等である)。

これはつまり、解説書の達成方法にあるように、

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

とあるとおりである。ARIA11ではない、ARIA11によく似た方法で、達成基準は満たすことは可能である。

達成方法の位置づけ

前述のARIA11に関連するケースを念頭において、解説書の記述を読んでみる。

その他の達成方法には次のような文言がある:

W3C の WCAG 2.1 達成方法集文書にある達成方法に加えて、WCAG 達成基準を満たすその他の方法がある。W3C の達成方法は包括的なものではなく、より新しい技術や状況をカバーしていないかもしれない。

ウェブコンテンツは、WCAG 2.1 に適合するために W3C が公開している達成方法を用いなくてもよい。(上記達成方法は参考情報であるも参照のこと。)

達成方法は参考情報であるには次のような文言がある:

達成方法は、参考情報である。つまり、達成方法は必須要件ではない。WCAG 2.1 への適合を判断する根拠は、WCAG 2.1 で規定している達成基準であり、達成方法ではない。

注記 1: W3C は、W3C の十分な達成方法の要求に対して注意を促す。求められる唯一のことは WCAG 2.05 達成基準を満たすことである。

つまり、WCAG 2.1達成方法集に記載されている達成方法は、WCAG 2.1を満たすための参考情報にしか過ぎない

まとめ

  • ツールによる機械的なチェックでチェックできることは限られている
    • ツールにはエラーではないものも検出する(当たり前ではあるのだけれど)
  • WCAG2達成方法集は参考情報にしか過ぎない
    • 達成方法集はすべてをカバーしてはいない
    • 達成方法集に書いていることに全部従う必要はない

  1. 注意を払って書いたつもりだけれども、間違っている箇所があるかもしれない。

  2. 記事執筆時点では。将来、エラーとして報告されるようになるかもしれない。

  3. 執筆時点のバージョンは、axe-core 4.4.2

  4. HTML解体新書のp.167にもあるとおり。

  5. 原文ママ

(メモ)WCAG2のコントラスト比4.5:1とその周辺の話

色のこと、思い出してはわからんってなっているんだよなあ…。

なおAPCAの話はしない。いくつかGitHubのissueを参照してるけれども、@Myndexが書いていることは長ったらしいので基本的に無視している。

あと書き散らしているので、まとまっているようで実はまとまっていない。メモだから仕方ない。

に「 WCAG2までの議論(2022-07-23追記)」を追記した。

コントラスト比の定義(WCAG2による)

WCAG 2.1達成基準1.4.3コントラスト比(最低限)では、コントラスト比4.5:1という数値が提示されている。コントラスト比の定義は、以下のとおり:

 \displaystyle
\frac {(L_1 + 0.5)} {(L_2 + 0.5)}

ここで、 L_1 は明るい方の相対輝度、 L_2 は暗い方の相対輝度である。

相対輝度の定義は、最も暗い黒を0に、最も明るい白を1に正規化した色空間内の任意の点の相対的な明るさ。である。

ここでsRGB色空間においては、色の相対輝度は、

 \displaystyle
L = 0.2126 \pmb{R} + 0.7152 \pmb{G} + 0.0722 \pmb{B}

と定義されており、\pmb{R}\pmb{G}\pmb{B}は以下のように定義される。

 R_{sRGB} \leqq 0.03928の場合、\pmb{R} = R_{sRGB}/12.92、そうでなければ \pmb{R} = [\frac{(R_{sRGB} + 0.055)}{1.055}] ^ {2.4}

G_{sRGB} \leqq 0.03928の場合、\pmb{G} = G_{sRGB}/12.92、そうでなければ \pmb{G} = [\frac{(G_{sRGB} + 0.055)}{1.055}] ^ {2.4}

B_{sRGB} \leqq 0.03928の場合、\pmb{B} = B_{sRGB}/12.92、そうでなければ \pmb{B} = [\frac{(B_{sRGB} + 0.055)}{1.055} ]^{2.4}

 R_{sRGB}G_{sRGB}B_{sRGB}は以下のように定義される。

 R_{sRGB} = R_{8bit} /255

 G_{sRGB} = G_{8bit} /255

 B_{sRGB} = B_{8bit} /255

この計算式は、[sRGB]及び[IEC-4WD]を参考にしているとされるが、正確にはIEC 61966-2-1:1999を引く必要があるはず。現に、CSS Color Module Level 4参考日本語訳1のReferenceでは、[sRGB]としている(が、WCAGではそうはなっていない)。

さておき、手計算すればCCAと同じ結果が得られるのでこれはわかる。

sRGBの定義([css-color-4]による)

ところで、[css-color-4]ではしきい値は0.03928ではなく、0.04045を用いている。w3c/wcag#360にそのあたりのことが書いてあると思っているけど、ちゃんと追いかけていない。

CCAとChromeコントラスト比の計算結果がたまに違うのは、数式が原因なのか、四捨五入が違うせいなのか…は、手計算してないので確かめられていない。

本当にWCAG2の計算式でよいのか?という疑問も少しあるが、とはいえしきい値が変わるだけなので、大勢に影響するわけではないだろう。

sRGBの色域外の色

WCAG2の相対輝度では、

コンテンツを処理して表示するのに別の色空間が用いられている事が分かっているのでない限り、コンテンツ制作者は sRGB 色空間を用いて検証するべきである。もしその他の色空間を用いるのであれば、Understanding Success Criterion 1.4.3 を参照。

と、いかにもそれっぽいことが書いてあるものの、sRGB以外のことの詳細がWCAG 2.1解説書 達成基準 1.4.3: コントラスト (最低限)を理解するには書かれていないと理解している。

色域外(out of gamut)2というか、定義済み色空間では、sRGB以外の色空間がCSS Color Level 4で定義されている。

  • display-p3 [Display-P3] — 現在の広色域モニタに典型的な,広色域空間。
  • prophoto-rgb — 写真家たちから広く利用されている
  • rec2020 [Rec.2020] — 現実のほぼすべての可視色を表現できる超広色域空間であり、 普及している工業規格である。

まあこのあたりから筆者の理解がものすごく怪しくなってくるわけなんだけども、WCAG2はsRGBより外の色のことを考えられていない。

4.5:1のコントラスト比の根拠を追う

WCAG 2.1解説書 達成基準 1.4.3: コントラスト (最低限)を理解するでは、コントラスト比を定めた論理的根拠が記載されている。いわく、

3:1 のコントラスト比は、標準的なテキスト及び視力における [ISO-9241-3] 及び [ANSI-HFES-100-1988] によって推奨されている最低限のレベルである。4.5:1 のコントラスト比は、中度の弱い視力、先天的又は後天的な色覚異常、もしくは典型的な加齢に伴うコントラスト感度の衰えに起因する、コントラスト感度の低下を考慮するためにこの規定で使用される。

論理的根拠は、a) ANSI 標準規格 (American National Standards Institute: 米国の国家規格) における正常な観察者に対する最低限の許容可能なコントラストとして、コントラスト比 3:1 の採用、及びb)集団内では、20/40 (0.5) の視力は、おおよそ 1.5 のコントラスト感度低下と関連付けられているという経験的事実 [ARDITI-FAYE] に基いている。したがって、視力が 20/40 (0.5) の利用者は、「3 * 1.5 = 4.5:1」のコントラスト比を必要とするであろう。類似した実証的事実及び同じ論理に沿うと、視力が 20/80 (0.25) の利用者は、約 7:1 のコントラスト比を必要とすることになる。

4.5:1 のコントラスト比は、約 20/40 (0.5) の視力に等しい視覚損失をもつ利用者によって通常経験されるコントラスト感度の低下を埋め合わせをするため、レベル AA に対して選択された。20/40 (0.5) は、80 歳前後の高齢者の典型的な視力として、よく報告される視力である。[GITTINGS-FOZARD]

Understanding WCAG 2.1(WCAG 2.1解説書)ではReferenceが削除されているので、Understanding WCAG 2.0のAppendix Eも見る必要がある。

[ISO-9241-3]と[ANSI-HFES-100-1988]

ここでいう[ISO-9241-3]は、

ISO 9241-3, Ergonomic requirements for office work with visual display terminals (VDTs) - Part 3: Visual display requirements. Amendment 1.

であり、ISO 9241-3:1992/AMD 1:2000のことであるが、すでにこの規格は廃止されている。ISO 9241-304:2008を当たる必要がある。

また、ここでいう[ANSI-HFES-100-1988]は、

ANSI/HFS 100-1988, American National Standard for Human Factors Engineering of Visual Display Terminal Workstations, Section 6, pp. 17-20.

であるが、https://www.hfes.org/publications/technical-standardsいわく、

In November 2007, the American National Standards Institute approved ANSI/HFES 100-2007, Human Factors Engineering of Computer Workstations as an American National Standard. This document replaces BSR/HFES 100-2002 and ANSI/HFS 100-1988.

となっており、同じく廃止されている。

参考までに、2016年に書かれた修論ロービジョン者に見やすいディスプレイのコントラスト比に関する研究ではJIS Z 8513:2006を改良している

計算式に関する注記いわく、

RGB 値の非線形から線形への変換は、IEC/4WD 61966-2-1 [IEC-4WD] 及び "A Standard Default Color Space for the Internet - sRGB" [sRGB] に基づいている。

コントラストの計算式 (L1/L2) は、[ISO-9241-3] 及び [ANSI-HFES-100-1988] 規格に基づいている。

ANSI/HFS 100-1988 規格では、L1 及び L2 の計算を含むために、周辺光からの寄与を必要とする。用いている 0.05 という値は、[IEC-4WD] の Typical Viewing Flare 及び M.Stokes et al の論文 [sRGB] に基づいている。

[ARDITI-FAYE]

[ARDITI-FAYE]は、

Arditi, A. and Faye, E. (2004). Monocular and binocular letter contrast sensitivity and letter acuity in a diverse ophthalmologic practice. Supplement to Optometry and Vision Science, 81 (12S), 287.

[GITTINGS-FOZARD]

[GITTINGS-FOZARD]は、

Gittings, NS and Fozard, JL (1986). Age related changes in visual acuity. Experimental Gerontology, 21(4-5), 423-433.

これは、https://doi.org/10.1016/0531-5565(86)90047-1からダウンロードできる。

WCAG2までの議論(追記)

WCAG 2.0のメーリングリストのログを面倒くさがって追いかけてなかったわけだけども、 A11YJのSlackでThe Web KANZAKIコントラスト比の話が取り上げられている話が出されるまで、すっかりその存在を失念してたよ…

上記の記事からは、Techniques For Accessibility Evaluation And Repair Toolsという文書が参照されているけれども、これはW3C Working Draft, 26 April 2000というステータスで、概要としては

This document describes techniques that Web accessibility validation tools may use to evaluate the conformance of HTML documents to the Web Content Accessibility Guidelines 1.0 (WCAG 1.0).

という塩梅でWCAG 1.0に関連する文書なわけなんだけども、20世紀の遺物がDraftのまま放置されているのはまあW3C WAIの悪いところですね…。

とりあえずのまとめ

今回調べた範囲では、

  • WCAG2のsRGBの計算式の厳密性に怪しさがある。少なくとも、CSS Color 4と異なる計算をしていることになる
  • WCAG2は(当然だが)sRGBしか考えていない
  • 3:1とした元文献は少なくともISOを見ないといけないので、この目で確かめられていない
  • 4.5:1とした根拠となる、1.5という乗数の元文献がウェブ上では見つけられなかった

おまけ

また、CSS Color 4には深く突っ込んでいかなかった(というか突っ込めなかった)けれども、以下のページがきっと参考になるはず。

読んでないけれども、2011年の年代別分光視感効率に基づくWCAG 2.0輝度コントラスト比達成基準の評価は類似の研究になるかもしれない。


  1. 2022-07-05付けでCRになり、CSSの定義の一部になる(ことになる、csswg-drafts/7455)ので、いい加減読み込まないと…と思って何もできてないという。

  2. 訳語は日本語参考訳によるhttps://triple-underscore.github.io/css-color-ja.html#out-of-gamut

  3. https://code.visualstudio.com/updates/v1_58