可访问用户链接内的图像

这个 alt 属性是必需的

请注意,根据 H30 technique WCAG的

当图像是链接的唯一内容时,图像的文本选项描述了链接的独特功能。

您可以使用 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 可用于明确小箭头的含义)。

这个 HTML standard 说:

必须为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参考。