原文地址：How to Make a Fully Accessible CSS-Only Carousel

原文作者：Jennifer Wjertzoch

译文出自：掘金翻译计划

如何用纯 CSS 去实现一个无障碍的轮播图，不使用任何 Javascript 或者 jQuery 插件

首先，什么是轮播图？轮播图是一个接一个展示的一组图片。也被称为“幻灯片”。通常网站上的轮播图会包含大量内容，否则这些内容没有合适的地方展示。

“虽然轮播图并不是那么有用，但我认为它们不会很快消失。”

— Brad Frost

在网上找到的大部分轮播图插件对视障人士都不是很友好。超过一半的轮播图插件都或多或少存在无障碍问题。很多时候，这些轮播图都是不可用的，因为人们不会特别关注无障碍的问题。也正因此，很多无障碍的场景和设备兼容会被忽略掉。

本文中，我们将看一看现在轮播图中存在的无障碍问题。我还将带领大家如何实现一个轮播图，并通过几个简单的步骤让它变得对视障人士更加友好。

背景

并非所有的轮播图在实现和功能上是完全一致的。但是仍有一些因素影响无障碍体验。比如：

基本上每一个轮播图有自己一套结构。所以屏幕阅读器间没有统一的标准去帮助引导用户。
许多视障用户无法判断当前长按的位置是不是在轮播图内部。这导致他们不知道怎么点击或跳过轮播图。
很多时候，轮播图上的操作按钮与图片相比，对比度太低或尺寸太小。这给视障用户使用带来不便。
如果轮播图是自动播放的，视障用户会很迷惑。他们不理解为什么当前的内容一直在变化。循环播放的轮播图也会给那些有认知障碍的用户带来困扰。

现状

我调研了三个现成的轮播图插件：

UiKit Slider or Slideshow — UiKit Slider 是一款轻量级模块化的轮播图插件。在这之前，我只用过一些体积较小的 UiKit 插件，如网格布局或手风琴列表。与它们相比，轮播图插件算是一个比较大的了。除此之外，焦点引导和无障碍菜单也不支持。
Swiper Slider — 这个轮播图十分强大，你只需要引入 swiper 的核心库和所需的组件就可以使用了。它支持无障碍模式。
a11y-slider — a11y-slider 完全由 JavaScript 编写并且不太灵活。但这也给了我灵感，有没有跳过轮播图的可能性。

很快我意识到我是对的，这些库我都不需要。我准备只用 CSS 滚动快照去实现一个轮播图。这样，我就可以不依赖任何一个现有的 JavaScript 的实现方案。

实现

步骤 1 - 编写基本的 HTML/CSS 结构

codepen 初始化基本的 HTML/CSS 结构

步骤 2 - 添加 `scroll-snap-type` 属性

通过 scroll-snap-type 属性，你可以在滚动时将你的页面元素固定在某个位置。这将会给你的轮播图带来更好的交互体验。

scroll-snap-type 属性已经被很多浏览器所支持。

对你的轮播区域添加如下样式

.slides {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

让我们看看这几个属性都做了什么

overflow-x: scroll;

scroll

如果移除元素内容区域的话，图片的左右边缘会被进行裁剪。浏览器将决定是否展示滚动条。

scroll-snap-type: x mandatory;

滚动容器轴的方向为 x 轴，即滚动容器上的滚动点是水平排布的。

mandatory

如果设置了 mandatory，当滚动结束时，会使浏览器自动调滚动到最近的一张图片的滚动点上。

对轮播图的每一项添加如下样式

.slides-item {
  scroll-snap-align: start;
}

让我们看看这个属性做了什么

scroll-snap-align: start;

start

scroll-snap-align 设置为 start 后，我们将决定图片滚动到一半时松手，会让图片吸附到滚动容器的开头。

codepen 添加 scroll-snap-align

步骤 3 - 移除 CSS 中的滚动条

如果你想隐藏滚动条，你可以添加如下代码。以下代码都是可行的。滚动条可见有很多好处，但我个人觉得这样不是十分美观。

// firefox 隐藏滚动条
.slides {
  scrollbar-width: none;
}
// webkit blink 内核的浏览器隐藏滚动条
.slides::-webkit-scrollbar {
  display: none;
}

codepen 移除 CSS 中的滚动条

步骤 4 - 优化轮播图无障碍体验

我们的初衷最重要的一点就是要支持无障碍。轮播图从实用性的角度来看是很有争议的，因为他们的内容让视障用户难以理解。因此，你可以改善一些交互来提升视障用户的无障碍体验。

要使轮播图对视障用户更加友好，需要注意以下几点：

索引

所有的功能，包括轮播图元素之间的导航，都要支持键盘操作和手势长按操作。

为每一张轮播图添加从 0 开始的索引，它会取到元素默认的导航顺序。这会允许那些不能被选中的元素（如 <div>，<span>，<p>，没有 href 的 <a> 标签等）通过键盘选中。

语义化标签

为轮播图的每一项添加一个通用的 aria-label（如 aria-label="carousel"），这样视障用户将会听到轮播图已经生效，并且知道如何操作切换轮播图。

如果没有设置 aria-label，视障用户将会听到元素本身的文本内容。

跳过轮播图

我们还允许视障用户通过长按聚焦，来展示一个隐藏的按钮去跳过轮播图。这个例子中，我们在轮播图上增加了一个小的遮罩层，当用户长按聚焦轮播图时，给出用户选择是否要跳过轮播图到下一个页面元素。

不要设置自动播放

如果轮播图自动播放了，随着轮播图的切换，视障用户不会完整的知道图上的内容。因此，通过长按的手势去获取轮播图的内容变得十分困难。经常变换的内容不利于视障用户的使用。

颜色对比

记得检查轮播图上文字的大小和颜色对比度。另外，为了让视障用户更好地交互，在长按聚焦和失焦时给出声音提示。

codepen 最终版本的轮播图

总结

多亏有 CSS scroll-snap 属性，当我们想为我们的网站加入一个简单的轮播图时，不用再去引入庞大的 JavaScript 库。

即使 JavaScript 因为载入或者运行过程中因为某些原因报错了，轮播图依然可以照常使用。

此外，这种轮播图对于一些老版本的浏览器不支持 scroll-snap 的依然适用。当然，这种方案对这些浏览器而言并不是最优解，但是是可用的。

How to Make a Fully Accessible CSS-Only Carousel