如何使锚标记内的图像可访问?

How do I make an image within an anchor tag accessible?

假设我有一张如下图所示的图片。

根据 WCAG 的说法,此图像是有效的,因为它 link 将用户引导至另一个页面。似乎我应该将 link 的目的地放在 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 做类似的事情(滚动到页面底部附近)。

你问过这个问题,但没有提供足够的上下文。查看周围的内容、整个页面或整个站点会有帮助。

  • 周围是否有解释图像或 link 去向的文字?

  • 该图像是否会出现在 link 之后的页面上,也许是该图像的更完整版本(例如,如果该图像是众多图像之一,则显示所有面板)?

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

屏幕reader 将宣布它是一个link,它是一个图像,然后它将宣布图像alt 文本。如果您觉得没有必要在图像之外提供一些文本来向用户展示,那么您可能不需要尝试将其强行放入 alt 文本或 title 属性(另外, do not use a title attribute).

基本上,您希望为视力正常的用户以及 non-sighted 和 low-sighted 用户提供相同的体验。如果您觉得有必要通过使用 alt 来管理对 link 去向的期望,那么您应该只在 link 前后或 link 集合之前提供它。然后它可以帮助所有用户。如果您认为您不需要管理用户的期望,那么不要通过在 readers.readers.

屏幕上塞满额外的文本来强加给 non-sighted 用户。

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

WCAG says在这种情况下你不应该描述图片文字而是link功能。

When an image is the only content of a link, the text alternative for the image describes the unique function of the link.

如果您认为应该向屏幕阅读器用户描述图像中的文本,则必须更改 HTML 的结构,例如从 link 中排除图像。

<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>

但这可能会让人非常不安,我会说...