咨询：aria-label是否会阻止辅助设备读取内部内容及相关解决方案

1. aria-label会阻止辅助技术读取元素内部内容吗？ #

不会。大部分情况下，当元素同时包含内部可见内容和aria-label时，辅助技术（比如屏幕阅读器）不会完全忽略内部内容，反而经常会把aria-label和内部内容合并播报——这也是你提到的“Close X”问题的根源。

不过有个小例外：如果是img标签搭配alt属性，或是用无语义元素（比如div）模拟交互组件时，表现可能略有不同，但对于按钮、链接这类原生交互元素，合并播报是非常常见的行为。

2. “aria-label作为前缀添加，读出‘Close X’”的说法属实吗？ #

确实属实。不同屏幕阅读器（比如NVDA、VoiceOver）和浏览器的组合可能有细微差异，但很多场景下，比如给内部带“X”的按钮设置aria-label="Close"，屏幕阅读器会同时播报aria-label和内部的“X”，变成“Close X”——这显然不是理想的效果，毕竟“X”只是视觉上的关闭标识，语义上只需要“Close”就够了。

3. 解决方案：用aria-hidden隐藏内部内容 #

你的猜测完全正确！把元素内部的可见内容（比如那个“X”）用带有aria-hidden="true"的容器包裹起来，就能让辅助技术忽略这部分内容，只读取aria-label的文本。

举个实际代码例子：

<button aria-label="Close">
  <span aria-hidden="true">X</span>
</button>

这样屏幕阅读器就只会播报“Close”，不会再加上多余的“X”了。这个方法是无障碍开发中的标准做法，放心用就好～

额外补充：如果你的内部内容本身有需要保留的语义，那可能需要用aria-labelledby来关联特定元素，但针对你遇到的“重复播报”场景，aria-hidden是最直接有效的方案。

内容的提问来源于stack exchange，提问作者callum