在经过验证的HTML5中使用aria-sort

Question

在经过验证的HTML5中使用aria-sort

Cra*_*cis 6 html5 accessibility w3c-validation wai-aria

假设一个静态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>

Run Code Online (Sandbox Code Playgroud)

aria-sort是否适当使用(当UA支持它时)？

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

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

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

一旦你开始指定它,你还需要设置一个角色,直到<table role="grid">...如果你没有使用适当的标签,这很好.

Answer 1

Juk*_*ela 14

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

正如@CraigFrancis所述,此问题已在验证程序的邮件列表中引发,其中一条消息引用了错误报告.根据规范,验证者的行为是正确的,该错误已被关闭.这意味着如果您使用aria-sort,则需要显式设置role为columnheader或rowheader,即使您具有该scope属性.

正如问题所述,这意味着role在文档树中需要更高的附加属性,以便最小化最终结果如下:

<!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>

Run Code Online (Sandbox Code Playgroud)

这看起来相当多余,特别是因为定义role=columnheader说它是" th具有列范围的HTML 元素的结构等价物".但是,与WAI-ARIA相关的 HTML5 LC 定义没有为th(或tr或table)指定任何隐含的ARIA语义.这可能反映了用于布局的表的使用,这已经很普遍,因此通常假设table元素表示结构(或"语义")意义上的网格(数组,矩阵)是不现实的.因此,当table元素的"表格" 与ARIA相关时,必须用role不同嵌套级别的属性明确表达.

请注意,该aria-sort属性纯粹是信息性的,声明性的.它描述了表(网格)的项目是按升序或降序(或其他)顺序.它不会要求浏览器对它们进行排序或创建用于排序的UI工具.在实践中,它意味着在作者负责对表进行排序时,在页面生成服务器端或使用JavaScript客户端时使用.用户代理可以以各种方式利用该信息,例如通过向用户宣布订单.

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

2020 更新：您不需要角色（在本例中也不需要范围属性）。自从提供此答案以来，支持已大大改善。 (3认同)
感谢Jukka,这是非常有用的信息...所以我们需要纠缠HTML工作组,因为我认为<table>应该默认保存表格数据(默认继承"网格"角色),以及任何使用的网站布局表应该真正使用role ="presentation"作为覆盖(完全知道这是一厢情愿的想法). (2认同)

归档时间：	11 年，7 月前
查看次数：	10368 次
最近记录：	11 年，7 月前