HTML代码中aria-label属性对无障碍阅读器的优化-html教程-PHP中文网

aria-label应加在可交互、可聚焦元素上才有效，如、、或带role="button"的；加在、、或纯装饰性上基本无效。

html代码中aria-label属性对无障碍阅读器的优化

aria-label该加在哪个HTML元素上才有效

只对可交互、可聚焦的元素起作用，比如 <button></button>、<a></a>、<input>、带 role="button" 的 <div>。加在 <code><h2></h2>、<p></p>、<span></span> 或纯装饰性 <svg></svg> 上基本无效——读屏器要么忽略，要么报错。

常见错误现象：

<h3 aria-label="设置">用户中心</h3> → Nu HTML Checker 报 “Possible misuse of aria-label”，VoiceOver 读“设置”却跳过“用户中心”
<img src="logo.svg" aria-label="公司标志"> → 应该用 alt，aria-label 在 <img> 上行为不可靠
<div aria-label="加载中"></div> → 默认不可聚焦，读屏器不主动朗读；需同时加 role="status" 和 aria-live="polite"

aria-label和aria-labelledby到底怎么选

核心就看页面上有没有现成的、可见的、语义匹配的文本。有，就用 aria-labelledby；没有，才用 aria-label。

使用场景：

图标按钮旁已有文字“删除”，就写 <button aria-labelledby="del-text"><svg></svg></button><span id="del-text">删除</span>
纯 × 关闭按钮，没文字也没其他标签，必须用 <button aria-label="关闭对话框">×</button>
aria-labelledby 支持空格分隔多个 ID：aria-labelledby="icon-title desc"，读屏器按顺序拼读
两者共存时，aria-label 会完全覆盖 aria-labelledby，Lighthouse 直接报错

哪些地方加了aria-label反而破坏无障碍

最危险的不是漏加，而是加错位置或覆盖真实内容。一旦出错，屏幕阅读器听到的就不是你预期的文案。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

典型误用：

<button aria-label="提交">发送</button> → “发送”被静音，键盘聚焦时只读“提交”
<input id="email"> 已配 <label for="email">邮箱地址</label>，再加 aria-label → <label></label> 失效，Lighthouse 标“重复标签”
多语言站点写死 aria-label="Close" → 翻译系统无法同步，中文用户听到英文
<svg></svg> 内部加 aria-label → 必须加在容器（如 <button></button>）上，<svg></svg> 里要同步加 aria-hidden="true"，否则读屏器可能误读路径描述