纯图标按钮必须加 aria-label 且置于 button 标签上，否则屏幕阅读器仅读“按钮”，违反 wcag 4.1.2；svg 需设 aria-hidden="true"，禁用空字符串或错误位置使用。
纯图标按钮不加 aria-label，屏幕阅读器就只会读“按钮”，用户根本不知道点它干啥——这不是体验问题，是直接违反 WCAG 4.1.2 的可访问性硬伤。
aria-label 必须加在 button 上，不能加在 svg 或 i 里
常见错误是把 aria-label 写在图标内部：比如 <button><svg aria-label="关闭"></svg></button>。这样读屏器完全忽略，因为 <svg></svg> 不是可交互元素，也没焦点能力。
-
aria-label只能作用于有交互语义的元素，如<button></button>、<a></a>、带role="button"的<div> <li>图标类元素（<code><svg></svg>、<i></i>、<span></span>）只是视觉载体，加了aria-label也无效 - 正确写法是：
<button aria-label="关闭弹窗"><svg aria-hidden="true"></svg></button> -
aria-hidden="true"是告诉读屏器：“这个 SVG 纯装饰，别读” - 不要给
<path></path>或<use></use>单独加aria-label，它们不是可聚焦节点 - 如果 SVG 本身含有意义文本（比如内嵌
<text></text>），那就该用aria-labelledby关联，而不是aria-label - 按钮已有可见文字，比如
<button>删除</button>，再加aria-label="移除项目"可能导致重复朗读或覆盖原词 -
<input>已被<label for="xxx"></label>正确包裹，此时加aria-label会让 Lighthouse 报错，且破坏焦点与语音控制逻辑 -
<img>必须用alt，加aria-label会导致语义冲突，部分读屏器跳过图像或重复播报 -
aria-label=""等同于主动屏蔽该按钮，视障用户彻底无法感知它的存在
按钮含 SVG 时，svg 必须加 aria-hidden="true"
SVG 默认会被某些读屏器尝试朗读其路径描述（比如“M10 10 L20 20”），造成干扰性重复播报，甚至覆盖掉你设的 aria-label 内容。
哪些情况不该用 aria-label？加了反而坏事
滥用 aria-label 比不加更危险——它会直接覆盖元素内所有文本内容，包括子节点和 label 关联。
最易被忽略的一点：如果按钮是通过 CSS 隐藏文字（比如 text-indent: -9999px 或 visibility: hidden），它依然算“无可见文本”，必须加 aria-label——视觉隐藏 ≠ 语义消失。
