コンテンツを意味のあるシーケンスで並べる

適用 (対象)

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

これは、次の達成基準に関連する達成方法である:

• 達成基準 1.3.2 意味のあるシーケンス (十分な達成方法)
• 達成基準 1.3.2 意味のあるシーケンス (より具体的な手法を用いる十分な達成方法)

解説

この達成方法の目的は、支援技術に提示されるコンテンツの順序によって、利用者がコンテンツを理解可能にすることを保証することである。技術の中には、たとえコンテンツが元のソースファイルでエンコードされている順序とは異なるとしても、視覚的にコンテンツを意味のあるシーケンスでレンダリングすることを可能にするものがある。

例えば、HTML で異なる表記方向を持つ言語を混在させる場合、双方向アルゴリズムは視覚的レンダリングの誤った位置に句読点を置くことがある。視覚的レンダリングの問題は、コンテンツストリームにおける句読点を移動することで、双方向アルゴリズムが要望通りに配置するように修正できるが、これは間違ったコンテンツ順序を支援技術に公開する。コンテンツは、双方向アルゴリズムを上書きするためのマークアップを使用することによって、正しい順序で視覚的にレンダリングされ、正しい順序で支援技術に公開される。

視覚的にレンダリングしたとき、スペース又はタブのような空白文字列は、コンテンツの一部としては見えない。しかし、見た目を整えるためにコンテンツに挿入すると、それによってコンテンツの意味に干渉することがある。

より大きな粒度では、レイアウトテーブルを用いて HTML 文書のコンテンツのブロックの配置を制御することによって、見た目には関連する情報を並べて表示することができるが、コンテンツの流れとしては分離されるレンダリングを生成することがある。スクリーンリーダーでは、レイアウトテーブルを行から行へと読み上げるので、イラストのキャプションがイラストに続く行に配置された場合、キャプションとそのイラストの画像とを関連付けられないことがある。

事例

  <h1>My Museum Page</h1>
  <ul id="nav">
    <li><a href="#">Link 1</a></li>
    ...
    <li><a href="#">Link 10</a></li>
  </ul>
  <div id="description">
    <h2>Mona Lisa</h2>
    <p>
    <img src="img.png" alt="Mona Lisa">
    </p>
    <p>...detailed description of the picture...</p>
  </div>
          

  ul#nav {
    float: left;
    width: 9em;
    list-style-type: none;
    margin: 0;
    padding: 0.5em;
    color: #fff;
    background-color: #063;
  }
  ul#nav a {
   display: block;
    width: 100%;
    text-decoration: none;
    color: #fff;
    background-color: #063;
  }
  div#description {
    margin-left: 11em;
  }
        

関連する達成方法

• G59: コンテンツ内のシーケンスと関連性に応じた順序でインタラクティブ要素を配置する
• C6: 構造を示すマークアップに基づいてコンテンツを配置する
• C27: DOM の順序を視覚的順序と一致させる
• F1: 達成基準 1.3.2 の失敗例 － CSS で情報を配置することにより、コンテンツの意味を変えている
• F49: 達成基準 1.3.2 の失敗例 － 線形化したときに、意味を成さない HTML のレイアウトテーブルを使用している

検証