Wave 可访问性检查中的空按钮错误

Posted 2023-03-06

【中文标题】Wave 可访问性检查中的空按钮错误

【英文标题】：Empty button error in wave accessibility check

【发布时间】：2021-12-26 18:26:11

【问题描述】：

您好，我是新的 Web 开发人员。我从 wave.webaim.org 收到空按钮错误 - WCAG 2.0 AA 级可访问性。 这就是代码。

<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">

有什么帮助吗？ 提前致谢。

【问题讨论】：

您需要检查 WCAG 2.1，因为这是当前标准，而不是 WCAG 2.0。

【参考方案1】：

“空按钮错误意味着网页上的按钮之一为空或不包含描述按钮功能的文本。或者，如果它是图像按钮，则按钮中包含的图像缺少替代文本。” 来源：https://equalizedigital.com/accessibility-checker/empty-button/

可能是按钮上没有文字。如果您不想在按钮上放置可见文本，则可以放置由屏幕阅读器阅读的视觉隐藏文本，有时在 css 中称为 sr-only 类。 更多信息：How to hide a text and make it accessible by screen reader?

【参考方案2】：

您需要在button 中包含实际文本。如果您不希望有可见文本，因为您以某种方式设置按钮样式，则使用上面的 PisteVW 解决方案就可以了。

或者，您可以使用属性aria-label="button text here" 给按钮一个标签。

此外，您需要删除role=presentation，因为按钮执行清晰的操作，它不是简单地指示演示图像，例如：https://www.w3.org/TR/wai-aria-1.1/#presentation

【讨论】：

我尝试添加实际文本，但没有任何改变。

你能用新的按钮代码更新你的帖子，但不仅仅是一行，整个按钮代码，包括文本甚至样式。