Question

我正在关注UN's accessibility guidelines来编写可访问表。

我有这张桌子。我做了什么 -I think - 应该是<th> 粗体。

Table

这是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

对于具有这种简单结构的表，您的标记（第一个简单版本）足以实现可访问性。具有类似结构的表格出现在HTML和XHTML技术WCAG 2.0中，项目Using table markup to present tabular information，没有额外的标记，只有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>

参考：Use the th element to specify row and column headers in data tables | 456 Berea St

为可访问的<table> </table>编写准确的文件

2 个答案: