OWL Carousel按钮无无障碍名称问题求助

针对你提到的div.col-md-12 > div.home-slider > div.owl-dots > button.owl-dot这类轮播指示器按钮缺失无障碍名称的问题，给你几个直接可行的解决方案：

方法1：通过aria-label直接指定无障碍名称 #

这是最简洁的方案，直接给每个按钮添加aria-label属性，明确说明按钮的功能。因为是轮播的切换点，名称可以对应幻灯片的序号：

<button class="owl-dot" aria-label="切换到第1张幻灯片"></button>
<button class="owl-dot" aria-label="切换到第2张幻灯片"></button>

如果是用Owl Carousel动态生成的按钮，可以用JS批量设置（以jQuery为例，Owl Carousel通常依赖jQuery）：

$('.owl-dot').each(function(index) {
  // index从0开始，所以加1对应实际序号
  $(this).attr('aria-label', '切换到第' + (index + 1) + '张幻灯片');
});

方法2：添加屏幕阅读器专属的隐藏文本 #

如果需要兼容不支持aria-label的旧版屏幕阅读器，可以在按钮内添加一个仅屏幕阅读器可见的文本元素：

<button class="owl-dot">
  <span class="sr-only">切换到第1张幻灯片</span>
</button>

对应的sr-only样式要加到你的CSS里：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

方法3：增强语义（可选） #

如果想让屏幕阅读器用户更清楚这是轮播控件，可以额外添加aria-roledescription属性，补充角色说明：

<button class="owl-dot" aria-label="切换到第1张幻灯片" aria-roledescription="轮播指示器"></button>

这些方案都能让屏幕阅读器正确播报按钮的功能，而不是只读出“按钮”，解决无障碍使用的问题。

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