入れ子になったテキストの表記方向に伴う問題を解決するために、インライン要素の dir 属性を使用する

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

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

適用 (対象)

HTML 及び XHTML

これは達成基準 1.3.2: 意味のある順序 (G57: コンテンツを意味のある順序で並べるの達成方法として十分) に関する達成方法である。

解説

この達成方法の目的は、入れ子になった表記方向が含まれるテキストについて、インライン要素の dir 属性で方向の変化を指定することである。入れ子になったテキストの表記方向とは、たとえば英語のパラグラフで、文章が次々と続いている中にヘブライ語の引用文が含まれるといった、表記方向の異なるテキストが混在したテキストの表記方向のことである。表記方向の異なるテキストが混在し、スペースや句読点が含まれていると、Unicode の双方向アルゴリズムだけでは望ましくない結果になってしまうので、テキストを span 要素や他のインライン要素で囲み、dir 属性を指定する必要がある。この達成方法の考え方は、What you need to know about the bidi algorithm and inline markup で説明されている。

訳注:

上記の「What you need to know about the bidi algorithm and inline markup」は、「Inline markup and bidirectional text in HTML」とタイトルが変更されている。

事例

事例 1

この事例では、ヘブライ語と英語のように、混在したテキストの表記方向を持つ文章で、右から左へと表記すべき入れ子になったテキストの表記方向を明らかにする。引用全体はヘブライ語であり、右から左に表記されるが、「W3C」というテキストとカンマは、次のようにヘブライ語のテキストの左側に (すなわち、後ろに) 現れるべきである:

The title is "פעילות הבינאום, W3C" in Hebrew.

視覚的な順序に基づく ASCII (右から左へ表記するテキストは大文字で、左から右へ表記するテキストは小文字で書く) では、次の通りである:

the title is "w3c ,YTIVITCA NOITAZILANOITANRETNI" in hebrew.

正しく表示するためには、Unicode の双方向アルゴリズムだけでは不十分なため、次に示すように「W3C」というテキストが引用の中で右側に置かれたままである:

The title is "פעילות הבינאום, W3C" in Hebrew.

視覚的な順序に基づく ASCII では、次の通りである:

the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.

次のようにマークアップすることによって、期待する結果が得られる。

<p>The title says "<span lang="he" 
dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p> 

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

  1. 文書内のテキストの表記方向を調べる。
  2. テキストの表記方向が右から左である場合、属性の値が "rtl" である、dir 属性を持つ先祖要素を確認する。
  3. テキストの表記方向が左から右である場合、dir 属性を持つ先祖要素がない、又は属性の値が "ltr" である、dir 属性を持つ先祖要素がないことを確認する。

期待される結果

  • 全てのテキストに対して 2. 及び 3. の結果が真である。