如何修复Owl-Carousel自动生成按钮无title属性的可识别文本问题

这个错误是网页无障碍检测（a11y）抛出的，原因是Owl-Carousel自动生成的切换按钮（左右箭头）只有图标没有可识别的文本或title属性，导致屏幕阅读器无法解读按钮功能。以下是几种修复方法：

方法1：初始化时配置语义化按钮文本 #

在Owl-Carousel的初始化代码中，通过navText参数给按钮添加隐藏的语义文本，既不影响视觉效果，又能满足无障碍要求：

$('.owl-carousel').owlCarousel({
  nav: true,
  // 添加带无障碍类的文本
  navText: ['<span class="sr-only">上一张</span>', '<span class="sr-only">下一张</span>']
});

再添加CSS将文本移出可视区域（保留语义）：

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

方法2：初始化后给按钮添加title属性 #

如果不想修改初始化配置，可以在Carousel加载完成后，通过JS选择自动生成的按钮（默认类为.owl-prev和.owl-next），直接添加title属性：

$('.owl-carousel').owlCarousel({
  nav: true
}).on('initialized.owl.carousel', function() {
  // 给左右按钮添加title
  $('.owl-prev').attr('title', '上一张');
  $('.owl-next').attr('title', '下一张');
});

方法3：使用aria-label属性替代title #

无障碍标准中，aria-label是更推荐的属性，同样可以在初始化完成后设置：

$('.owl-carousel').owlCarousel({
  nav: true
}).on('initialized.owl.carousel', function() {
  $('.owl-prev').attr('aria-label', '上一张');
  $('.owl-next').attr('aria-label', '下一张');
});

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