aria-sort="ascending" 是表格列头表示当前按该列升序排列的标准语义标记，仅传达状态给辅助技术，需配合 JavaScript 动态更新并正确写在 <th> 上。
aria-sort="ascending" 是表格列头中表示“当前按该列升序排列”的标准语义标记，它不负责排序逻辑，只向辅助技术（如屏幕阅读器）准确传达状态。
aria-sort="ascending" 的核心作用
- 告诉屏幕阅读器：“这一列正在按升序排列”，用户听到后能立刻理解数据顺序（比如“年龄，升序排列”）。
- 与视觉箭头（如 ▲）配合使用，但图标只是辅助，不能替代
aria-sort——AT 不读图标，只读这个属性。 - 必须配合 JavaScript 动态更新：点击一次变成
"descending"，再点一次变回"none"，不能静态写死。
正确写法与常见错误
- ✅ 正确：直接写在
<th>上，带scope="col"和tabindex="0"<th scope="col" tabindex="0" aria-sort="ascending">年龄</th>
- ❌ 错误：加在
<td>、<tr>或外层容器里<td aria-sort="ascending">28</td> <!-- 无效 --> <div aria-sort="ascending"><th>年龄</th></div> <!-- 无效 -->
- ❌ 错误：大小写或拼写错误
"Ascending"、"asc"、"desending"都会被浏览器忽略。
状态切换必须同步更新
每次点击排序列时，JS 要做三件事：
- 读取当前
aria-sort值，判断是"none"→"ascending"→"descending"→"none"的循环 - 更新
aria-sort属性值（仅此一项就影响 AT 行为） - 同步切换 CSS 类（如
sorted-asc），控制视觉箭头显示
例如：
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>
这样便于调试、维护，也避免团队成员误以为没加属性。
不复杂但容易忽略
