表をアクセシビリティ対応にする

Applies to Windows and Windows Phone

table タグの主な目的は、2 次元以上のデータを表すことです。table タグはまた、ページのレイアウトの目的でもよく使われますが、この使い方は今後お勧めしません。

多次元のデータを表す表では、ユーザーがデータを理解するために役立つ十分なアクセシビリティ情報を提供することが重要です。アクセシビリティ情報には次の内容が含まれます。

  • 表内の caption タグで指定されるアクセシビリティ対応の名前。
  • summary 属性で指定されるアクセシビリティ対応の説明。
  • 必要に応じて、scope 属性と headers 属性を含む th タグを使う表のヘッダー (このトピックで後ほど説明します)。

次の例は、表と、その表を作成した HTML コードを示しています。

MealsHotelsTransportSubtotals
San Jose65.02224.0090.00379.02
San Diego80.50250.0080.00410.50
Los Angeles74.00300.00100.00474.00
Totals219.52774.00270.001,263.52

 


<p id="tableDesc">This table describes the travel expenses broken by ...</p>
<table border="1" aria-describedby="tableDesc">
   <caption>Travel Expense Report</caption>
   <thead>
     <tr>
       <th></th>
       <th>Meals</th>
       <th>Hotels</th>
       <th>Transport</th>
       <th>Subtotals</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <th>San Jose</th>
       <td>65.02</td>
       <td>224.00</td>
       <td>90.00</td>
       <td>379.02</td>
     </tr>
     ...
   </tbody>
</table>

セルとヘッダーの関係をより明確に定義するには、scope 属性と headers 属性を使います。ヘッダーの目的を詳しく定義するには、th タグの scope 属性を使います。 複数のヘッダーが 1 つのセルに適用される複雑な表の場合は、対応する td タグ内に headers 属性を使います。

MealsHotelsTransportSubtotals
San Jose
25-Aug-9737.74112.0045.00194.74
26-Aug-9727.28112.0045.00184.28
...
Totals219.52774.00270.001,263.52

 


<table border="1">
   <caption>Travel Expense Report</caption>
   <thead>
      <tr>
         <th></th>
         <th id="c2">Meals</th>
         <th id="c3">Hotels</th>
         <th id="c4">Transport</th>
         <th id="c5">Subtotals</td>
      </tr>
   </thead>
   <tbody>
	...
      <tr><td id="r2" colspan="5">San Jose</td></tr>
      <tr>
         <td id="r3" >25-Aug-97</td>
         <td headers="c2 r2 r3">37.74</td>
         <td headers="c3 r2 r3">112.00</td>
         <td headers="c4 r2 r3">45.00</td>
         <td headers="c5 r2 r3">1,263.52</td>
      </tr>
	...
   </tbody>
</table>

  プラットフォームとナレーターは headers 属性を公開しませんが、一部のサードパーティのスクリーン リーダーや支援技術ツールではドキュメント オブジェクト モデル (DOM) を直接参照してこの情報を使う可能性があります。

関連トピック

基本のアクセシビリティ要件との一致

 

 

表示:
© 2014 Microsoft