accessibility - 播放/暂停按钮的 WCAG 合规性问题

Question

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

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

在本例中，屏幕阅读器将暂停按钮读取为双垂直线，并将组读取为播放按钮。 如果我们使用 Sprite 图像，则对于两个播放/暂停按钮，它都会读取为组。 对于这个问题，除了使用图像标签之外，还有什么好的解决方案吗？

Answer 1

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

It provides the user with a recognizable name of the object.

另外:是否有理由不使用 button/input 而不是 div 来播放/暂停按钮？对于按钮，您的标记可能如下所示:

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