语义HTML做表格能否用h1+aria-describedby替代caption满足WCAG标准

你的现有实现不符合WCAG无障碍规范要求，也无法替代<caption>元素的作用，核心问题如下：

• 属性使用逻辑错误：aria-describedby的语义定位是关联表格的补充描述、摘要信息，而非表格主标题，如果你需要将外部标题和表格做关联，应该使用aria-labelledby属性
• 兼容性覆盖不足：就算你替换为正确的ARIA属性，也无法完全覆盖原生<caption>的无障碍适配效果，部分老旧浏览器、辅助技术组合在表格导航模式下，不会优先读取ARIA关联的外部标题，可能导致视障用户无法第一时间获取表格标题信息

WCAG规范相关说明 #

• WCAG H39技术方案是满足A等级成功标准1.3.1「信息和关系」的充分技术，并非强制唯一实现方式，但替代方案需要达到和原生标签同等的可访问性效果
• 你参考的aria-describedby关联内容的官方用法，是用来提供表格的补充摘要，不是用来替代主标题，二者语义定位完全不同

合规实现方案 #

你可以根据需求二选一：

• 优先选用原生<caption>元素：如果默认样式不符合设计需求，可以通过CSS调整caption的位置、样式，完全可以实现和外部<h1>一致的视觉效果，同时原生语义的兼容性是所有方案里最优的
• 若必须使用外部<h1>作为表格标题：将现有代码中的aria-describedby替换为aria-labelledby，同时确保该<h1>内容仅作为表格标题使用，不要同时承载整个页面的标题语义，避免辅助设备读取时出现语义混淆

内容的提问来源于stack exchange，提问作者Ambassador Kosh