如何提升ng-bootstrap轮播指示器的可访问性？

不用写大量临时代码，给列表项加几个ARIA属性就能搞定，比单纯加tabindex更省心：

• 给每个指示器列表项添加role="button"：这会让屏幕阅读器识别它为可交互按钮，同时浏览器会自动绑定回车和空格触发点击事件，省去你手动监听键盘事件的麻烦。
• 保留tabindex="0"：确保元素能被Tab键遍历到（默认列表项不在Tab流里，这个属性是必须的，但只需要加一次）。
• 补充aria-label提升语义：比如给第n个指示器加aria-label="切换到第{n}张幻灯片"，让辅助设备用户清楚知道这个元素的作用。

示例代码：

<li role="button" tabindex="0" aria-label="切换到第1张幻灯片" onclick="switchSlide(0)">
  <!-- 指示器内容 -->
</li>

额外注意：

• 给指示器加上聚焦样式：比如自定义outline或box-shadow，让键盘用户能直观看到当前聚焦的指示器，避免默认样式被CSS重置后无法识别焦点。
• 如果你用框架（比如Vue/React），可以把这些属性封装成组件的props，批量应用到所有指示器上，不用逐个手写。

这个方案不用修改现有DOM结构（不用把li改成button），只需要添加几个属性，就能满足可访问性要求，代码量极少。

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