如何给jQuery Owl轮播按钮添加aria-label与role属性提升可访问性

要解决这个问题，你可以通过两种方式修改自动生成的按钮属性，修复错误的role="presentation"并添加aria-label来提升页面可访问性：

方法1：页面就绪后直接修改DOM #

在轮播初始化完成后，用jQuery选择器定位按钮并修改属性：

$(document).ready(function() {
  // 初始化你的轮播实例
  $('.your-carousel-selector').owlCarousel({
    loop: true,
    nav: true,
    // 你的其他轮播配置项
  });

  // 处理上一页按钮
  $('.owl-prev')
    .removeAttr('role') // 移除无意义的presentation角色
    .attr('aria-label', '查看上一张幻灯片');
  
  // 处理下一页按钮
  $('.owl-next')
    .removeAttr('role')
    .attr('aria-label', '查看下一张幻灯片');
});

方法2：利用Owl Carousel的初始化回调（更可靠） #

如果轮播是动态加载或延迟初始化的，使用Owl的onInitialized回调能确保按钮已生成后再修改，避免找不到元素的问题：

$('.your-carousel-selector').owlCarousel({
  loop: true,
  nav: true,
  // 其他轮播配置项
  onInitialized: function(event) {
    const prevBtn = event.target.querySelector('.owl-prev');
    const nextBtn = event.target.querySelector('.owl-next');

    if (prevBtn) {
      prevBtn.removeAttribute('role');
      prevBtn.setAttribute('aria-label', '查看上一张幻灯片');
    }
    if (nextBtn) {
      nextBtn.removeAttribute('role');
      nextBtn.setAttribute('aria-label', '查看下一张幻灯片');
    }
  }
});

关键说明： #

• 不需要添加role="prev"或role="next"，ARIA规范中没有这两个角色；原生<button>元素本身就具备正确的交互语义，只需补充aria-label说明按钮功能即可。
• 必须移除默认的role="presentation"，这个角色是给纯装饰、无交互的元素使用的，会破坏按钮的可访问性语义。

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