達成基準 1.4.8: 視覚的提示を理解する

達成基準 1.4.8 視覚的提示 (レベル AAA): テキストブロックの視覚的提示において、次を実現するメカニズムが利用できる:

意図

この達成基準の意図は、視覚的に描画されるテキストを、そのレイアウトにより読みやすさを損なうことなく、知覚できるように提示することである。認知の障害、言語の障害、及び学習障害のある利用者やロービジョンの利用者は、彼らにとってテキストが読みづらい方法で提示されていると、そのテキストを知覚できなかったり、どこを読んでいるのかが分からなくなったりすることがある。

視覚障害又は認知障害のある人は、テキストの色及び背景色を選択できる必要がある。彼らは、その障害のない人にとっては直感に反するように思える組み合わせを選んでいることがある。その組み合わせは、コントラストが非常に低いこともある。非常に限定された色の組み合わせしか有効でないこともある。テキストによる提示の色又はその他の外観を制御することは、そういった人の読解力に大きな違いをもたらす。

読字障害又は視覚障害のある利用者にとっては、長い行のテキストは大きな障壁となりうる。彼らは、自分が読んでいる位置を把握し続けることや、テキストの行送りを目で追うことが苦手である。テキストのブロックの幅を狭くすることで、そういった利用者はテキストのブロックを読んでいるときに次の行へ読み進めていきやすくなる。行は、80 文字又はグリフ (中国語、日本語、韓国語の場合は、40 文字) を超えるべきではない。ここでグリフは、テキストの書記体系における表記の要素である。諸研究によれば、中国語、日本語、及び韓国語の文字は、アルファベット文字と同じ読みやすさで表示すると、幅がほぼ 2 倍になる。そこで、中国語、日本語、及び韓国語の文字の場合は、行の長さの最長を半分にしている。

認知の障害のある利用者は、行送り幅 (行間隔) が接近していると、テキストを目で追うのが困難である。行送り幅及び段落の間隔をさらに空けることで、次の行へ移動しやすくなり、段落の終わりにたどりついたことも認識しやすくなる。例えば、行送り幅には 1.5 倍と 1 行おきというように、様々な選択肢があるのが最もよい。段落中の行送り幅が 1.5 文字分あるというのは、ある行のベースラインと次の行のベースラインとが、テキストが「シングルスペース」(そのフォントでのデフォルトの行送り幅) の 150%離れていることを意味する。そして、段落の間隔が行送り幅の 1.5 倍広いというのは、ある段落の最終行のベースラインが次の段落の最初の行のベースラインから 250%離れていることを意味する (言い換えれば、二つの段落の間に、シングルスペースの空行の 150%に相当する、空行が 1 行あるということである)。

特定の認知障害のある人は、均等割り付けされているテキストを読むのに問題を抱えている。左右両端を揃えた状態で行ごとに単語間 (日本語では文字間) がまちまちの場合に、空白が「白い川」のようにページの下のほうへ流れているように見えると、テキストが読みづらくなり、全く読めなくなることもありうる。また、テキストの均等割り付けは、単語間が近くなりすぎて、単語と単語の分かれ目が分かりづらくなってしまうこともある。

テキストのサイズ変更は、視覚的に描画されるテキスト (視覚的に見ることができるように表示されたテキストの文字 [対 ASCII のようにデータとしての属性を持つテキスト]) を、利用者がすべてのコンテンツを見るのに左右にスクロールすることのないように、問題なく拡大可能にすることである。それが可能なようにコンテンツが制作されていると、コンテンツは折り返しになる。これにより、ロービジョンの利用者及び認知の障害のある利用者は、混乱することなく、テキストのサイズを拡大することができるようになる。

コンテンツを拡大縮小することは、第一にユーザエージェントが果たすべき役割である。UAAG 1.0 チェックポイント 4.1 を満たしているユーザエージェントは、利用者がテキストの拡大縮小を設定できるようにしている。コンテンツ制作者が果たすべき役割は、ユーザエージェントがコンテンツを効果的に拡大縮小できるように、そして表示されているビューポートの横幅の中でコンテンツが折り返すように、ウェブコンテンツを制作することである。テキストのサイズ拡大に関するその他の情報は、1.4.4 テキストのサイズ変更を参照のこと。

横スクロールする必要がないという要件は、長い語句を 1 行に表示すると利用者が横にスクロールする必要があるような、小さい画面の端末に適用することを意図していない。この要件の目的のためには、コンテンツ制作者は、標準的なデスクトップ/ラップトップの画面でブラウザのウィンドウを最大化した状態で、コンテンツがこの要件を満たすようにしなければならない。利用者は一般的に何年も自分のコンピュータを使い続けるので、この基準をテストする際には、最新のデスクトップ/ラップトップの画面解像度ではなく、数年間にわたって普及しているデスクトップ/ラップトップの画面解像度を考慮すべきである。

一つの単語が全画面の幅の半分以上になるほど長くない限り、折り返して全体を表示することが可能である。とても長い URI は、拡大された画面からはみ出してしまうかもしれないが、URI は「読む」ためのテキストではないとみなされるので、この基準に反することはない。

この基準は、利用者が横スクロールをする必要が絶対にないということを意味するわけではない。単に、1 行のテキストを読むために、利用者が横スクロールを繰り返す必要がないということを意味しているだけである。例えば、テキストが同じ幅の二段組になっているページは、この基準を自動的に満たしていることになるだろう。ページを拡大するというのは、一つめの段が画面上に全部見えていて、利用者がページを縦にスクロールするだけで読むことができるということを意味する。二つめの段を読むには、利用者は右へ横スクロール移動して、右側の段が画面の幅の中に完全に見える状態にして、それ以上は横にスクロールすることなく、その段を読むであろう。

メリット

この達成基準は、コンテンツの表現はそのままでテキストを読めるようにすることにより、ロービジョンの利用者の役に立つ。テキストのブロックの色及びサイズを調節できるようにすることにより、ロービジョンの利用者は、自分が見やすくなるようにテキストを調節することができるようになる。

この達成基準は、認知の障害、言語の障害、及び学習障害のある利用者がテキストを知覚して、テキストのブロック内での位置を把握できるようにする。

事例

次の画像は、段落内で行間の幅を変えたテキストの例を示している。左から 1 行送り幅、1.5 行送り幅、及び 2 行送り幅になっている。

図形記号の例としては、「A」、「→」(矢印の記号)、そして「さ」(日本語の文字) などが挙げられる。

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

達成方法

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

十分な達成方法

使用法: これは複数の要件から成る達成基準なので、次の要件それぞれについて、番号付きの項目の中から一つを満たさなければならない。

  1. C23: メインコンテンツのテキスト及び背景の色を指定せず、バナー、機能及びナビゲーションなどのような補助的なコンテンツのテキスト及び背景の色を CSS で指定する又は
  2. C25: テキスト及び背景の色は指定せずに、ウェブページの各領域の範囲を明確にするためのボーダーやレイアウトを CSS で指定する又は
  3. G156: テキストのブロックの前景及び背景を変更できる、一般に入手可能なユーザエージェントが備えるウェブコンテンツ技術を使用する又は
  4. G148: 背景色及び文字色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しない又は
  5. G175: 背景色及び前景色のための複数色選択ツールをページ上で提供する又は
  1. G204: 閲覧画面の幅を狭めたときに、ユーザエージェントによるテキストのリフローを妨げない又は
  2. C20: ブラウザがサイズ変更されるときに、行が平均で 80 字以下になるようなカラムの幅を設定するために、相対長さを使用する
  1. C19: CSS でテキストの配置を左寄せ又は右寄せに指定する又は
  2. G172: テキストの両端揃えを解除するためのメカニズムを提供する、又は、
  3. G169: テキストを左寄せ又は右寄せにする
  1. G188: 行間及び段落の間隔を広げるボタンをウェブページ上に提供する又は
  2. C21: 行送り幅を CSS で指定する
  1. G204: 閲覧画面の幅を狭めたときに、ユーザエージェントによるテキストのリフローを妨げない又は
  2. G146: Using liquid layoutかつ、次の達成方法の一つ以上を用いて、コンテンツにあるその他の大きさと相対的な大きさにする

  3. G206: 利用者が横スクロールをしなくてもテキストの行を読めるようにするような、レイアウトを切り替えるオプションをコンテンツの中で提供する

参考達成方法

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

重要な用語

テキストブロック (blocks of text)

一文よりも長いテキスト。

メカニズム (mechanism)

結果を得るためのプロセス又は手法。

注記

メカニズムは、コンテンツ内で明示的に提供されることもあれば、プラットフォーム又は支援技術を含むユーザエージェントで提供されるものに依存することもある。

注記

メカニズムは、宣言する適合レベルのすべての達成基準を満たさなければならない。

全画面表示のウィンドウで (on a full-screen window)

最も普及したサイズのデスクトップやラップトップのディスプレイで、ビューポートを最大化した状態。

注記

利用者は一般的に何年も自分のコンピュータを使い続けるので、この基準をテストする際には、最新のデスクトップ/ラップトップの画面解像度ではなく、数年間にわたって普及しているデスクトップ/ラップトップの画面解像度を考慮すべきである。