播放/暂停按钮的 wcag 合规性问题答案

【问题标题】：wcag compliance issue with play/pause button播放/暂停按钮的 wcag 合规性问题
【发布时间】：2013-12-16 10:32:57
【问题描述】：

作为使我们的网站符合 WCAG 合规性的一部分，我们正在为轮播添加播放/暂停按钮。这里的屏幕阅读器以不同的方式阅读

<div id="imageCarouselPlayBtn" class="cblt-button imageCarouselPlayBtn" tabindex ="0">
    &#9658;
</div>
<div id="imageCarouselPauseBtn" class="cblt-button imageCarouselPauseBtn" tabindex ="0">
    &#8214;
</div>`

在这种情况下，屏幕阅读器将暂停按钮读取为 双垂直线 和组用于播放按钮。如果我们使用 sprite 图像，它会读取为 group 两个播放/暂停按钮。这个问题有什么好的解决方案，而不是同时使用图像标签吗？

【问题讨论】：

标签： accessibility wcag wcag2.0

【解决方案1】：

您可以使用 WAI-ARIA 的aria-label attribute：

它为用户提供了一个可识别的对象名称。

另外：播放/暂停按钮为什么不使用button/input 而不是div 有什么原因吗？使用按钮，您的标记可能如下所示：

<button type="button" aria-label="Play">►</button>
<button type="button" aria-label="Pause">‖</button>

【讨论】：

也许最好只有一个按钮，其 aria-label 值在点击时会发生变化
@audre7：也许，是的。 UX相关问题：Alternates to the “play/pause” button·Separation of play and pause buttons for playing media·Should a toggle button show its current state or the state to which it will change?
更改aria-label 是一个很好的解决方案。关于将名称与 aria-live announcements 区分开来有关更改的一些警告。阅读this useful article which addresses changing the accessible name of a toggle button. 它专门讨论了播放/暂停按钮。