图像标题和替代文本的最佳实践以实现可访问性？答案

【问题标题】：Best practice for image title and alt text for accessibility?图像标题和替代文本的最佳实践以实现可访问性？
【发布时间】：2019-10-03 10:52:21
【问题描述】：

JAWS 说了两次描述：“返回 Google 的网站链接图形。Google 的 Test Lon 并冲回 Google 的网站”。

调查报告称，这似乎重复了两次，因为一次用于图像/图形链接，一次用于超链接的标题。

我想知道这种可访问性/残疾编码的最佳做法是什么，我是在以正确的方式做这件事，还是他们的最佳做法？请随时修改答案。

<div class="col-md-2">
<a href="https://www.google.co.uk/" title="Google’s Test Lon – Back to Google’s website">
<img src="/test.jpg" alt="Back to Google’s website">
</a>
</div>

【问题讨论】：

标签： html jaws-screen-reader web-accessibility

【解决方案1】：

做到这一点的最佳方法是在链接中添加文本，并通过给图片一个空的 alt 标签来“装饰”图片在大多数情况下 - 没有 100% 的解决方案适合所有用例强>

请注意 - 确保 alt 标签存在且为空，如图所示 alt="" - 有 alt 或根本没有 alt 标签可能会导致文件名被读出。

然后我们使用“视觉隐藏”类隐藏链接文本，确保文本仍然可以访问但不可见。

不要在链接上使用 title 属性（这也是一般规则），因为它往往会导致双重通知。

小提琴应该适用于所有屏幕阅读器，我上次测试时它适用于 JAWS、VoiceOver 和 NVDA（大约 90% 的屏幕阅读器）。

.visually-hidden { 
        position: absolute; 
        overflow: hidden; 
        clip: rect(0 0 0 0); 
        height: 1px; width: 1px; 
        margin: -1px; padding: 0; border: 0; 
    }

<div class="col-md-2">
  <a href="https://www.google.co.uk/">
    <img src="https://via.placeholder.com/150" alt="">
    <span class="visually-hidden">Google’s Test Lon – Back to Google’s website</span>
  </a>
</div>

【讨论】：