WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

F88: 達成基準 1.4.8 の不適合事例:両端揃え(左右両端を揃えた配置)のテキストを用いる

適用(対象)

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

これは、次の達成基準に関連する不適合事例である:

解説

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

事例

不適合事例 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. コンテンツが両端揃え(左右両端を揃えた配置)されていない。

判定基準

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。