超链接文本可以包含单词和装饰图像吗？

Question

我知道技术上可以让单个超链接包含文本和图像：

<a href="http://example.com/user/profile">
    Joe Bloggs
    <img src="http://example.org/decorative-image.png">
</a>

是否有原因（HTML规范，辅助功能等）为什么链接不应同时包含文本和图像？我想知道在超链接之后输出图像会不会更好：

<a href="http://example.com/user/profile">
    Joe Bloggs
</a>
<img src="http://example.org/decorative-image.png">

就我而言，装饰图像只是一个绿色圆圈，表示用户现在在线。

Answer 1

将图像放在链接中更好，因为它更准确地表示装饰图像和链接之间的关系。

它还会增加点击目标的大小，这对有电机控制问题的用户有利。

话虽如此，您必须在图像标记中添加一个空（null）alt属性，以表明它对辅助技术具有装饰性。

<a href="http://example.com/user/profile">
    Joe Bloggs
    <img alt="" src="http://example.org/decorative-image.png">
</a>

另一种选择是

<a href="http://example.com/user/profile">
    Joe Bloggs
    <img src="http://example.org/decorative-image.png" role="presentation">
</a>

Answer 2

您可以在文本和图像周围包含链接标记。