5

<th>たとえば、複数の列にまたがるセルを持つHTMLテーブルがあるとします。

<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

4

3 に答える 3

7

WebAIM（Web Accessibility in Mind）グループには、アクセシブルなデータテーブルの作成に関するすばらしい記事があります。全体として、スクリーンリーダーはマークアップを確実に解釈できないため、行や列にまたがるのは避けることをお勧めします。

スパン列を完全に回避することを除けば、id/headers属性をscope属性と組み合わせて使用​​することは本当に幸運でした。マークアップはより冗長ですが、これによりJAWSの処理が単純化され、その結果、データの解釈に問題が発生しにくくなります。

これは、id/headersを使用した例のようになります。

<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>
于 2009-06-09T21:35:00.180 に答える
3

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

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

于 2009-06-07T19:38:03.157 に答える
1

おそらく、キャプション機能の方が適しているかもしれません...

<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

于 2013-12-08T21:38:32.710 に答える