aria-label 是可交互元素无可见文字时的必要无障碍属性，必须加在按钮等容器上而非图标内，中文文案需简洁明确且动态更新。
aria-label 是给没文字的可交互元素“起名字”的最小必要手段，不是锦上添花，而是让屏幕阅读器能读出“这是个什么按钮”的底线要求。
什么时候必须加 aria-label？
当一个 <button>、<a> 或其他可聚焦控件里没有可见文字时，就必须加。常见场景包括：
- 纯图标按钮：
<button><svg aria-hidden="true"></svg></button> - CSS 隐藏了文字只留图标的按钮（比如用
text-indent: -9999px） - 模态框右上角的“×”按钮：
<button>×</button> - 树形组件里的折叠/展开节点按钮，视觉上只有箭头图标
不加的结果是：屏幕阅读器朗读为“按钮”或“未命名按钮”，用户完全不知道点它会干什么——这直接违反 WCAG 4.1.2。
aria-label 写在哪？不能写在图标上
必须写在可交互的容器元素上，比如 <button>、<a>、<input type="button">。写在内部的 <i>、<svg> 上无效，屏幕阅读器根本不会读它。
立即学习“前端免费学习笔记（深入）”；
正确写法：<button aria-label="展开子节点"><svg aria-hidden="true"></svg></button>
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
错误写法：<button><svg aria-label="展开子节点" aria-hidden="true"></svg></button>（这个 aria-label 被忽略）
额外注意：<svg> 必须加 aria-hidden="true"，否则某些读屏器可能误读 SVG 路径描述，造成干扰。
和 aria-labelledby、title、alt 混用会出什么问题？
这几个属性语义不同，混用容易覆盖或失效：
-
aria-label和aria-labelledby同时存在 →aria-labelledby被忽略（优先级更低） - 给
<img>加aria-label→ 错误！应始终用alt；二者用途不同，混用可能导致重复朗读或跳过 - 给
<input>单独加aria-label→ 危险！绕过了<label for>关联，表单验证、焦点管理、语音控制都可能失灵 - 用
title替代aria-label→ 不可靠；title只在悬停时显示，多数屏幕阅读器默认不读，移动端基本不触发
值为空字符串（aria-label=""）也危险：它会让屏幕阅读器跳过该元素——如果按钮实际可点击，等于把交互入口对辅助技术用户彻底隐藏了。
中文文案怎么写才不翻车？
中文 aria-label 不是“写出来就行”，要兼顾朗读节奏和信息密度：
- 长度控制在 20 字以内，iOS VoiceOver 会截断过长文本（例如“点击此处跳转到用户个人主页” → 改成“个人主页”）
- 避免全角空格、零宽字符（如
\u200b），会导致朗读中断或报“空白” - 少用“…”“——”等标点，屏幕阅读器可能停顿或误读；用“，”或直接连接更稳妥
- 动词开头，明确动作意图：“关闭”“刷新列表”“排序日期”，别写“点击关闭”“请刷新”
最易被忽略的一点：它是个静态字符串，没法响应上下文变化。如果按钮功能随状态动态改变（比如“播放”→“暂停”），就得用 JavaScript 动态更新 aria-label 值，而不是写死一个。
