達成基準 1.4.8 の失敗例 - 両端揃え (左右両方のマージンを揃える) のテキストを使用している

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

全てのウェブコンテンツ技術

これは達成基準 1.4.8: 視覚的提示 (失敗) に関する達成方法である。

解説

認知障害のある利用者の多くは、両端揃え (左右両端を揃えた配置) されたテキストのブロックで重大なトラブルに陥ることがある。単語間のスペースによって、ページ上を流れる「リバー (rivers of white)」ができる。それによって、一部の人々はテキストを読むことが困難になる。この失敗例は、この混乱させるテキストレイアウトが発生する状況について説明している。この問題を回避する最良の方法は、両端揃え (左右両端を揃えた配置) されたテキストレイアウトにしないことである。

事例

例 1

次の失敗例では、HTML の align 属性が両端揃えのテキストを生成するために用いられている。

 
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus 
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec 
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus. 
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum 
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo 
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.
</p>

例 2

この失敗例では、CSS の text-align 属性が両端揃えのテキストを生成するために用いられている。

 
...
p {text-align: justify}

...

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus 
nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec 
ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus. 
Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum 
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo 
justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.</p>

検証

手順

  1. 一般的なブラウザでページを開く。
  2. コンテンツが両端揃え (左右両端を揃えた配置) されていないことを確認する。

期待される結果

  • #2 の結果が偽である場合、この失敗例の条件は適用され、コンテンツは達成基準 1.4.8 の失敗となる。