如何避免屏幕阅读器读出元素名称

Question

我正在使用下面的标记，

<ul>
 <li class="country-region-items double-col-region-width"><button aria- 
 label="Europe" class="region-name cs-label fwrd-arrow">Europe</button></li>
 <li class="country-region-items double-col-region-width"><button aria- 
 label="America" class="region-name cs-label fwrd-arrow">America</button></li>
</ul>

屏幕阅读器正在读出"列出两个项目，列出项目欧洲按钮"，如何将其限制为仅读取为"欧洲"？

附言：I不想更改 HTMl 结构。

Answer 1

是的，您可以使用 role="presentation" 删除列表的"列表性"，但强烈建议不要这样做。 我认为首先使用列表是有原因的 - 因为您想将相关项目分组在一起。 如果是这样，那么同样的语义信息也应该呈现给屏幕阅读器，并且列表不应该被"隐藏"。

如果项目不相关，则不应使用列表。

如果列表用于样式目的，这也是对列表的不恰当使用。

但最终，你可以做你想做的事

<ul role="presentation">
 <li class="country-region-items double-col-region-width"><button aria- 
 label="Europe" class="region-name cs-label fwrd-arrow">Europe</button></li>
 <li class="country-region-items double-col-region-width"><button aria- 
 label="America" class="region-name cs-label fwrd-arrow">America</button></li>
</ul>

Answer 2

为什么要

限制它？语义的公告由屏幕阅读器提供，以传达 UI。

Answer 3

如果您希望屏幕阅读器在上面的代码示例中仅宣布"欧洲"或"美国"，则必须在所有元素(包括按钮(上使用role="presentation"：

<ul role="presentation">
    <li class="country-region-items double-col-region-width" role="presentation">
        <button aria-label="Europe" class="region-name cs-label fwrd-arrow" role="presentation">Europe</button>
    </li>
    <li class="country-region-items double-col-region-width" role="presentation">
        <button aria-label="America" class="region-name cs-label fwrd-arrow" role="presentation">America</button>
    </li>
</ul>

当我在 Chrome 中测试它时，这仅适用于 NVDA 2021; 它不适用于 JAWS 2022，因为 JAWS 仍然宣布"按钮"角色。(有趣的是，NVDA似乎没有识别别名role="none"，而JAWS忽略了role="none"和role="presentation"的<button>标签，但允许他们使用<ul>和<li>标签(。

但是，正如slugolicious指出的那样，您尝试做的事情违反了可访问性的目的，即向辅助技术用户提供与非AT用户相同的语义页面信息。因此，虽然我已经展示了如何实现所需的效果(好吧，使用NVDA(，但我强烈建议不要在您的代码中执行此操作。