Question

为什么必须在按钮内包装图像？

<button>
   <img/>
</button>

不仅可以使图像可以点击而且还可以将其包裹在按钮中，这是不错的做法？

Answer 1

按钮设计用于交互式控件，图像不是。

屏幕阅读器会宣布<button>为按钮，以便用户知道可以点击它。

使用非定位设备（例如在文档中进行标签浏览）或（再次）使用屏幕阅读器进行导航的人将遇到<button>，但会跳过<img>。

在图像上单击一个单击事件处理程序会产生主要的可访问性问题。

Answer 2

同意上面的屏幕阅读器点。不是最好的做法。

您可以使用JS click事件使图像可单击，并使用css cursor属性作为指针，使图像在鼠标悬停时可以点击。还要在图像中添加alt文本，以便在屏幕阅读器上将其标识为图像。

希望有更好的帮助。