如何使锚标记中的图像可访问？

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>

This page做了类似的事情（在页面底部滚动）。

Answer 1

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

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

• 图片会在链接后显示在页面上，也许是图片的更完整版本（如果图片是众多图片中的所有图片，则会显示所有面板）？

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

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

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

Answer 2

这种情况记录在WC3网站上：Image used alone as a linked logo

在这种情况下您不应该描述图像文本的WCAG says，而是链接功能。

  

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

如果您认为应该向屏幕阅读器用户描述图像中的文本，则必须更改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>

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