为可访问的<th>编写精确的<table>

Question

我正在按照联合国无障碍指南编写可访问的表。

我有这张桌子。我做出了-I的想法--应该是一个<th> 大胆的。

​

​

这是HTML：

<table width="100%">
    <thead>
        <tr>
            <th>Year</th>
            <th>1991</th>
            <th>1995</th>
            <th>2000</th>
            <th>2002</th>
            <th>2007</th>
        </tr>
    </htead>
    <tbody>
        <tr>
            <th>Indicator 1</th>
            <td>3.0</td>
            <td>11.0</td>
            <td>7.8</td>
            <td>4.0</td>
            <td>4.7</td>
        </tr>
        <tr>
            <th>Indicator 2</th>
            <td>9.0</td>
            <td>23.4</td>
            <td>19.5</td>
            <td>9.4</td>
            <td>9.1</td>
        </tr>
        <tr>
            <th>Indicator 3</th>
            <td>18.7</td>
            <td>32.0</td>
            <td>30.0</td>
            <td>20.1</td>
            <td>21.8</td>
        </tr>
    </tbody>
</table>

但我不确定它是否准确。我认为这更有道理：

<table>
    <tbody>
        <tr>
            <th id="year">Year</th>
            <td headers="year" id="year-1991">1991</td>
            <td headers="year" id="year-1995">1995</td>
            <td headers="year" id="year-2000">2000</td>
            <td headers="year" id="year-2002">2002</td>
            <td headers="year" id="year-2007">2007</td>
        </tr>
        <tr>
            <th id="indicator-1">Indicator 1</th>
            <td headers="indicator-1 year-1991">3.0</td>
            <td headers="indicator-1 year-1995">11.0</td>
            <td headers="indicator-1 year-2000">7.8</td>
            <td headers="indicator-1 year-2002">4.0</td>
            <td headers="indicator-1 year-2007">4.7</td>
        </tr>
        <tr>
            <th id="indicator-2">Indicator 2</th>
            <td headers="indicator-2 year-1991">9.0</td>
            <td headers="indicator-2 year-1995">23.4</td>
            <td headers="indicator-2 year-2000">19.5</td>
            <td headers="indicator-2 year-2002">9.4</td>
            <td headers="indicator-2 year-2007">9.1</td>
        </tr>
        <tr>
            <th id="indicator-3">Indicator 3</th>
            <td headers="indicator-3 year-1991">18.7</td>
            <td headers="indicator-3 year-1995">32.0</td>
            <td headers="indicator-3 year-2000">30.0</td>
            <td headers="indicator-3 year-2002">20.1</td>
            <td headers="indicator-3 year-2007">21.8</td>
        </tr>
    </tbody>
</table>

你认为如何？有人有桌子和可访问性方面的经验吗？如有可能，请提供参考资料。谢谢。

注意:我知道summary属性，但为了简单起见，我在这里删除了它。

Answer 1

对于具有这样简单结构的表，您的标记(第一个简单版本)对于可访问性来说就足够了。类似结构的表出现在WCAG2.0项使用表标记来表示表格信息的HTML和XHTML技术中，没有额外的标记，只有头单元格的th。

对于结构更复杂的表，可能需要特殊的技术。

但是，数据表通常应该有一个可访问性和可用性的caption元素。它帮助用户获得关于整个表的关键信息。可以使用标题或表前的文本代替标题，但它们与表(在标记级别)的关联方式不同。

Answer 2

我发现使用scope属性更有意义：

<table width="100%">
<thead>
    <tr>
        <th scope="col">Year</th>
        <th scope="col">1991</th>
        <th scope="col">1995</th>
        <th scope="col">2000</th>
        <th scope="col">2002</th>
        <th scope="col">2007</th>
    </tr>
</htead>
<tbody>
    <tr>
        <th scope="row">Indicator 1</th>
        <td>3.0</td>
        <td>11.0</td>
        <td>7.8</td>
        <td>4.0</td>
        <td>4.7</td>
    </tr>
    <tr>
        <th scope="row">Indicator 2</th>
        <td>9.0</td>
        <td>23.4</td>
        <td>19.5</td>
        <td>9.4</td>
        <td>9.1</td>
    </tr>
    <tr>
        <th scope="row">Indicator 3</th>
        <td>18.7</td>
        <td>32.0</td>
        <td>30.0</td>
        <td>20.1</td>
        <td>21.8</td>
    </tr>
</tbody>

​

参考资料：使用th元素在数据表中指定行和列标题