1

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

1 回答 1

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>

于 2019-10-03T13:48:45.493 回答