aria-label仅用于无可见文本的交互元素，滥用会破坏无障碍；应避免在img、带label的input、无role的div/span上使用，优先用aria-labelledby引用页面已有文本，小程序中需配合aria-role使用。

aria-label 不是“加了就无障碍”，而是必须用在无可见文本的交互元素上，且不能和已有文本共存——加错位置或滥用，反而会让屏幕阅读器跳过功能、读错内容、甚至破坏表单语义。

哪些元素该加 aria-label

只给本身没有可读文本、但需要被屏幕阅读器识别功能的交互元素加。它不是装饰性补丁，是语义补救手段。

• <button><i class="icon-close"></i></button>：纯图标按钮，没文字，必须加 aria-label="关闭"
• @#@#@#@#@#@#@#@#@#@0：仅含 SVG 的链接，需加 aria-label="返回首页"
• <input type="checkbox"> 旁边没 <label></label> 包裹，又不能改 DOM 结构时，可用 aria-label="订阅邮件通知"（但优先补 <label></label>）
• 小程序中 <view role="button"></view> 这类非原生按钮，必须配 aria-label，否则 VoiceOver 或 TalkBack 只读“按钮”，不读用途

哪些情况加了反而坏事

aria-label 会覆盖元素内所有文本，且不校验值是否合理。很多问题不是没加，而是加错了地方、加了不该加的元素。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 给 <img> 加 aria-label：错误！应始终用 alt。二者语义冲突，可能触发重复朗读或完全忽略图像
• 给 <input type="text"> 单独加 aria-label：危险！绕过了 <label for="xxx"></label> 的语义绑定，导致焦点管理失效、语音控制无法关联、表单验证丢失上下文
• 给 <div> 或 <code><span></span> 加 aria-label：无效！这些元素默认不可聚焦、无交互角色，屏幕阅读器通常直接跳过；若真要让它可读，得同时加 role="button" 和 tabindex="0"，但这暴露的是设计缺陷，不是补救方案
• aria-label=""（空字符串）：等于告诉屏幕阅读器“这个元素无需朗读”，如果它实际可点击/可操作，就等于把交互入口对视障用户彻底隐藏了

aria-label 和 aria-labelledby 怎么选

核心区别就一条：前者是硬编码字符串，后者是引用页面里真实存在的文本节点。选错会影响多语言、可维护性和动态场景支持。

• 用 aria-label：内容固定、简短、无复用需求，比如 aria-label="删除"、aria-label="展开详情"
• 用 aria-labelledby：标签已存在于页面中，比如 <h2 id="modal-title">编辑用户</h2> + <button aria-labelledby="modal-title"></button>，这样既避免重复写文案，又支持 i18n 和 DOM 更新同步
• 两者同时存在：aria-labelledby 优先级更高，aria-label 被静默忽略——别混着写，调试时很难发现
• ID 引用必须真实存在：如果 aria-labelledby="xxx" 中的 xxx ID 不存在，屏幕阅读器不会报错，也不会读任何内容，只能靠可访问性检查器里的「Name Computation」面板验证

小程序和移动端的特殊注意点

小程序（如微信）和 Android/iOS 原生 WebView 对 ARIA 支持不一致，aria-label 行为受 role 驱动，且系统间朗读差异明显。

• 小程序中 <view></view> 必须配 aria-role 才能被识别为控件，单独加 aria-label 无效。例如：<view aria-role="button" aria-label="分享到朋友圈">↗</view>
• aria-role="img" 在 iOS VoiceOver 下读“图像”，在 Android TalkBack 下可能读“图片”或直接跳过，依赖基础库版本（2.7.1+ 才稳定支持）
• 移动端不支持所有 ARIA role，比如 aria-role="navigation" 在部分安卓机型上会被忽略，建议用原生 <navigator></navigator> 或 <scroll-view></scroll-view> 替代
• 小程序开发工具内置「无障碍访问模式插件」，比肉眼检查更可靠；真机测试必须开系统旁白（iOS）或 TalkBack（Android），不能只看模拟器

最常被忽略的其实是「名称计算（Name Computation）」逻辑：屏幕阅读器最终读什么，取决于 aria-labelledby → aria-label → 元素内文本 → 默认角色名 的逐级回退规则。不验证 Name Computation，等于只写了代码，没确认效果。