HTML中如何运用aria属性提升可访问性

<p>结论：不是所有地方都该加 aria- 属性，加错比不加更糟；真正需要它的地方只有三类——自定义控件、动态内容更新、状态同步变化。</p>

直接说结论：不是所有地方都该加 aria- 属性，加错比不加更糟；真正需要它的地方只有三类——自定义控件、动态内容更新、状态同步变化。

什么时候必须用 aria-label 或 aria-labelledby

当按钮或链接没有可见文本，或者视觉文本不足以说明操作目的时才用。比如纯图标按钮 <button><i class="icon-edit"></i></button>，屏幕阅读器默认读不出“编辑哪一项”，就得补。

• aria-label 适合写死描述，如 <button aria-label="删除第5项"></button>；但它会完全覆盖元素内所有文本和子元素语义
• aria-labelledby 适合引用页面中已有的可见文案，比如表格操作列旁有个隐藏但语义明确的 <span id="row-5-desc">第5条用户记录</span>，就用 aria-labelledby="row-5-desc"
• 别同时写两个——浏览器只认 aria-label，aria-labelledby 被静默忽略
• 表单控件优先用原生 <label for="x">，禁用 aria-label 替代 <label>，否则键盘用户无法用标签聚焦输入框

哪些元素必须加 role="button"

只有当你用非原生按钮标签（比如 <div> 或 <span>）模拟按钮行为时才需要。原生 <button> 或 <input type="button"> 自带角色和键盘支持，加了反而可能干扰旧读屏器。

• 必须加的情况：<div tabindex="0" onclick="submit()">提交</div> → 改成 <div role="button" tabindex="0" onclick="submit()">提交</div>
• 加了就得实现空格键触发（不只是回车），否则交互不一致
• 不能给 <a href="#"> 加 role="button"：它本质是链接，加了会破坏跳转语义和键盘导航逻辑
• 别忘了禁用态：用 aria-disabled="true" + 对应灰显样式，disabled 属性只对原生表单控件有效

aria-hidden="true" 的常见误用

它不是“视觉隐藏就加”，而是告诉辅助技术“整个节点及其所有后代，全部从可访问树里剔除”。一旦加错位置，功能就对屏幕阅读器彻底不可见。

立即学习“前端免费学习笔记（深入）”；

• 禁止包裹任何可交互元素：比如把整个弹窗容器设为 aria-hidden="true"，但没在打开时动态切为 false，结果弹窗内容全“消失”
• 子元素设 aria-hidden="false" 无效——ARIA 隐藏具有继承性，父级设了 true，子级无法绕过
• 纯装饰性图标（如 <i class="icon-close"></i>）可以单独加，但得确认它不参与 tab 导航、不是链接、没绑定事件
• 动态内容区域（如 AJAX 更新的列表）不该用 aria-hidden 控制显隐，该用 aria-live="polite" 主动通知变化

最易被忽略的点：ARIA 不解决语义缺失的根本问题。比如用 <div role="navigation"> 包菜单，却不提供键盘方向键导航逻辑，屏幕阅读器能识别“这是导航区”，但用户仍无法操作。真实可访问性永远依赖语义 HTML + 行为实现 + 人工测试三者闭环，不是堆属性就能过关。