HTMLARIA提升可访问性详解及代码示例

本文深入解析HTML中ARIA属性的核心实践原则与常见误区，通过真实场景代码示例阐明如何精准选用aria-label与aria-labelledby构建语义化可访问名称、何时必须添加role="button"及规避非原生按钮陷阱、为何aria-hidden="true"绝不能滥用在交互容器上，以及如何依据用户上下文谨慎选择aria-live="polite"或"assertive"并配合aria-atomic和aria-relevant实现平滑、可靠、不打断的动态内容播报——每一条规则都直击开发一线痛点，帮你避开让读屏器“失明”或“暴躁”的隐形雷区，真正让无障碍从合规要求落地为可感知、可操作、有尊严的用户体验。

aria-label 和 aria-labelledby 哪个该用？

选哪个不看文档优先级，看实际 DOM 结构和内容来源。如果按钮文字是纯图标（比如 ✎），没有可见文本，用 aria-label 直接塞描述；如果按钮旁有隐藏但语义明确的标签（如 保存当前编辑），就用 aria-labelledby="save-desc"。

• aria-label 会完全覆盖元素的可访问名称（包括子文本），哪怕你写了 ?，加了 aria-label="删除文件"，读屏器就只读“删除文件”，不会提“软盘图标”
• aria-labelledby 是引用式，支持多 ID（空格分隔），且会按引用顺序拼接名称，适合组合多个语义块（如图标 + 状态提示）
• 别混用：同时写 aria-label 和 aria-labelledby，后者会被忽略——浏览器只认一个可访问名称来源

role="button" 什么时候必须加？

不是所有点击元素都需要加 role="button"。只有当它本不是原生按钮、但行为完全等同于按钮时才加，比如用