Chrome中无法监听aria-label文本求助及无障碍标签使用指引

核心原因 #

你用的Box组件属于普通容器元素（类似<div>），Chrome的屏幕阅读器仅会为原生可交互元素（如<button>、<a>）或手动声明可交互角色的元素读取aria-label。单纯给容器加onClick并不能让它成为可交互控件，因此aria-label会被忽略。

解决方案 #

方案1：替换为原生元素（推荐） #

原生按钮自带可交互属性、键盘访问支持（回车/空格触发），屏幕阅读器会自动识别并读取aria-label：

<button id="btn-english" aria-label="English" onClick={() => setLang('en-us')}>
  <Image layout="fixed" height={65} width={123} src="/assets/english-button.svg" alt="" />
</button>

注：将Image的alt设为空，避免按钮的aria-label和图片的alt重复朗读。

方案2：为Box添加可交互标识（保留Box时使用） #

如果必须使用Box组件，需手动添加角色、tabindex并处理键盘事件，让它被识别为可交互按钮：

<Box 
  id="btn-english" 
  aria-label="English" 
  onClick={() => setLang('en-us')}
  role="button"
  tabIndex="0"
  onKeyPress={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      setLang('en-us');
    }
  }}
>
  <Image layout="fixed" height={65} width={123} src="/assets/english-button.svg" alt="" />
</Box>

Chrome中aria-label的表现规则 #

Chrome配合屏幕阅读器（如NVDA、VoiceOver）时，严格遵循WAI-ARIA规范：

• 仅当元素是原生可交互类型（button、link、input等），或通过role声明为可交互角色（如role="button"）时，aria-label才会被读取。
• 普通容器元素（div、span等）即使绑定点击事件，也不会被视为可交互控件，其aria-label不会出现在无障碍树中，自然无法被朗读。

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