Chrome中VoiceOver与NVDA忽略aria-label问题排查求助

嘿，我刚好碰到过类似的情况！你说的这个现象其实不是bug，而是屏幕阅读器对原生表单控件的默认播报逻辑导致的，咱们一步步拆解：

问题根源 #

你用的是<input type="submit">这种原生表单控件，这类控件的特殊性在于：很多主流屏幕阅读器（比如VoiceOver、NVDA）会同时结合它的value属性和aria-label来播报内容，甚至在某些场景下会优先读取value里的完整内容——哪怕你已经设置了aria-label。

你代码里的value="Click Me >"包含了大于号，屏幕阅读器会把这个符号当成按钮视觉内容的一部分，自然会读出来，哪怕aria-label里没有这个符号。

解决办法 #

这里有几个靠谱的方案，你可以根据自己的需求选：

• 方案1：统一value和aria-label的内容
  直接把value改成和aria-label一样的"Click Me"，这样屏幕阅读器就只会读你想要的内容，视觉上如果不需要大于号的话，这个方法最简单。
• 方案2：换用<button>元素替代（推荐）
  如果视觉上必须保留大于号，那换成<button type="submit">是更优雅的做法。因为button元素的屏幕阅读器优先级逻辑更清晰，会优先读取aria-label，而视觉内容可以放在标签内部：

  <button type="submit" aria-label="Click Me">Click Me ></button>
  

  这样既能满足视觉需求，又能让屏幕阅读器只播报你设定的aria-label内容。
• 方案3：用aria-hidden隐藏多余符号
  要是你实在不想换元素，可以把大于号单独拆出来，用aria-hidden="true"让屏幕阅读器忽略它：

  <form onsubmit="return false;">
    <input type="submit" aria-label="Click Me" value="Click Me">
    <span aria-hidden="true" style="margin-left: 4px;">></span>
  </form>
  

  不过这个方法需要调整一下样式，让按钮和span看起来是一个整体，不然视觉上会脱节。

总结 #

这真不是屏幕阅读器的bug，只是原生input submit控件的播报逻辑和我们预期的不一样而已。换用button元素或者统一value和aria-label的内容，就能完美解决这个问题啦～

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