为何按钮设置aria-label后内部SVG仍需添加无障碍标签？

我们在开发中常会编写如下结构的代码：

<Button aria-label="Open the modal">
 <div>
   <svgImg />
 </div>
</Button>

很多开发者的第一反应是，这个按钮的功能表意十分清晰，按理说内部内容不应该额外影响语义：按钮的内部HTML仅用于可视化呈现按钮自身功能，不会传递超出按钮功能范畴的含义——比如X形图标代表按钮用于关闭内容，“Submit”文本代表按钮用于向服务器提交表单内容等。
但实际用aXe Chrome扩展做无障碍检测时，工具会提示代码中的svgImg未添加标签。这就引出了很常见的疑问：为什么必须给内部的SVG元素加标签？屏幕阅读器难道不会直接读取按钮上设置的aria-label属性，向用户播报“这是一个打开模态框的按钮”吗？

问题本质：无障碍树不会自动将子元素归为父元素的语义附属 #

首先要明确一个规则：当用户通过Tab键聚焦到这个按钮时，屏幕阅读器确实会读取按钮自身的aria-label，正常播报“打开模态框，按钮”，不会出现读不出按钮功能的问题。
aXe抛出这个报错，针对的是另一种浏览场景：屏幕阅读器支持逐节点浏览模式（用户通过方向键逐个扫读页面内所有节点，不止是可交互元素），这种模式下，没有做语义标记的元素会被单独识别：

• 没有显式标记为装饰性的SVG、图片等图形元素，会被无障碍树判定为需要单独提供语义的独立节点
• 父元素设置的aria-label仅用于计算父元素自身的可访问名称，不会自动给所有子元素打上“无需单独识别”的标记
• 如果SVG既没有自身的可访问标签，也没有标记为隐藏，逐节点浏览到这个位置时，屏幕阅读器只会播报“无标签图形”，反而会给视障用户造成困惑

正确的处理方案 #

针对这种纯装饰性、仅用来做视觉呈现的内部图标，不需要重复添加和父按钮一致的ARIA标签，只需要给图标元素加上aria-hidden="true"，告诉辅助技术这个元素不需要单独解析语义即可：

<Button aria-label="Open the modal">
 <div>
   <svgImg aria-hidden="true" />
 </div>
</Button>

这种处理方式不会造成按钮语义的重复播报，能顺利通过无障碍检测，也不会影响逐节点浏览的体验。

注意：只有当内部图标承载了按钮文本/标签没有覆盖的额外信息时，才需要单独给图标设置对应语义的ARIA标签，不要给所有内部元素都加和父元素完全重复的标签，否则会导致屏幕阅读器重复播报内容，反而破坏使用体验。

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