Question

作为使我们的网站符合WCAG标准的一部分，我们正在为旋转木马添加播放/暂停按钮。这是屏幕阅读器以不同的方式阅读

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

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

Answer 1

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

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

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

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

wcag合规性问题，播放/暂停按钮

1 个答案: