代码之家 › 专栏 › 技术社区 › Vecta

具有垂直和水平标题的可访问表格

accessibility html-table html

1

Vecta · 技术社区 · 8 年前

我正在处理一个与下面的示例类似的表,其中单元格中的X表示基于相应水平/垂直标题的交点的某些标准。

例如,在这种情况下,橘子会有“甜”和“酸”的品质,但不会咸或苦。

<table>
    <tr>
        <th></th>
        <th scope="col">Sweet</th>
        <th scope="col">Sour</th>
        <th scope="col">Salty</th>
        <th scope="col">Bitter</th>
    </tr>
    <tr>
        <th scope="row">Apple</th>
        <td>x</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th scope="row">Orange</th>
        <td>x</td>
        <td>x</td>
        <td></td>
        <td></td>
    </tr>
</table>

什么是适当的方法来标记它,使其具有语义和可访问性?细胞似乎应该包含比“X”更广泛的东西才有意义,即使在视觉上它只是显示一个“X”。

此外,可见的空单元格是否应该实际包含一些视觉上隐藏的文本,表明所述单元格不适用?

1 回复 | 直到 8 年前

1

Adam 8 年前

我假设“是”和“否”是很好的指标,但确实需要一些上下文(即滚动到表格的标题)

用“甜的”、“酸的”、“咸的”或“苦的”这样的文字也是一个明显的选择,这非常合适。

每个人都讨厌连续表列中的勾号,这确实需要大量的关注。

<table>
    <tr>
        <th scope="row">Apple</th>
        <td>Sweet</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th scope="row">Orange</th>
        <td>Sweet</td>
        <td>Sour</td>
        <td></td>
        <td></td>
    </tr>
</table>