達成基準 1.3.2 の失敗例 - 単語内の間隔を制御するために、空白文字を使用している

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

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

適用 (対象)

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

これは達成基準 1.3.2: 意味のある順序 (失敗) に関する達成方法である。

解説

この文書は、単語を視覚的にフォーマットするために、単語の中でスペース、タブ文字、改行文字又はキャリッジリターンのような空白文字を用いると、それらを意味のある並びとして適切に提示するのが困難になるという失敗例について解説する。文字間を制御するために空白文字を挿入すると、単語の解釈を変えてしまうかもしれないし、それが一つの単語であるとプログラムで解釈できないようにしてしまうことがある。

頭文字語の文字間に空白文字を挿入することはこの失敗例には当たらない。空白文字が頭文字語の解釈を変えるわけではないし、むしろ理解しやすくするかもしれないからである。

単語間のスペースを利用して視覚的なフォーマットを行うことはこの失敗例には当たらない。空白文字が単語の解釈を変えることはないからである。

事例

例 1: 単語の途中に空白を挿入することによる失敗例

この事例では、見出しとして文字をまばらに配置するために単語の途中にスペースを置いている。スクリーンリーダーは、"Welcome" という単語としてではなく、文字を一つずつばらばらに読み上げてしまうだろう。

<h1>W e l c o m e</h1>

&nbsp; を用いてスペースを追加することもできるが、同様の失敗例となる:

<h1>H&nbsp;E&nbsp;L&nbsp;L&nbsp;O</h1>

例 2: 単語の途中に入れた空白によって意味が変わってしまう

日本語においては、一つの漢字がそれぞれ意味の異なるいくつかの読み方を持っていることがある。この例では、スクリーンリーダーは空白文字があるためにこれらの文字列を一つの単語と認識できず、誤った読み方をしてしまう可能性がある。この文字列は「東京 (とうきょう)」を意味しているが、スクリーンリーダーは「ひがし きょう」と読み上げてしまう。

<h1>東 京</h1>

例 3: 縦書きのテキストを表現するために改行文字を使用している

データテーブルの行見出しセルに日本語が含まれる場合に、コンテンツ制作者は改行文字を使用して縦書きのテキストを表現することがよくある。しかし、単語中に改行文字があるために、スクリーンリーダーはこのような縦書き文字列にある単語を正しく読み上げることができない。次の例は「東京都 (とうきょうと)」ではなく「ひがし きょう みやこ」と読み上げられてしまう。

<table>
<caption>表1. 都道府県別一覧表</caption>
<tr>
<td></td>
<th scope="col">(見出しセル 1.)</th>
<th scope="col">(見出しセル 2.)</th>
</tr>
<tr>
<th scope="row">東<br />京<br />都</th>
<td>(データセル 1.)</td>
<td>(データセル 2.)</td>
</tr>
・・・・・・
</table>

検証

手順

文字間に標準的でない空白があるように見える各単語について:

  1. コンテンツのテキストを構成する単語が空白文字を含んでいるかどうかを確認する。

期待される結果

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