Swiper A11y(无障碍阅读) - a11y

A11y(无障碍阅读)为残障人士浏览网页提供辅助功能,在屏幕阅读器添加语音提示等信息。
swiper默认开启a11y,当你点击swiper时,设备会发出声音提示你正在进行的操作。你可以开启手机的屏幕阅读来测试这个功能。
iPhone开启方法:设置->辅助功能->旁白 。手机如何开启屏幕阅读?
参数名 类型 默认值 描述
enabled boolean true 启动A11y,并为swiper增加一个实时区域(live regions)①
prevSlideMessage string 'Previous slide' 在屏幕阅读器为上一页按钮添加标签信息 ②
nextSlideMessage string 'Next slide' 在屏幕阅读器为下一页按钮添加标签信息 ②
firstSlideMessage string 'This is the first slide' 在屏幕阅读器当处于第一个slide为上一页按钮添加信息①
lastSlideMessage string 'This is the last slide' 在屏幕阅读器当处于最后一个slide为下一页按钮添加信息①
paginationBulletMessage string 'Go to slide {{index}}' 在屏幕阅读器为分页器小点添加标签信息 ②
notificationClass string 'swiper-notification' A11y 实时区域的类名
containerMessage string null 在屏幕阅读器为container添加标签信息(6.3.0) ②
containerRoleDescriptionMessage string null 在屏幕阅读器为container添加语义描述(6.3.0) ④
itemRoleDescriptionMessage string null 在屏幕阅读器为slide添加语义描述(6.3.0) ④
slideLabelMessage string '{{index}} / {{slidesLength}}' 在屏幕阅读器为slide添加标签信息(6.5.1) ②
slideRole string 'group' 在屏幕阅读器为slide添加语义(6.5.8) ③

① aria live regions:实时区域。使用辅助工具的用户通过live region可以获知文档的变更部分,而且焦点仍保留在当前活动中。就像AJAX
② aria-label:给当前元素加上的标签描述,例如“进入下一页”,“返回上一页”。
③ role:为一个非标准的tag添加语义。比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button。
④ aria-roledescription:语义的描述

关于无障碍浏览

  • 网络无障碍俗称可访问性,英文accessibility,简称[a11y]
  • Accessible Rich Internet Applications (ARIA) 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用的一套机制。
  • W3C Web Accessibility Initiative (WAI) 互联网针对无障碍推出指导纲领。

a11y信息

类型:
object/boolean
启用版本:
4.0.0

效果演示

slider1
slider2
slider3
 
 

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript"> 
  var mySwiper = new Swiper('.swiper',{
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
    },
    a11y : {
      prevSlideMessage: 'Previous slide',
      nextSlideMessage: '点击可进入下一页幻灯片',
      firstSlideMessage: 'This is the first slide',
      lastSlideMessage: 'This is the last slide',
      paginationBulletMessage: 'Go to slide {{index}}',  
      notificationClass: 'swiper-notification',
      containerMessage: 'banner',
      containerRoleDescriptionMessage: 'This is a swiper',  //aria-role-description
      itemRoleDescriptionMessage: 'slider',
      slideLabelMessage: '{{index}} / {{slidesLength}}',
      slideRole: 'group',
    },
  }) 
</script>