HTML代码中aria-sort等于ascending在可排序表格中的用法-html教程-PHP中文网

aria-sort="ascending" 是表格列头表示当前按该列升序排列的标准语义标记，仅传达状态给辅助技术，需配合 javascript 动态更新并正确写在上。

html代码中aria-sort等于ascending在可排序表格中的用法

aria-sort="ascending" 是表格列头中表示“当前按该列升序排列”的标准语义标记，它不负责排序逻辑，只向辅助技术（如屏幕阅读器）准确传达状态。

aria-sort="ascending" 的核心作用

告诉屏幕阅读器：“这一列正在按升序排列”，用户听到后能立刻理解数据顺序（比如“年龄，升序排列”）。
与视觉箭头（如 ▲）配合使用，但图标只是辅助，不能替代 aria-sort——AT 不读图标，只读这个属性。
必须配合 JavaScript 动态更新：点击一次变成 "descending"，再点一次变回 "none"，不能静态写死。

正确写法与常见错误

✅ 正确：直接写在 <th> 上，带 <code>scope="col" 和 tabindex="0"
```
<th scope="col" tabindex="0" aria-sort="ascending">年龄</th>
```
❌ 错误：加在 <td>、<code><tr> 或外层容器里 <pre class="brush:html;toolbar:false;"><td aria-sort="ascending">28</td>  <div aria-sort="ascending"><th>年龄</th></div> </pre> <li>❌ 错误：大小写或拼写错误<br><code>"Ascending"、"asc"、"desending" 都会被浏览器忽略。

状态切换必须同步更新

每次点击排序列时，JS 要做三件事：

读取当前 aria-sort 值，判断是 "none" → "ascending" → "descending" → "none" 的循环
更新 aria-sort 属性值（仅此一项就影响 AT 行为）
同步切换 CSS 类（如 sorted-asc），控制视觉箭头显示

例如：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

if (currentSort === "none") {
  th.setAttribute("aria-sort", "ascending");
  th.classList.add("sorted-asc").remove("sorted-desc");
} else if (currentSort === "ascending") {
  th.setAttribute("aria-sort", "descending");
  th.classList.add("sorted-desc").remove("sorted-asc");
} else {
  th.setAttribute("aria-sort", "none");
  th.classList.remove("sorted-asc", "sorted-desc");
}

初始状态建议显式声明

即使 "none" 是默认值，也推荐写出来：

<th scope="col" tabindex="0" aria-sort="none">姓名</th>

这样便于调试、维护，也避免团队成员误以为没加属性。

不复杂但容易忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！