如何避免屏幕阅读器读出冗余元素名称？按钮列表优化咨询

阿华AIGC实验室

2026-5-25

解决屏幕阅读器冗余元素名称播报问题

我来帮你搞定这个屏幕阅读器冗余播报的问题！你遇到的情况是屏幕阅读器默认会识别列表结构和按钮元素并播报，想要精简播报内容，可以从以下两个方向入手：

1. 移除不必要的列表语义

如果这个<ul>只是用来做布局的容器，而非真正的内容列表，那直接把<ul>换成<div>，同时把<li>也换成<div>，这样屏幕阅读器就不会再播报“List with two items”和“list item”这类列表相关的内容了。修改后的代码如下：

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

如果一定要保留<ul>标签（比如样式依赖），可以给<li>添加role="none"来移除列表项的语义，这样屏幕阅读器不会播报“list item”：

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

2. 精简按钮的播报内容

屏幕阅读器播报“button”是为了让用户知道这是可交互的元素，通常不建议隐藏这个信息——毕竟视障用户需要明确元素的交互类型。但如果你的场景确实不需要播报“button”，可以把按钮换成<span>，同时添加必要的可访问性属性来保证键盘交互：

<div>
  <div class="country-region-items double-col-region-width">
    <span tabindex="0" role="button" aria-label="Europe" class="region-name cs-label fwrd-arrow" onclick="yourClickFunction()" onkeydown="if(event.key === 'Enter' || event.key === ' ') yourClickFunction()">Europe</span>
  </div>
  <div class="country-region-items double-col-region-width">
    <span tabindex="0" role="button" aria-label="America" class="region-name cs-label fwrd-arrow" onclick="yourClickFunction()" onkeydown="if(event.key === 'Enter' || event.key === ' ') yourClickFunction()">America</span>
  </div>
</div>

这里要注意：必须添加tabindex="0"让元素可以被键盘聚焦，同时处理回车和空格的按键事件，模拟按钮的交互行为，确保视障用户能正常操作。