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

Question

假设我想制作一个可点击的图像（比如站点徽标或其他），如下所示：

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

如果我想让它可访问，我应该将aria-label链接与alt图像一起使用还是仅使用aria-label？

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

Answer 1

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

title如果您有视觉信息要提供，该属性可用于为鼠标用户提供工具提示。

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

请注意，由于此信息无法由仅使用键盘的用户访问，不使用任何辅助技术，因此只有在补充任何其他视觉提示时才能使用它（在本例中，标题attribute可用于明确小箭头）。

Answer 2

在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 参考。