链接内嵌图像以供辅助功能用户使用

Question

假设我想制作一个可点击的图片（比如站点徽标或其他内容），像这样：

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

如果我想使其可访问，我应该在链接中同时使用 aria-label 和图片中的 alt ，还是只使用 aria-label？

此外，有很多关于是否同时使用 title 和 alt 的观点，什么是正确的方法以及为什么？

- franenos

---

HTML5中的alt文本建议可能会有所帮助 https://w3c.github.io/html/semantics.html#a-link-or-button-containing-nothing-but-an-image - Steve Faulkner

Answer 1

HTML标准指出：

IMG必须指定alt属性

此外，我经常在生产中看到提供辅助文本元素，该元素使用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 参考文献。

- unpollo

---

是的，谢谢。刚刚发现这个。也许有些人会觉得这很有用：如果作者从链接图像中省略了替代文本，则它将无法满足成功标准1.1.1，因为文本替代品不能像图形链接一样发挥相同的作用。来源: https://www.w3.org/TR/WCAG20-TECHS/H2.html - franenos

我同意这个解决方案，但我也想指出，通常作为链接的图像应该在alt标签中指定：链接到“The Blab Site.com”。如今，徽标通常链接到主页，因此在这种情况下，alt应该是：“链接到某个网站主页”。 - Gcamara14

Answer 2

alt属性是强制性的。

请注意，根据WCAG的H30技术，当图像是链接的唯一内容时，图像的文本替代描述链接的唯一功能。

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

您可以使用aria-label为辅助技术提供特定的替代文本。

例如：

 <a href="http://theblablasite.com/" target="_blank"
     aria-label="Visit The Blabla Site Dot Com (opens in a new window)">
       <img src="logo_or_whatever.png" alt="The Blabla site" /></a>

< p >如果您有视觉信息要传达，title属性可用于为鼠标用户提供提示。 < /p >

 <a href="http://theblablasite.com/" target="_blank"
     title="opens in a new window"
     aria-label="Visit The Blabla Site Dot Com (opens in a new window)">
       <img src="logo_or_whatever.png" alt="The Blabla site" />
       <i class="arrow"></i>
 </a>

请注意，由于这些信息对于仅使用键盘而不使用任何辅助技术的用户不可访问，因此它只能用作其他视觉提示的补充（在此示例中，标题属性可用于明确表示小箭头的含义）。

- Adam

---

请注意：除非在非常特殊的情况下，否则需要使用alt属性。请参阅https://w3c.github.io/html/semantics.html#when-a-text-alternative-is-not-available-at-the-time-of-publication。 - Steve Faulkner

感谢您的留言，@SteveFaulkner。我必须承认，我完全忽略了“在发布时没有文本替代品”的情况，但我向您保证不会告诉任何人。这将成为人们省略alt属性的第一个理由，“直到以后”;-) - Adam

指定链接上的aria标签和图像上的alt是否仍然建议？只需要其中一个不就可以了吗？（如果父元素有aria标签，则图像上的alt为空） - gaurav5430

@gaurav5430 这仍然取决于您的需求。alt是任何人的图像替代方案，而aria-label是辅助技术的替代方案。两者具有相同的替代方案是无用的。 - Adam