如何制造一个彻底无障碍的纯CSS旋转木马

不运用JavaScript!没有jQuery插件!

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

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

-布拉德-弗罗斯特

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

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

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

不是一切的旋转木马在完成和功用方面都是相同的。可是一些常见的要素在无障碍性方面出了问题。旋转木马中一些常见的可拜访性问题是。

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

现在现已有什么了？

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

  1. UiKit Slider或Slideshow– 捆绑在一起，很简便。可是，在此之前，我只运用过UiKit中较小的东西，如砖石结构的布局或手风琴。旋转木马现已是比较大的东西了。除此之外，还没有供给键盘导航和经过标签的可拜访性。
  2. Swiper Slider– 这个旋转木马能够做许多作业，而且答应你只导入旋转木马的中心和你需求的实践组件。这个旋转木马是彻底无障碍的。
  3. 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步–使旋转木马能够运用

开发的一个重要方面是可拜访性。从可用性的视点来看，旋转木马是有争议的，由于它们的内容或许难以拜访。因而，你能够经过保证一定程度的可拜访性来进步一般的可用性。

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

  1. Tabindex
    一切的功用，包括旋转木马元素之间的导航，都能够经过键盘的 “焦点 “来操作。
    在tabindex中增加一个0的值，这将使元素处于默许的导航次序中。这答应那些一般不能被重视的元素（如<div>,<span>,<p>, 和<a> ，没有href ）获得键盘重视。

  2. Aria-Label

    为包装元素和幻灯片增加通用的aria-label （如aria-label="carousel" ），这样屏幕阅读器用户就能够精确地知道旋转木马是如何设置的，以及它是如何作业的。
    假如没有设置aria-label，HTML元素就会运用其文本内容来更具体地描述它。

  3. 越过内容
    咱们还答应屏幕阅读者经过键盘焦点处的一个躲藏的 “越过 “链接来越过旋转餐厅。在这种情况下，一个小的掩盖层会掩盖在旋转木立刻，并供给跳到下一个元素的选项。

  4. 不要运用主动播放
    假如旋转木马旋转，用户或许难以在它改变之前阅读每张幻灯片的内容。因而，用键盘拜访旋转木马及其内容或许会变得困难或不或许。改变的内容一般不会传达给屏幕阅读器用户。

  5. 色彩的比照度
    要经常检查色彩比照和显现在幻灯片内容上的文字大小。另外，为了让用户与控件连接，在聚集或鼠标悬停时向用户显现状况。

彻底无障碍旋转木马的终究版别

结论

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