link 内的图片供可访问的用户使用

Question

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

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

如果我想让它易于访问，我应该将 aria-label 用于 link，同时将 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参考

Answer 2

alt 属性是必需的

注意根据WCAG的H30 technique

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

您可以使用 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可以用来明确小箭头的意思）。

link 内的图片供可访问的用户使用

image inside a link for accessible users

html

accessibility

wcag

wai-aria

wcag2.0