要約

スコープだけでは識別できない複雑なヘッダーや、意味を成すために特定の方法で順序付ける必要がある複雑なヘッダーの場合は、headers属性を使用して、支援技術のユーザーが適切なコンテキストを利用できるようにします。

テクニック

例

例1 — 行末のヘッダー

次の表は、最初の行に出発地が定義され、後続の各行の末尾に目的地が定義された距離チャートを示しています。

この場合、ヘッダーは行の末尾にあるため、「row」のスコープを設定しても、すでに検出されたセルには適用されません。各セルにheaders属性を適用しなければなりません。

このような表は、見出しを行の先頭にして、追加のマークアップをしなくて済むように再構成した方が良いでしょう。

Vancouver Calgary Saskatoon Winnipeg Toronto Montreal St. John's
7323 6334 5838 5010 3141 2602 0 St. John's
4271 3743 3232 2408 539 0 2602 Montreal 
<table>
   <tr>
      <th id="van">Vancouver</th>
      <th id="cal">Calgary</th>
      <th id="sask">Saskatoon</th>
      <th id="win">Winnipeg</th>
      <th id="tor">Toronto</th>
      <th id="mon">Montreal</th>
      <th id="stj">St. John's</th>
      <th></th>
   </tr>
   <tr>
      <td headers="van stj-dest">7323</td>
      <td headers="cal stj-dest">6334</td>
      <td headers="sask stj-dest">5838</td>
      <td headers="win stj-dest">5010</td>
      <td headers="tor stj-dest">3141</td>
      <td headers="mon stj-dest">2602</td>
      <td headers="stj stj-dest">0</td>
      <th id="stj-dest">St. John's</th>
   </tr>
   
   <tr>
      <td headers="van mon-dest">4271</td>
      <td headers="cal mon-dest">3743</td>
      <td headers="sask mon-dest">3232</td>
      <td headers="win mon-dest">2408</td>
      <td headers="tor mon-dest">539</td>
      <td headers="mon mon-dest">0</td>
      <td headers="stj mon-dest">2602</td>
      <th id="mon-dest">Montreal</th>
   </tr>
   …
</table>
例2 — セクション分けされた表

この例では、見出し範囲ページの例1を、headers属性を使用してマークアップし、正しい列、行、セクションヘッダーを関連付ける方法を示します。

headers属性を使用すると、見出しの順序を並べ替えて、別の順序で読み取ることができます (たとえば、スコープで進む場合のデフォルトの「1950 Gondor female」ではなく、「Gondor female 1950」など)。

1950 1975 2000
Gondor
Male 1,001,542 1,583,771 2,221,945
Female 1,122,947 1,782,371 2,544,187
Mordor
… 
<table>
   <thead>
      <tr>
         <th></th>
         <th id="y50">1950</th>
         <th id="y75">1975</th>
         <th id="y00">2000</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th colspan="4" id="gdr">Gondor</th>
      </tr>
      <tr>
         <th id="gmale">Male</th>
         <td headers="gdr gmale y50">1,001,542</td>
         <td headers="gdr gmale y75">1,583,771</td>
         <td headers="gdr gmale y00">2,221,945</td>
      </tr>
      <tr>
         <th id="gfem">Female</th>
         <td headers="gdr gfem y50">1,122,947</td>
         <td headers="gdr gfem y75">1,782,371</td>
         <td headers="gdr gfem y00">2,544,187</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th colspan="4" id="mdr">Mordor</th>
      </tr>
      …
   </tbody>
</table>

解説

注意

headers属性を使用して、製作者はセルに適用するヘッダーとその順序を正確に指定できますが、この属性が必要になるのは、多くの場合、表のレイアウトを簡素化するために再構築するのが望ましいというサインです。さらに、この属性により、変更が行われるたびにすべてのヘッダーを再同期しなければならず、テーブルマークアップの保守がより複雑になります。

したがって、この属性は控えめに使用する必要があります。

headers属性は、id属性値によってヘッダーテキストを含むセルを識別します。属性に含まれるidの順序によって、ヘッダーがユーザーにどのように通知されるかが決まるため、論理的な再生を確実に行うように注意する必要があります。

別の順序の方が意味をなす場合、ヘッダーの順序はマークアップと正確に一致する必要はありません（例2を参照）。

headersの使用は、テーブルを再構成して簡単にすることが絶対にできない場合の最後の手段と見なしてください。この属性は支援技術で十分にサポートされていないため、ユーザーにとっては各セルの見出しがわかりにくく不完全になることがあります。

注記

HTMLでは、td要素をヘッダーに使用することはできなくなりました（つまり、 td要素はheaders属性から参照できません）。

関連リンク