如何使仅包含图像的按钮可访问？

Question

我有一个 <img>，当点击时应该 执行一个动作 ，所以我将它包裹在 <button> 中，如下所示：

<button>
    <img src="" alt="Cat">
</button>

关于辅助功能，辅助功能树中的按钮应该有一个 role 和 label 与之关联。该角色是使用 <button> 标签完成的，通常，按钮的标签是其在开始和结束标签内的内容，但在我们的例子中只有一张图片。

那么在这种情况下如何使按钮可访问？ alt属性够用吗？

Answer 1

Regarding accessibility, a button should have role and label.

如果元素的默认语义不提供，您应该只提供 role。 <button> 是提交按钮。如果您为此使用它，则不需要 role。

同样，只有在没有固有的情况下才应提供 label。 <button> 的内容对其进行了标记，并且您的 <img> 元素具有 alt 属性。

So how to make the button accessible in this case? is the 'alt' attribute enough?

是的。

How to make a button containing only an image accessible?