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

意図

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

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

読み書き障害又は視覚の障害のある人にとっては、長い行のテキストは大きな障壁となりうる。彼らは、自分が読んでいる位置を把握し続けることや、テキストの行送りを目で追うことが苦手である。テキストのブロックの幅を狭くすることで、そういった人はテキストのブロックを読んでいるときに次の行へ読み進めていきやすくなる。行は、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」、「→」(矢印の記号)、そして「さ」(日本語の文字) などが挙げられる。

関連リソース

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

• CSS 2 Box Model
• CSS 2 Visual formatting Model
• CSS 2 Visual formatting Model Details
• About fluid and fixed width layouts
• Accessible CSS
• Ideal line length for content
• Developing sites for users with Cognitive disabilities and learning difficulties
• RDFA Primer
• MULTIFUNK: Bringing computer-supported reading one step further, Date: April 2002, ISBN: 82-539-0491-6, Author: Gjertrud W. Kamstrup, Eva Mjøvik, Anne-Lise Rygvold og Bjørn Gunnar Saltnes
• Effective Monitor Display Design on the ERIC Web portal
• Cognitive difficulties and access to information systems - an interaction design perspective", Peter Gregor and Anna Dickinson, Applied Computing, University of Dundee
• Legge, G.E., Pelli, D.G., Rubin, G.S., & Schleske, M.M.:Psychophysics of reading. I. Normal Vision,Vision Research, 25, 239-252, 1985.
• Legge, G.E., Rubin, G.S., Pelli, D.G., & Schleske, M.M.:Psychophysics of reading. II. Low Vision,Vision Research, 25, 253-266, 1985.
• Osaka,N. and Oda, K. (1991). Effective visual field size necessary for vertical reading during Japanese text processing. Bulletin of Psychonomic Society,29(4),345-347.
• Beckmann, P.J. & Legge, G.E. (1996). Psychophysics of reading. XIV. The page-navigation problem in using magnifiers. Vision Research, 36, 3723-3733.
• 川嶋英嗣・小田浩一(2003).読書におけるスクロール方向とウィンドウ幅の影響　日本心理学会第67回大会, 502.
• 小田浩一・今橋真理子(1995). 文字認知の閾値と読みの閾値. VISION, 7, 165-168.
• Osaka,N. (1994). Size of saccade and fixation duration of eye movements during reading: psychophysics of Japanese text processing. Journal of Optical Society of America A, 9(1), 5-13.
• 山中今日子・小田浩一 (2007). 漢字の画数と書体のウェイトが視認性に及ぼす 影響. 視覚学会2007年夏季大会ポスター 1p1 Vision, P.167.
• Line Length, Volume, and Density
• Guidance on accessible publishing
• An Accessibility Frontier: Cognitive disabilities and learning difficulties
• Cognitive/Perceptual Difference And Good Web Design
• 6 Surprising Bad Practices That Hurt Dyslexic Users
• Design for Dyslexics
• Web Design for Dyslexia

達成方法

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

重要な用語