开启屏幕阅读器时无法通过键盘访问<Select>组件

安全阿岳

2026-8-8

股票图表时间间隔选择器的屏幕阅读器无障碍问题解决办法

我有一个用于更改股票价格图表时间间隔的React样式Select组件，正常点击回车键可展开选项，但开启Chrome内置屏幕阅读器后，回车键操作被阻止，无法访问选项。

原组件代码

<Select
  aria-label="select interval"
  name="interval"
  id="line-chart-interval"
  defaultValue={chartInterval}
  onChange={({ target }) => {
    setChartInterval(target.value);
  }}
  on
>
  <option value="1min">1 min</option>
  <option value="5min">5 min</option>
  <option value="15min">15 min</option>
  <option value="30min">30 min</option>
  <option value="1h">1 h</option>
  <option value="2h">2 h</option>
  <option value="4h">4 h</option>
  <option value="1day">1 day</option>
  <option value="1week">1 week</option>
  <option value="1month">1 month</option>
</Select>

解决办法

删除未完成的无效属性：原代码中存在未定义的on属性，这会破坏组件的事件绑定逻辑，导致屏幕阅读器无法识别正常交互行为，直接移除该属性即可。
依托原生语义化标签：原生<select>和<option>本身具备完善的无障碍语义支持，无需额外添加冗余ARIA属性，确保组件基于原生HTML元素实现，避免非语义化自定义结构。
验证键盘交互流程：修复后确认屏幕阅读器环境下的操作逻辑：
- 按下回车键或空格键可展开下拉选项列表
- 通过上下箭头键导航选择不同时间间隔
- 按下回车键或空格键确认选中选项并更新图表
排查组件库无障碍配置：如果使用第三方UI组件库的Select组件，查阅官方文档确认是否需要开启无障碍模式或配置特定属性，部分组件默认可能未完全适配屏幕阅读器交互。