代码之家 › 专栏 › 技术社区 › Craig Francis

在经过验证的HTML5中使用aria排序

wai-aria w3c-validation accessibility html

Craig Francis · 技术社区 · 10 年前

假设静态HTML表,例如:

<table>
    <thead>
        <tr>
            <th scope="col" aria-sort="none"><a href="...">Name&#xA0;<span title="Sort">&#9650;</span></a></th>
            <th scope="col" aria-sort="ascending"><a href="...">Score&#xA0;<span title="Ascending">&#9650;</span></a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>C</td>
            <td>1</td>
        </tr>
        <tr>
            <td>A</td>
            <td>5</td>
        </tr>
        <tr>
            <td>B</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

是否使用 aria-sort 是否适当(适用于UA支持它的时间)?

http://www.w3.org/TR/wai-aria/states_and_properties#aria-sort

我相信这可能很有用,但W3C验证器目前需要一个 role="columnheader" 上 <th scope="col"> ,这有点多余,因为它已经暗示了 th[scope="col"] :

http://www.w3.org/TR/wai-aria/roles#columnheader

一旦开始指定,还需要为 <table role="grid"> …如果您没有使用适当的标签,这是可以的。

1 回复 | 直到 10 年前

Jukka K. Korpela 10 年前

验证器正确。这听起来可能很奇怪,但问题在于规范,而不是验证器。

正如@CraigFrancis所评论的,这个问题已经在验证器邮件列表中提出,其中一条消息提到了错误报告。该bug已 closed 根据规范,基于验证器的行为是正确的。这意味着如果您使用 aria-sort ,您需要显式设置 role 到 columnheader 或 rowheader ,即使你有 scope 属性

正如问题所述,这意味着 角色 然后在文档树的更高位置需要属性,这样您就可以最低限度地得到以下内容:

<!doctype html>
<title>aria-sort issue</title>
<table role="grid">
    <thead>
        <tr role="row">
            <th scope="col" role="columnheader" aria-sort="none"><a href="...">Name&#xA0;<span title="Sort">&#9650;</span></a></th>
            <th scope="col" role="columnheader" aria-sort="ascending"><a href="...">Score&#xA0;<span title="Ascending">&#9650;</span></a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>C</td>
            <td>1</td>
        </tr>
        <tr>
            <td>A</td>
            <td>5</td>
        </tr>
        <tr>
            <td>B</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

这看起来相当多余,特别是因为 role=columnheader 表示它在结构上等同于HTML th 元素。然而,HTML5 LC definitions related to WAI-ARIA 不要为指定任何隐含的ARIA语义 第 (或 tr 或 table ). 这可能反映了在布局中使用表的情况,这种情况已经很普遍,因此一般认为 桌子 元素表示结构(或语义)意义上的网格(数组、矩阵)。因此,当 桌子 元素与ARIA相关,必须用 角色 不同嵌套级别的属性。

注意 咏叹调排序 属性是纯信息性、声明性的。它描写表(网格)的项是按升序或降序(或其他)排列。它不要求浏览器对它们进行排序或创建用于排序的UI工具。实际上,当作者在页面生成服务器端或JavaScript客户端处理了表的排序时,就可以使用它。用户代理可以以各种方式使用此信息,例如通过向用户通知订单。

ARIA规范补充道,对于每个表格或网格,作者应适用 咏叹调排序 一次只有一个标题。代码示例违反了此建议。(但是,验证器没有发出错误消息;这是应该的,而不是应该的。)在这种情况下, aria-sort="none" 应移除。这个 咏叹调排序 属性设置在列标题上时,指定表的行是根据该列排序的,因此出于明显的原因,它应该只设置在一列上。