如何制作一个完全无障碍的纯CSS旋转木马

不使用JavaScript!没有jQuery插件!

首先，什么是旋转木马？旋转木马可以一个接一个地展示一系列的元素。也被称为 "幻灯片 "和 "滑块"。通常情况下，这些被用来在网站上容纳更多的内容，否则将无法容纳。

"尽管旋转木马并不那么有效，但我觉得它们不会很快消失。"

-布拉德-弗罗斯特

在网络上发现无法访问的旋转木马是非常普遍的。互联网上一半以上的旋转木马都有一些无障碍问题。很多时候，这些都是无障碍的，因为人们对无障碍性并不重视。通常，这也是因为有太多的无障碍因素和要求，以至于有些因素被忽略了。

在这篇文章中，我们将看看旋转木马中一些常见的可访问性问题。我还将展示如何构建这个旋转木马，以及我是如何通过几个步骤使它更容易被访问的。

旋转木马中常见的可访问性问题有哪些？

不是所有的旋转木马在实现和功能方面都是一样的。但是一些常见的因素在无障碍性方面出了问题。旋转木马中一些常见的可访问性问题是。

几乎每个旋转木马都有不同的结构。所以也没有标准化的屏幕阅读器来帮助导航。
许多屏幕阅读器用户无法分辨他们的虚拟光标何时进入或离开旋转木马。这导致他们不知道它是否存在或如何退出。
很多时候，幻灯片上的控件与它们覆盖的内容相比，对比度太低或太小。这使得用户很难使用它们。
如果旋转木马的幻灯片是旋转的，屏幕和键盘用户会感到困惑。他们很难理解前面不断变化的内容。自动旋转也会给有认知障碍的用户带来问题。

现在已经有什么了？

为了研究，我在三个现成的滑块上创建了一些原型。

UiKit Slider或Slideshow- 捆绑在一起，很轻便。但是，在此之前，我只使用过UiKit中较小的东西，如砖石结构的布局或手风琴。旋转木马已经是比较大的东西了。除此之外，还没有提供键盘导航和通过标签的可访问性。
Swiper Slider- 这个旋转木马可以做很多事情，并且允许你只导入旋转木马的核心和你需要的实际组件。这个旋转木马是完全无障碍的。
a11y-slider - a11y-slider完全由JavaScript构建，很难定制。但它给我的启发是，可以完全跳过旋转木马。

我很快就感觉到，我们不需要这些，我是对的。我设法通过CSS scroll-snap来完全安装旋转木马。这样一来，我就不依赖于任何现成的JavaScript解决方案了。

让我们开始构建

第1步 - 设置基本的HTML/CSS结构

设置基本的HTML/CSS结构

第2步--添加滚动捕捉（Scroll-Snap

通过CSS滚动捕捉，你可以在滚动时将你的元素固定在某个位置。这在与你的旋转木马互动时带来了良好的用户体验。

Scroll-snap在浏览器上已经有很好的分布。

浏览器

我们对一个有效的旋转木马所需要的一切都已经发生在这个领域。

.slides {  overflow-x: scroll;  scroll-snap-type: x mandatory;  scroll-behavior: smooth;}
复制代码

让我们来看看它们的详细作用。

overflow-x: scroll;
复制代码

滚动
内容被修剪成适合水平方向的填充框。浏览器决定该元素的内容是在有滚动条还是无滚动条的情况下显示。

scroll-snap-type: x mandatory;
复制代码

x
使得在滚动到布局中的某些点上时，可以抓取到这些点。

mandatory
当与强制值结合时，这使得浏览器在完成滚动动作时总是自动滚动到最近的项目。

将以下内容添加到你的slides-item中。

.slides-item {  scroll-snap-align: start;}
复制代码

让我们看看它的详细作用。

scroll-snap-align: start;
复制代码

start
通过这个，我们确定每张幻灯片的开头标志着滚动时的停止点。

添加滚动-捕捉

第3步--用CSS删除滚动条

如果你想隐藏滚动条，你可以添加以下内容。这个方案效果很好。保持滚动条的可见性是有好处的，就我个人而言，我不觉得它很好看。

// Hides scrollbar in firefox.slides {  scrollbar-width: none;}
复制代码

用CSS去掉滚动条

第4步--使旋转木马可以使用

开发的一个重要方面是可访问性。从可用性的角度来看，旋转木马是有争议的，因为它们的内容可能难以访问。因此，你可以通过确保一定程度的可访问性来提高一般的可用性。

为了使旋转木马更有效，需要记住的一些重要事项是。

Tabindex
所有的功能，包括旋转木马元素之间的导航，都可以通过键盘的 "焦点 "来操作。
在tabindex中添加一个0的值，这将使元素处于默认的导航顺序中。这允许那些通常不能被关注的元素（如<div>,<span>,<p>, 和<a> ，没有href ）获得键盘关注。
Aria-Label

为包装元素和幻灯片添加通用的aria-label （如aria-label="carousel" ），这样屏幕阅读器用户就可以准确地知道旋转木马是如何设置的，以及它是如何工作的。
如果没有设置aria-label，HTML元素就会使用其文本内容来更详细地描述它。
跳过内容
我们还允许屏幕阅读者通过键盘焦点处的一个隐藏的 "跳过 "链接来跳过旋转餐厅。在这种情况下，一个小的覆盖层会覆盖在旋转木马上，并提供跳到下一个元素的选项。
不要使用自动播放
如果旋转木马旋转，用户可能难以在它变化之前阅读每张幻灯片的内容。因此，用键盘访问旋转木马及其内容可能会变得困难或不可能。变化的内容通常不会传达给屏幕阅读器用户。
颜色的对比度
要经常检查颜色对比和显示在幻灯片内容上的文字大小。另外，为了让用户与控件连接，在聚焦或鼠标悬停时向用户显示状态。

完全无障碍旋转木马的最终版本

结论

多亏了像滚动捕捉这样的现代功能，当我们想为我们的网站创建一个简单的旋转木马时，我们不必求助于一个广泛的库。
即使加载或运行JavaScript因某种原因而失败，这个解决方案也能发挥作用。
此外，即使在不支持scroll-snap的旧版浏览器中，这个方案也能发挥作用。当然，这个解决方案在这些浏览器中并不完美，但它是可用的。