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

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>

屏幕阅读器正在读出“列有两个项目，列表项欧洲按钮”， 我怎样才能将其限制为只读“欧洲”？

Ps：我不想改变HTMl结构。

Answer 1

是的，你可以删除＆＃34; list-ness＆＃34;使用role="presentation"的列表，但它非常沮丧。我认为首先使用列表是有原因的 - 因为您想要将相关项目组合在一起。如果是这样，那么同样的语义信息也应该呈现给屏幕阅读器，并且列表不应该被隐藏＆＃34;。

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

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

但最后，你可以用

做你想做的事

<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。