如何在锚标记中创建图像？

Question

假设我的图像如下图所示。

据WCAG称，这个图像很实用，因为它将用户链接到另一个页面。 好像我应该把链接的目的地放在alt属性中，如alt="comic homepage" 。

有视力障碍的人也不想知道图像显示的是什么吗？ 该用户是否会喜欢alt="comic that links to the cloudtweaks homepage" ？ 漫画似乎不是纯粹的装饰。

<a href="http:////cloudtweaks.com">
  <img src="comic.png" alt=??? />
</a>

此页面执行类似操作（在页面底部附近滚动）。

Answer 1

您已经问过这个问题但没有提供足够的背景信息。 查看周围的内容，整个页面或整个网站都会有所帮助。

• 是否有周围的文字解释图像或链接的位置？

• 图像是否会在链接后显示在页面上，也许是图像的更完整版本（如果图像是其中之一，则所有面板都是如此）？

• 该网站的行为是否与您确信用户熟悉的本网站的其他网站或部分相似？

屏幕阅读器将宣布它是一个链接，它是一个图像，然后它将宣布图像alt文本。 如果您认为没有必要在图像外部提供一些文本来向用户显示，那么您可能不需要尝试将其强制转换为alt文本或强制转换为title属性（另外， 不要使用title属性 ）。

基本上，您希望为有视力和无视力和低视力的用户提供相同的体验。 如果您认为有必要通过使用alt来管理链接所在位置的期望，那么您应该在链接周围或链接集合之前提供链接。 然后它可以帮助所有用户。 如果您认为不需要管理用户的期望，那么请不要通过在屏幕阅读器上插入额外的文本来强制它在无视用户身上。

Answer 2

这种情况记录在WC3网站上： 图像单独用作链接徽标

WCAG说你不应该在这种情况下描述图像文本而是链接功能。

当图像是链接的唯一内容时，图像的文本替代描述了链接的唯一功能。

如果您认为应该向屏幕阅读器用户描述图像中的文本，则必须更改HTML的结构，例如，不包括链接中的图像。

<a href="comics.html">Comics</a>
Image of the day:
   <img src="..." alt="If the clouds ever did go down would it be called fog?" />

或者在之后添加描述（请注意，使用aria-describedby的描述可能会被隐藏）

<a href="comics.html" aria-describedby="desc"><img src="..." alt="Comics" /></a>
<div id="desc" style="display:none">If the clouds ever did go down would it be called fog</div>

但这可能是非常令人不安的，我会说......