如何开发无障碍 Swiper

0.知识准备

轮播组件的组成

1. Slide：轮播组件中的幻灯片
2. Next Slide Control：用来切换到下一页幻灯片的按钮
3. Previous Slide Control：用来切换到上一页幻灯片的按钮
4. Slide Picker Controls：一组可以让使用者开发特定幻灯片的元素，通常会以一系列原点来实现

1.开发示例

以按钮为控制元件的自动轮播元件： codepen.io/Kelly-CHI/p…

以Tabs为控制元件的自动轮播元件： codepen.io/Kelly-CHI/p…

2.开发规范

1. 焦点管理

2. 键盘交互

3. 重要的aria属性

   1. 轮播元件容器

      1. role:必须要有role="region"或者role="group"
      2. aria-roledescription=”carousel”
      3.  aria-label 或 aria-labelledby：轮播元件容器需要有可访问名称

   2. 幻灯片

      1. role：必须有role=“group”
      2. roledescription=”slide”
      3. aria-label 或是 aria-labelledby：幻灯片的可访问名称

   3. 包含所有幻灯片的容器

      1. aria-atomic=”false” ：可选，当前幻灯片是否自动播放

      2. aria-live

         1. aria-live=”off”：若自动播放开启时，设定为off避免干扰
         2. aria-live=”polite”：若自动播放关闭时，，设定 “polite” 在切换幻灯片时播放新幻灯片的咨询