如何让自定义可排序表格功能符合WCAG 2.1无障碍规范要求

1. 优先修复交互元素语义化问题 #

你当前直接在<th>上绑定交互的实现确实存在语义缺陷，最优修复方案如下：

• 将表头内的文字内容包裹在原生<button>标签内，清除按钮的默认边框、背景、padding等样式，保证视觉表现和原设计完全一致
• 原生<button>自带可聚焦属性、回车/空格触发的原生交互逻辑，无需额外绑定键盘事件，也会被屏幕阅读器默认识别为可交互控件，省去大量属性补全工作
• 如果不方便调整DOM结构，必须保留<th>直接绑定交互的实现：
  • 给<th>添加role="button"属性，明确告知辅助设备该元素是可点击的按钮控件
  • 确保聚焦状态有符合WCAG对比度要求的视觉提示，不能仅用颜色区分
  • 保留已实现的回车、空格触发逻辑，同时保证按Esc不会误触发排序

2. 补充排序状态专属ARIA属性 #

WAI-ARIA专门为可排序表格提供了标准属性，无需自定义规则：

• 给每个可排序的表头元素添加aria-sort属性，默认未排序状态值为none，升序时改为ascending，降序时改为descending
• 同一时间仅允许有一个表头的aria-sort属性值为ascending/descending，其他列都重置为none
• 屏幕阅读器聚焦到对应表头时，会自动播报当前的排序状态

3. 明确告知用户交互规则 #

针对非标准表格功能的提示，可通过分层提示实现：

• 表格前添加仅屏幕阅读器可见的全局提示：给页面添加一个视觉隐藏（保留屏幕阅读器识别）的元素，内容为“当前表格支持按列排序，聚焦到可排序列的表头后按回车或空格即可切换升序、降序排列”，用户导航到表格区域时会先收到该提示
• 单个表头的交互提示：给触发排序的控件添加aria-description属性，内容为“点击切换排序”，也可以动态更新，比如未排序时提示“点击按升序排序”，升序时提示“点击切换为降序排序”
• 排序触发后添加即时反馈：设置一个aria-live="polite"的动态播报区域，排序切换后自动插入“已按[列名]升序/降序排列”的文本，屏幕阅读器会自动播报结果，无需用户手动查找状态

内容的提问来源于stack exchange，提问作者Jaiden DeChon