aria-sort 是 aria 属性，专用于 元素，取值为 "none"、"ascending"、"descending" 或 "other"，仅标注当前列排序状态，不触发排序逻辑；必须配合 javascript 动态更新并同步视觉反馈与键盘焦点。
aria-sort 是什么，它能做什么
aria-sort 是一个 ARIA 属性，用于告诉辅助技术（如屏幕阅读器）当前表格列的排序状态。它本身**不触发排序逻辑**，也不改变视觉表现，只起语义标注作用。如果你没在 JavaScript 中实现真正的排序，光加 aria-sort 不会让数据动起来，但会误导残障用户以为已排序。
怎么给表格列正确设置 aria-sort
必须作用在 <th> 元素上（不能用在 <code><td>），值只能是以下四个之一：<code>ascending、descending、none、other。最常用的是前三个：
-
ascending：该列按升序排列（最小值在上） -
descending：该列按降序排列（最大值在上） -
none：该列未参与排序（初始状态或取消排序后）
示例：
<th aria-sort="ascending">姓名</th> <th aria-sort="descending">年龄</th> <th aria-sort="none">城市</th>
常见错误：为什么屏幕阅读器没读出排序状态
几个高频原因：
- 把
aria-sort写在<td> 或 <code><tr> 上——无效，只认 <code><th> <li>拼错值，比如写成 <code>asc、up、sorted——浏览器忽略，等同于没设 - 表格没用
<table> + <code><thead> + <code><th> 结构，而是用 <code>div模拟表格——ARIA 属性依赖语义结构，否则不起作用 - 动态更新排序状态后没同步更新
aria-sort值——比如点击排序后 JS 改了数据，却忘了改属性 - 用 CSS 选择器
th[aria-sort="ascending"]::after添加 ↑ 图标，th[aria-sort="descending"]::after添加 ↓，让用户一眼看出状态 - 每次排序操作后，确保清除其他列的
aria-sort（设为none），避免多列同时标为ascending——这不符合实际排序逻辑 - 如果支持多列排序（如先按姓名再按年龄），应只将**主排序列**设为
ascending或descending，次要列保持none；否则会混淆辅助技术
配合 CSS 和 JS 实现可感知的排序反馈
仅靠 aria-sort 不够直观。建议同步做两件事：
真正容易被忽略的点是：排序交互必须有键盘支持（Enter / Space 触发），且焦点要保留在当前 <th> 上——否则屏幕阅读器用户无法确认操作是否生效。</th>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
