aria-label为屏幕阅读器提供语义说明而不影响视觉，aria-hidden="true"则隐藏元素的可访问性但保留视觉和焦点；二者用途不同，不可混用。
aria-label 是给屏幕阅读器“加字”，不是给用户加视觉文字
它只影响辅助技术的朗读内容，不改变页面显示。比如一个纯 × 图标按钮，视觉上只有叉号，但屏幕阅读器需要知道这是“关闭弹窗”——这时加 aria-label="关闭弹窗" 就行。
常见错误是把它当 CSS 的 title 或 tooltip 用，或者和可见文本重复写：<button aria-label="提交">提交</button>。这会让屏幕阅读器读两遍“提交”，反而干扰理解。
使用场景包括：
- 图标按钮（
✖、✏等无文字控件） - SVG 内联图标按钮（
<svg><use href="#icon-close"></use></svg>） - 动态渲染、文本由 JS 注入但 DOM 中暂无可见文案的按钮
aria-hidden="true" 是让屏幕阅读器“装没看见”，但元素还在页面里
它不隐藏视觉，也不移除焦点能力。加了 aria-hidden="true" 的元素，屏幕阅读器会跳过，但键盘用户仍可能 tab 进去，鼠标也能点——如果没同步处理 tabindex="-1"，就会卡在不可见却可聚焦的位置上。
立即学习“前端免费学习笔记（深入）”；
典型误用：
- 给下拉菜单容器加
aria-hidden="true"却没设tabindex="-1"→ 键盘用户 tab 到空白处卡住 - 父元素加
aria-hidden="true"，子元素再写aria-hidden="false"也无效（继承强制隐藏） - 用它替代
display: none或hidden属性 → 视觉没变，语义却断了
真正该用 aria-hidden="true" 的地方很窄：纯装饰性图标（如分隔线里的 •）、背景 SVG、重复性视觉符号等。
两者不能混着解决同一个问题
比如你想让一个图标按钮既被朗读、又在关闭状态下完全退出交互流，不能同时写：
<button aria-label="删除" aria-hidden="true"></button>
这样屏幕阅读器既读不到，键盘又可能聚焦到空按钮上——语义和行为全乱了。
正确做法分情况：
- 按钮只是暂时不可见（如折叠面板里的操作项）→ 用
hidden属性（自带aria-hidden="true"+ 移除焦点） - 按钮要保留在 DOM、但当前不该被读取或聚焦 → 同时加
aria-hidden="true"和tabindex="-1" - 按钮始终存在且需交互 → 不要用
aria-hidden，靠aria-disabled="true"+ 视觉灰显更合适
sr-only 和 aria-hidden 的配合逻辑常被忽略
sr-only 是 CSS 类，作用是把文字“藏给眼睛、留给屏幕阅读器”；aria-hidden="true" 则是“藏给屏幕阅读器、留给眼睛”。它们目标相反，但经常一起用。
例如一个带图标的按钮：
<button><span class="sr-only">上传文件</span><svg aria-hidden="true">...</svg></button>
这里 sr-only 让“上传文件”只被读屏软件读到，aria-hidden="true" 防止 SVG 图标被重复朗读（SVG 本身没有语义，读出来就是“svg”或路径信息，毫无意义）。
漏掉任一环节，都会导致语音冗余或语义缺失——尤其在复杂组件中，这种组合几乎成了标配，但很多人只记得加 sr-only，忘了关 SVG 的朗读。
