水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > JIS X 8341-3:2010の達成基準は難しい

JIS X 8341-3:2010の達成基準は難しい

2011年4月28日(木曜日)

JIS X 8341-3:2010の達成基準は難しい

公開: 2011年4月29日19時45分頃

こんな記事がありますね……「中央省庁Webサイトのアクセシビリティ対応はまだ不十分 日経BPコンサルティングが調査結果を発表 (pc.nikkeibp.co.jp)」。

この調査では、同社が独自に設けた20の項目について調べた(調査概要)。項目は大きく3つに分類される。知覚に関する項目(説明が必要な画像に代替テキストを付与しているか、など)、操作に関する項目(キーボードのみで適切にページ移動ができるか、など)、理解に関する項目(Webページで使われている言語が明示されているか、など)である。いずれの項目も、2010年8月に公示されたWebアクセシビリティに関する規格「JIS X 8341-3:2010」を参考にして設定されている。

JIS X 8341-3:2010という名前はちらっと出ているものの、これはあくまで独自調査です。JIS X 8341-3:2010に書かれている検査のやり方や報告の仕方とは全く違うものになっています。

点数で評価されているのも微妙で、この採点方法では「等級Aの項目は全て満たしているがAA項目を満たしていない」というケースと「等級Aに満たしていない項目があるがAA項目は全て満たしている」というケースが同じ評価になったり、下手すると後者の方が高評価になってしまう可能性があります (実際には、等級Aを満たしていないケースの方がアクセシビリティ上の問題が大きい)。

また、調査概要 (pc.nikkeibp.co.jp)を見ると、調査項目に対応するJISの達成基準が掲げられています。しかしよく見ると、JISの達成基準とはかなり違う内容になっているものも見受けられます。以下、気になったところをいくつかコメントしておきます。

7.1.4.4 テキストのサイズ変更に関する達成基準

まず明らかに違うのが、「200%に表示を拡大したとき、文字情報をきちんと読み取れるか」という基準です。それに対応するはずのJIS X 8341-3:2010の7.1.4.4は、実際には以下のような内容になっています。

7.1.4.4 テキストのサイズ変更に関する達成基準

コンテンツ又は機能を損なうことなく,テキストを支援技術なしで200%までサイズ変更できなければならない。ただし,キャプション及び画像化された文字は除く。

以上、JIS X 8341-3:2010 7.1.4.4 より

「200%までサイズ変更できる」ことが要件で、「拡大したものが読めるかどうか」という話とは違います。最近のブラウザはほとんどが拡大機能を備えていますので、HTMLで実装されたページの多くは、何も意識しなくてもこの達成基準を満たすでしょう。ただし、拡大時に崩れたり、文字が重なったりして読めなくなることがないように注意する必要があります。

※JIS側では、拡大後に読めるかどうかまでは問うていません。あるサイズの文字が読めるかどうかは人によって違うので、「読めるかどうか」を判断しようとすると、人によって判断基準が異なってきてしまいます。どんな視力の人でも読めるように、自由に拡大ができるということが重要でしょう。

7.1.4.5 画像化された文字に関する達成基準

次に気になったのは「画像として用意されている文字情報をテキストでも取得できるか」という基準です。対応するはずのJIS X 8341-3:2010 7.1.4.5は以下のような内容です。

7.1.4.5 画像化された文字に関する達成基準

使用しているウェブコンテンツ技術で意図した視覚的な表現が可能である場合は,画像化された文字ではなくテキストを用いて情報を伝えなければならない。ただし,次に挙げる場合を除く。

a) カスタマイズ可能 画像化された文字が利用者の要求に応じて視覚的にカスタマイズできる。

b) 必要不可欠 文字の特定の表現が,伝えようとする情報にとって必要不可欠である。

以上、JIS X 8341-3:2010 7.1.4.5 より

画像にはもちろん代替テキストをつけるのですが、画面上で画像が見える人でも、テキストを拡大したり色を反転したり行間を広げたりしたいことがあります。むやみにテキストを画像にしてしまうと、そういった処理がやりにくくなってしまいます。そのため、必要もないのにテキストを画像することは避けた方が良い、というのがこの基準です。

ただし、7.1.4.5では例外を認めています。まず、この基準自体が「意図した視覚的な表現が可能である場合は」という状況に限定されたものになっています。つまり、「テキストでは意図した視覚表現ができないので画像にした」というケースはOKです。また、利用者が画像化文字をカスタマイズできる場合や、「文字の特定の表現が、伝えようとする情報にとって必要不可欠」な場合もOKとされています。

※たとえば、漢字の字形を正確に伝える必要があるような場合は「特定の表現が不可欠」なケースに該当するでしょう。人名に使われる特殊な漢字を表現する必要があるようなケースはこれにあたります。

なお、この達成基準に似たものに、7.1.4.9があります。

7.1.4.9 画像化された文字に関する例外のない達成基準

画像化された文字は,装飾だけを目的に用いられているものであるか,又は特定の形でテキストを表現することが伝えたい情報にとって必要不可欠であるものか,のいずれかでなければならない。

以上、JIS X 8341-3:2010 7.1.4.9 より

こちらは等級AAAの達成基準なので、7.1.4.5(等級AA)にあった例外を認めていません (ただし、注意書きでロゴタイプは除くとされています)。

簡単にまとめると、こんな感じです。

  • 7.1.4.9 …… 等級AAA。テキストを画像にしては駄目。例外は認めない。(ただしロゴタイプは除く)
  • 7.1.4.5 …… 等級AA。テキストを理由もなく画像にしては駄目。ただし、意図した視覚表現のために必要な場合はOK。利用者がカスタマイズできる場合もOK。文字の特定の表現が必要な場合もOK。

7.1.4.5にはかなりの例外が認められていることが分かるでしょう。この調査で使用されている基準は、むしろ7.1.4.9のほうに従っているように思えます。

7.2.4.4 文脈におけるリンクの目的に関する達成基準

それから、少し気になるのが「リンク先の内容を適切に予想できる形でリンクが設定されているか」という基準です。対応する7.2.4.4は誤解されやすい達成基準です。

7.2.4.4 文脈におけるリンクの目的に関する達成基準

それぞれのリンクの目的が,リンクのテキストだけから,又はプログラムが解釈可能なリンクの文脈をリンクのテキストと合わせたものから解釈できなければならない。ただし,リンクの目的が一般的にみて利用者にとってあいまい(曖昧)な場合は除く。

以上、JIS X 8341-3:2010 7.2.4.4 より

これを読んで、「こちら」リンクを禁止する基準だな、と思われた方はいませんか? あわてずに7.2.4.9を読む必要があります。

7.2.4.9 リンクの目的に関する達成基準

それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能でなければならない。ただし,リンクの目的が一般的にみて利用者にとってあいまい(曖昧)な場合は除く。

以上、JIS X 8341-3:2010 7.2.4.9 より

そう、「こちら」リンク禁止は7.2.4.9(等級AAA)なのです。7.2.4.4(等級AA)は前後の文脈からリンクの目的が分かるケースでも良い事になっています。

この調査で7.2.4.4をどのように判定しているのかはっきりとは分かりませんが、7.2.4.4の基準なら、ほとんどのサイトでは問題ないはずです。

JIS X 8341-3:2010の達成基準は難しいと思います。守ることが難しいのではなく、基準の内容を理解するのが難しいという意味です。誤解されやすい達成基準がたくさんありますし、規格票本体には解説もほとんどついていません。理解したいと思ったら、最低でもUnderstanding WCAG 2.0 (www.w3.org)や、その日本語訳であるWCAG 2.0 解説書 (waic.jp)を読んだほうが良いと思います。

「新しいJISは厳しくなっている」という声も良く聞きます。しかし実際は、動画や音声を使うケースでもない限り、そんなに厳しくはなっていないはずです。先に述べたような項目を誤解して、「厳しくなった」と思われている方もいるのではないでしょうか。そうだとすれば、これは普及の壁にもなっていると思います。

※わかりやすい定番解説書のようなものがあると良いのかもしれませんが……。

関連する話題: Web / アクセシビリティ

最近の日記

関わった本など

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターンデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践ウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)

その他サイト