html - 可访问用户的链接内的图像

Question

假设我想制作一个可点击的图像(比如网站 Logo 或其他)，如下所示:

<a href="theblablasite.com"><img src="logo_or_whatever.png"></a>

如果我想让它可以访问，我应该使用 aria-label链接以及 alt用于图像或仅 aria-label ?

此外，关于是否一起使用 title 和 alt 有很多意见，什么是正确的方法，为什么？

Answer 1

HTML standard说:

The alt attribute must be specified for the IMG

此外，我在生产中经常看到的是为视觉用户提供了一个用 CSS 隐藏但屏幕阅读器会大声朗读的辅助文本元素。更多信息在这里 https://www.w3.org/TR/WCAG20-TECHS/C7.html

因此，在您的示例中，您可能会这样做:

<a href="theblablasite.com"><img src="logo_or_whatever.png" alt="Relevant info here"><span class="assitive-text">Relevant info here...</span></a>

.assistive-text { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }

该 CSS 来自上述 W3 引用。