2

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

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

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

4

1 回答 1

2

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

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

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

<button type="button" aria-label="Play">►&lt;/button>
<button type="button" aria-label="Pause">‖&lt;/button>
于 2013-12-17T11:41:58.000 回答