幻灯片无法播放

Photo: Fairground Whizz

图片： Fairground Whiz

Slideshow. Slider. Carousel. Whatever you call them, they’re ubiquitous on organizational home pages across the web. And almost all of them are inaccessible.

幻灯片放映。 滑块。 轮播。 无论您如何称呼它们，它们在网络的组织主页上无处不在。 几乎所有人都无法访问。

Sometimes they are inaccessible because people just don’t care about accessibility. But in most cases there are just so many accessibility requirements that need to be addressed that a couple of them get missed. And that can be disastrous for accessibility.

有时它们是无法访问的，因为人们只是不在乎可访问性。 但是在大多数情况下，需要解决的可访问性要求如此之多 ，以至于其中的一些错过了。 这对于可访问性可能是灾难性的。

Unfortunately none of the mainstream toolkits like Bootstrap, Foundation or Slick Carousel get the accessibility right by default, so if you want an accessible slideshow, you need to make substantial changes.

不幸的是，默认情况下，Bootstrap，Foundation或Slick Carousel等主流工具包都无法正确获得可​​访问性，因此，如果您想要可访问的幻灯片放映，则需要进行重大更改。

In this article, we are going to look at all the accessibility requirements that need to be addressed to create an accessible slideshow. In the next article, we’ll be providing guidance and actual code to make an accessible slideshow.

在本文中，我们将研究创建可访问幻灯片演示时需要解决的所有可访问性要求。 在下一篇文章中，我们将提供指导和实际代码以制作可访问的幻灯片。

There are two main types of slideshows that we often see. The first one (Figure 1) has circles to indicate the slides and provides a method of moving between slides. The second one (Figure 2) has arrows at the left and right edge of the slideshow to allow users to choose the next or previous slide.

我们经常看到两种主要类型的幻灯片。 第一个(图1)具有指示幻灯片的圆圈，并提供了一种在幻灯片之间移动的方法。 第二个幻灯片(图2)在幻灯片的左右边缘具有箭头，允许用户选择下一张或上一张幻灯片。

Figure 1

图1

Figure 2

图2

The biggest problem with these slideshows is that they cannot be paused by the user. The next most serious problem is that neither is keyboard accessible. In the first example the keyboard skips the slideshow entirely.

这些幻灯片的最大问题是用户无法暂停它们。 下一个最严重的问题是键盘都无法访问。 在第一个示例中，键盘完全跳过幻灯片播放。

In the second example the arrows are not keyboard accessible, but the link within the two slides in the slideshow is. This means that the keyboard focus disappears when it is focused on a slide not currently visible.

在第二个示例中，箭头不能通过键盘访问，但是幻灯片显示的两个幻灯片中的链接是可以访问的。 这意味着当键盘焦点聚焦在当前不可见的幻灯片上时，它会消失。

We have released two slideshows recently. Energy Rating (www.energyrating.gov.au) was built with Bootstrap (with some heavy modifications). AccessibilityOz ( www.accessibilityoz.com.au) has an accessible slideshow that was also based on Bootstrap (with even heavier modifications).

我们最近发布了两个幻灯片放映。 能源评估( www.energyrating.gov.au )是使用Bootstrap建立的(进行了一些重大修改)。 AccessibilityOz( www.accessibilityoz.com.au )具有一个可访问的幻灯片放映，该幻灯片也基于Bootstrap(甚至进行了较大的修改)。

There are five principles that need to be met to create an accessible slideshow:

创建无障碍幻灯片需要满足五项原则：

1. Allow the user to stop all movement
   允许用户停止所有运动
2. Provide visible controls accessible to the keyboard, mouse and touch
   提供键盘，鼠标和触摸可访问的可见控件
3. Provide a valid and understandable focus order through the slideshow
   通过幻灯片提供有效且易于理解的焦点顺序
4. Valid coding and style sheets
   有效的编码和样式表
5. Provide a meaningful alternative to the slideshow
   为幻灯片提供有意义的替代方法

原则1：允许用户停止所有运动 (Principle 1: Allow the user to stop all movement)

One of the reasons marketing departments like slideshows is because there’s movement on the page, which draws the viewer’s attention to that area.

市场营销部门之所以喜欢幻灯片放映的原因之一是因为页面上存在移动，从而吸引了观众对该区域的注意。

Allowing users to control the movement of a slideshow is one of the four “non-interference” clauses in WCAG2. These four success criteria apply to all content on the page – even content that is classified as inaccessible by the owner.

允许用户控制幻灯片的移动是WCAG2中四个“不干扰”子句之一。 这四个成功标准适用于页面上的所有内容，甚至包括所有者认为无法访问的内容。

The specific success criterion is 2.2.2: Pause, Stop Hide : For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential.

成功的具体标准是2.2.2：暂停，停止隐藏 ：对于(1)自动开始，(2)持续超过5秒，(3)与其他内容同时显示的任何移动，闪烁或滚动信息，用户可以使用一种机制来暂停，停止或隐藏它，除非移动，闪烁或滚动是必不可少的活动的一部分。

And I don’t think anyone can argue that a slideshow is essential!

而且我认为没有人能说出幻灯片放映是必不可少的！

As WCAG2 says, “the intent of this Success Criterion is to avoid distracting users during their interaction with a Web page”. It is not sufficient to pause the movement when it receives focus. It must be able to be completely stopped by the user, via the keyboard, mouse or touch (on a mobile device).

正如WCAG2所说，“ 此成功标准的目的是避免在与网页交互期间分散用户的注意力 ”。 当它获得焦点时，仅暂停运动是不够的。 用户必须能够通过键盘，鼠标或触摸(在移动设备上)完全停止它。

The easiest solution is to provide a link that stops the movement. We’ll talk more about the best way to implement this in the Controls section under Principle 2.

最简单的解决方案是提供一个停止运动的链接。 我们将在“原则2”下的“控制”部分中详细讨论实现此目标的最佳方法。

One more thing on movement: if you can at all avoid using an animated slide or fade in/out effect then do so. Transition effects are one of the biggest accessibility issues in a slideshow as both slides must exist in the DOM at the same time. If you can avoid transitions then your slideshow will be much easier to make accessible.

关于运动的另一件事：如果您完全可以避免使用动画幻灯片或淡入/淡出效果，请这样做。 过渡效果是幻灯片放映中最大的可访问性问题之一，因为两个幻灯片必须同时存在于DOM中。 如果您可以避免过渡，那么幻灯片放映将更容易进行。

原理2：提供键盘，鼠标和触摸可以访问的可见控件 (Principle 2: Provide visible controls accessible to the keyboard, mouse and touch)

Far too often the controls on a slideshow are very small, or quite low-contrast compared to the content they overlay. And focus / hover is often not too obvious either. There are four requirements to think about here:

与叠加的内容相比，幻灯片放映中的控件通常非常小，或者对比度很低。 而且焦点/悬停通常也不太明显。 这里有四个要考虑的要求：

• A. Are there controls to stop, start and move between slides?
  答：是否有控件可以在幻灯片之间停止，开始和移动？
• B. Are the controls highly visible (large enough to be seen and meet colour contrast requirements)?
  B.控件是否清晰可见(足够大才能被看到并满足色彩对比要求)？
• C. Is the focus/hover indication sufficiently different to the default state while also having enough contrast with the content?
  C.焦点/悬停指示与默认状态是否足够不同，同时与内容也有足够的对比度？
• D. Can the controls be manipulated by the mouse, the keyboard and touch?
  D.可以通过鼠标，键盘和触摸来操纵控件吗？

答：是否有控件可以在幻灯片之间停止，开始和移动？ (A. Are there controls to stop, start and move between slides?)

As mentioned in Principle 1, it is absolutely essential that users be able to stop all movement in the slideshow, via the mouse, the keyboard or touch alone. Also necessary is the ability for users to restart a slideshow if they have stopped it. It is not an actual requirement that users be able to move between slides, but it’s a good idea.

如原则1所述，用户必须能够通过鼠标，键盘或单独触摸停止幻灯片中的所有移动，这是绝对必要的。 如果用户停止了幻灯片放映，则还必须具有重新启动幻灯片放映的能力。 用户能够在幻灯片之间移动并不是实际的要求，但这是一个好主意。

B.控件是否清晰可见(足够大才能被看到并满足色彩对比要求)？ (B. Are the controls highly visible (large enough to be seen and meet colour contrast requirements)?)

We see problems with this requirement on a lot of slideshows. Either the controls are teeny-tiny or the controls are overlaid on the content and colour contrast is entirely dependent on the underlying slide. There are a number of solutions to this, including having a solid background behind the control which provides the contrast, and using a solid border around the control which provides the contrast.

我们在许多幻灯片中看到了这一要求的问题。 控件要么很小，要么控件覆盖在内容上，并且颜色对比度完全取决于基础幻灯片。 有许多解决方案，包括在提供对比的控件后面有一个实心背景，并在提供对比的控件周围使用实心边框。

C.焦点/悬停指示与默认状态是否有足够的区别，同时又与内容有足够的对比？ (C. Is the focus / hover indication sufficiently different to the default state while also having enough contrast with the content?)

We mostly see focus indicators only appear on mouse hover (and not keyboard focus) and often it consists of only a slight colour change of the controls. It is important that if you are going to use a colour change you need to meet colour contrast requirements.

我们通常会看到焦点指示器仅出现在鼠标悬停(而不是键盘焦点)上，并且通常只包含控件的轻微颜色变化。 重要的是，如果要使用颜色更改，则需要满足颜色对比度的要求。

An even better solution is to change the shape of the control on focus, like we have on the AccessibilityOz slideshow (see Figure 3 and 4). But remember it needs to appear on keyboard focus too!

更好的解决方案是更改焦点控件的形状，就像在AccessibilityOz幻灯片中一样(请参见图3和4)。 但是请记住，它也需要出现在键盘焦点上！

Figure 3

图3

Figure 4

图4

D.可以通过鼠标，键盘和触摸来操纵控件吗？ (D. Can the controls be manipulated by the mouse, the keyboard and touch?)

Most slideshows controls are completely inaccessible to the keyboard. All the controls that make up the slideshow need to be made accessible by keyboard alone. If the controls are done using buttons or links then they should be implicitly keyboard accessible unless you muck around with TABINDEX.

大多数幻灯片显示控件是键盘完全无法访问的。 组成幻灯片放映的所有控件都需要单独通过键盘进行访问。 如果控件是使用按钮或链接完成的，则除非您不熟悉TABINDEX，否则它们应该可以通过键盘隐式访问。

We see far fewer mobile-accessible slideshows because there are a number of additional accessibility requirements in making a slideshow accessible on a mobile device.

我们看到可移动访问的幻灯片的数量要少得多，因为在移动设备上使幻灯片可访问时还有许多其他可访问性要求。

Firstly, there must be an obvious method to pause the slideshow (it’s not sufficient to pause the slideshow on touch). Providing an actual pause button is necessary.

首先，必须有一种明显的方法来暂停幻灯片放映(仅在触摸时暂停幻灯片放映是不够的)。 必须提供一个实际的暂停按钮。

However, it is important that this button is large enough for people to tap easily (at least 7 – 10 mm). If the user can swipe to see the next slide, this needs to be indicated visually on the slideshow. And all actions; swipe, scroll and touch, must be triggered on the removal of touch, not on the initiation of touch (ie. when the user removes their finger from the device, not when the user first touches the device).

但是，重要的是，此按钮必须足够大以使人们可以轻松点击(至少7 – 10 mm)。 如果用户可以滑动以查看下一张幻灯片，则需要在幻灯片上直观地指出。 和所有动作； 滑动，滚动和触摸必须在移除触摸时触发，而不是在触摸启动时触发(即，当用户从设备上移开手指时，而不是在用户首次触摸设备时)。

Monash University provides a good example of this.

莫纳什大学就是一个很好的例子。

On the Monash desktop site, the slideshow has a pause button, but in the mobile version the slides don’t move automatically so there is no pause button (see Figure 5). However there are clear controls to move between slides, that also inform the user that there is more content in the slideshow.

在Monash桌面站点上 ，幻灯片具有一个暂停按钮，但是在移动版本中，幻灯片不会自动移动，因此没有暂停按钮(请参见图5)。 但是，有清晰的控件可以在幻灯片之间移动，也可以通知用户幻灯片放映中有更多内容。

Figure 5

图5

Griffith University is another great example of proper controls on the desktop and the mobile. On the desktop there is the option to move between slides and play the slideshow (the slideshow is paused by default).

格里菲斯大学 ( Griffith University)是在台式机和移动设备上进行适当控制的另一个绝佳示例。 在桌面上，可以选择在幻灯片之间移动和播放幻灯片(默认情况下，幻灯片是暂停的)。

In the mobile site, the slideshow moves by default but there is a clear pause button as well as controls to move between slides (Figure 6). Underneath the slideshow is a great example of indicating that there is more content with the addition of arrow controls.

在移动网站中，幻灯片放映默认情况下会移动，但是有一个清晰的暂停按钮以及在幻灯片之间移动的控件(图6)。 幻灯片下方是一个很好的示例，它通过添加箭头控件来指示存在更多内容。

Figure 6

图6

原则3：通过幻灯片显示提供有效且易于理解的焦点顺序 (Principle 3: Provide a valid and understandable focus order through the slideshow)

Focus order is an important accessibility requirement. The best way to explain it is that the order that items receive focus when tabbing through items, should match the underlying HTML (ie the site with style sheets disabled), which should match the visual order of the page.

焦点顺序是一项重要的可访问性要求。 最好的解释方式是，在逐项浏览时项获得焦点的顺序应与基础HTML(即禁用样式表的网站)相匹配，而HTML应与页面的视觉顺序相匹配。

However there is an additional requirement, which is that when you make a change to the page, it only changes content after the current focus. So a slideshow with an arrow on the right fails this requirement as change occurs prior to the current focus. There is an exception to this, and that is if the user is warned about the content change; we will be talking about this in the next article.

但是，还有一个附加要求，那就是当您更改页面时，它只会在当前焦点之后更改内容。 因此，在右侧带有箭头的幻灯片显示无法满足此要求，因为更改发生在当前焦点之前 。 有一个例外，那就是如果警告用户有关内容的更改； 我们将在下一篇文章中讨论。

So there are three requirements here: you want the focus order to match up with the visual layout. You want the controls to come before the content, or at least to have the “pause” control before anything else. And you need to make sure that activating a control doesn’t change content before the current focus.

因此，这里有三个要求：您希望焦点顺序与视觉布局匹配。 您希望控件位于内容之前，或者至少要在所有其他内容之前具有“暂停”控件。 而且，您需要确保激活控件不会在当前焦点之前更改内容。

This is a place where some compromise is inevitable, but in general try to put things like a pause/play button and position indicators at the top of the slideshow and have them come before the content in the tab-focus order.

这是不可避免的折衷方案，但是通常尝试将诸如暂停/播放按钮和位置指示器之类的内容放在幻灯片的顶部，并使它们按制表符焦点顺序位于内容之前。

If, however, you’ve used HTML elements which don’t usually accept keyboard focus (such as LI elements) you’ll need to explicitly add them to the keyboard focus order (tabindex=“0” will generally suffice). You will also then need to add a JavaScript handler to accept keystrokes in addition to whatever you’ve assigned to the click event.

但是，如果您使用HTML元素通常不接受键盘焦点(例如LI元素)，则需要将它们显式添加到键盘焦点顺序中(通常满足tabindex =“ 0”即可)。 然后，除了分配给click事件的所有内容之外，您还需要添加一个JavaScript处理程序来接受击键。

原则4：有效的编码和样式表 (Principle 4: Valid coding and stylesheets)

This brings us to proper coding and stylesheet usage of your slideshow. As I mentioned, we will be covering this in a future article, but these are the important things to know. The slideshow does not need to function with style sheets disabled, but all the content needs to be available.

这使我们可以正确使用幻灯片的编码和样式表。 正如我提到的那样，我们将在以后的文章中介绍这一点，但是这些是需要了解的重要事项。 幻灯片不需要禁用样式表功能 ，但所有的内容需要可用 。

Most of our clients just show one slide after the other. It’s not pretty, but it’s accessible.

我们的大多数客户只显示一张幻灯片，另一张幻灯片。 它不是很漂亮，但是可以访问。

One of the things you must be very careful to avoid is slideshow movement when style sheets are disabled. Often what we see are all the slides displayed, one after the other, and then the first slide disappears, and all the slides move up, then the next slide disappears, and all the other slides move up, etc.

您必须非常避免避免的一件事是禁用样式表时幻灯片的移动。 通常我们看到的是所有幻灯片的显示，一个接一个，另一个幻灯片消失，所有幻灯片向上移动，然后下一个幻灯片消失，所有其他幻灯片向上移动，依此类推。

This can be apparent to screen reader users; they read a slide then when they go back to try and find it, it is gone. The other thing we often see is overlapping content when style sheets are disabled.

这对于屏幕阅读器用户来说是显而易见的。 他们读了一张幻灯片，然后当他们回去尝试找到它时，它就消失了。 我们经常看到的另一件事是样式表被禁用时重叠的内容。

Hidden structural labels should also be included in the slideshow, but we will talk more about that in the next article.

隐藏的结构标签也应包含在幻灯片中，但是我们将在下一篇文章中进一步讨论。

If there is any text on the slideshow it needs to increase when the user increases text size in the browser. On a mobile device, your slideshow needs to support pinch zoom.

如果幻灯片放映中有任何文本，则当用户在浏览器中增加文本大小时，它需要增加。 在移动设备上，幻灯片放映需要支持收缩缩放。

原则5：提供有意义的替代方案 (Principle 5: Provide meaningful alternatives)

The sad truth is that no matter how much effort you put in to this, there are going to be some edge cases – combinations of older browsers and assistive technology – where your spiffy slideshow simply won’t be accessible.

可悲的事实是，无论您为此付出了多大的努力，在某些情况下-旧版浏览器和辅助技术的结合-都无法访问您出色的幻灯片。

So you’ll need to provide an alternative to the slideshow, assuming for a moment that there is any meaningful content in it. And, quite frankly, if there is no meaningful content in your slideshow then you should get rid of your slideshow .

因此，您需要假设幻灯片中有任何有意义的内容，以提供一种替代幻灯片的方法。 而且，坦率地说，如果幻灯片中没有有意义的内容，则应该摆脱幻灯片 。

The simplest way to provide an alternative is to have the text from each slide repeated in a “screen-reader only” section along with any links. Then include a “skip past the slideshow” link. This is done by creating a “screen-reader only” class.

提供替代方法的最简单方法是在“仅限屏幕阅读器”部分中重复每张幻灯片中的文本以及任何链接。 然后添加“跳过幻灯片”链接。 这是通过创建“仅限屏幕阅读器”类来完成的。

An additional trick worth considering is to not apply this class directly in your HTML, but to instead apply it with JavaScript right before enabling the slideshow code. This way if there’s no JavaScript (and thus no slideshow) the alternative will be visible.

还有一个值得考虑的技巧是不要在您HTML中直接应用此类，而应在启用幻灯片演示代码之前立即将其与JavaScript一起应用。 这样，如果没有JavaScript(因此也没有幻灯片)，则替代方案将可见。

It’s important (and an accessibility requirement) that this alternative displays at the site of the slideshow and not elsewhere on the page. Also remember that the controls reliant on JavaScript should not be visible in the case where JavaScript is disabled.

重要的是(和可访问性要求)，此替代方法应在幻灯片放映的站点而不是在页面的其他位置显示。 还要记住，在禁用JavaScript的情况下，依赖于JavaScript的控件应该不可见。

It is necessary that the alternative is equivalent to the slideshow. Therefore if you have links in your slideshow to areas in your site, you need to replicate these links in the alternative.

替代方案必须等效于幻灯片。 因此，如果幻灯片中有指向站点区域的链接，则需要以其他方式复制这些链接。

In some cases the images in the slideshow will need to have valid ALT attributes. If the images are purely decorative (as in the AccessibilityOz example) then you can use alt=“”. However if the images do convey information then they need a valid ALT attribute.

在某些情况下，幻灯片放映中的图像将需要具有有效的ALT属性。 如果图像纯粹是装饰性的(例如在AccessibilityOz示例中)，则可以使用alt =“”。 但是，如果图像确实传达信息，则它们需要有效的ALT属性。

结论 (Conclusion)

So now you understand why it is so difficult to make an accessible slideshow! I hope these principles have helped, and watch out for our next article when we’ll provide you with some real code.

因此，现在您了解了为什么制作无障碍幻灯片如此困难！ 我希望这些原则能有所帮助，在为您提供一些实际代码时，请注意我们的下一篇文章。

翻译自: https://www.sitepoint.com/unbearable-accessible-slideshow/