HTML <th>テーブルセルに使用する正しいスコープ値は何カラムですか？

Question

HTMLテーブルがあり、<th>セルが複数の列にまたがっているとします。

<table> 
    <tr> 
     <th colspan="3" scope="?">Scores</th> 
     <!-- ...more headings here... --> 
    </tr> 
    <tr> 
     <th scope="col">English</th> 
     <th scope="col">Maths</th> 
     <th scope="col">Science</th> 
     <!-- ...more sub-headings here... --> 
    </tr> 
    <tr> 
     <td>12</td> 
     <td>16</td> 
     <td>20</td> 
     <!-- ...more cells here... --> 
    </tr> 
</table> 

スパニング・ヘッダー・セルの有効範囲の値は何ですか？ colはいくつかの見出しが間違っているようですが、実際にはcolgroupというタグがないと、colgroupは正しく見えません。

Answer 1

colgroupタグがないにもかかわらず、HTML仕様の2番目の例の表によると、それはcolgroupです。

http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1

Answer 2

WebAIM（心の中でウェブアクセシビリティ）グループはcreating accessible data tablesに大きな記事があります。全体的に、スクリーンリーダーはマークアップを確実に解釈できないため、スパンされた行や列を避けることをお勧めします。

スパンした列を避けるのにはまったく足りませんが、scope属性と組み合わせてid/headers属性を使用して本当にうまくいっています。マークアップはより冗長ですが、これはJAWSのものを単純化するように思われ、結果としてデータの解釈に問題が少なくなります。

これはあなたの例では、ID /ヘッダをどのように見えるかです：

<table> 
    <tr> 
     <th id="scores" colspan="3">Scores</th> 
    </tr> 
    <tr> 
     <th id="english" scope="col">English</th> 
     <th id="maths" scope="col">Maths</th> 
     <th id="science" scope="col">Science</th> 
    </tr> 
    <tr> 
     <td headers="scores english">12</td> 
     <td headers="scores maths">16</td> 
     <td headers="scores science">20</td> 
    </tr> 
</table> 

Answer 3

おそらく、キャプション機能を使用するためのより良い適しているかもしれないが...

<table> 
    <caption>Scores</caption> 
    <thead> 
    <tr> 
     <th scope="col">English</th> 
     <th scope="col">Maths</th> 
     <th scope="col">Science</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>12</td> 
     <td>16</td> 
     <td>20</td> 
    </tr> 
    </tbody> 
</table> 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption