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

Question

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

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

如果我想让它可以访问，我应该使用aria-label链接和alt图像还是只使用aria-label？

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

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

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>

如果您要提供视觉信息，该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可用于明确表示小箭头）。