时间戳

首页 > 解决方案 > 可访问性：放置 tabindex=-1 以避免重复链接的更好位置？

html - 可访问性：放置 tabindex=-1 以避免重复链接的更好位置？

问题描述

这个问题是关于可访问性的。

这是我的代码：

<a href="https://example.com/url-to-details">
    <img src="https://example.com/item.png" alt="some description">
</a>
<a href="https://example.com/url-to-details">some description</a>

这并不完美，因为我们知道我们应该避免相邻链接转到相同的 URL（这是 WAVE 辅助工具在我的网页上对我说的关于这段代码的内容）。换句话说，这里的问题是您因此使用了 Tab 键并且仍然出现在同一个链接上。这并不完美。

我的解决方案是为其中一个链接设置tabindex="-1"。

所以，我的问题是：

1.这是一个好主意，还是你有更好的方法？

2. 从可访问性的角度来看，哪个代码更好：

<a href="https://example.com/url-to-details" tabindex="-1">
    <img src="https://example.com/item.png" alt="some description">
</a>
<a href="https://example.com/url-to-details">some description</a>

或者

<a href="https://example.com/url-to-details">
    <img src="https://example.com/item.png" alt="some description">
</a>
<a href="https://example.com/url-to-details" tabindex="-1">some description</a>

PS有第三种方法：将两个合二为一<a></a><a></a>，例如<a> picture + some description</a>，但由于某些原因我会避免它。

PPS 描述文本“一些描述”对于图像描述和锚标记中的文本都是相同的。

标签： htmlcssaccessibilitytabindexjaws-screen-reader

解决方案

我没有看到同时具有使用相同 URL 的图像链接和相邻文本链接的用例。它应该是单个链接，因此您有三个选项：

  1. 摆脱图片链接，
  2. 摆脱文本链接，

  3. 将图像和文本组合成一个链接，其中图像具有空alt属性：

    <a href="https://example.com/url-to-details"><img src="https://example.com/item.png" alt=""> some description</a>

在第三种情况下，该alt属性应为空以避免重复文本（屏幕阅读器用户不希望听到两次链接文本）。这也导致更简单的代码不依赖于tabindex="-1". 另请参阅WCAG 技术 H2：为同一资源组合相邻的图像和文本链接。

请注意，使用两个相邻的链接，两者都具有href属性，其中一个具有tabindex=-1，如问题中所建议的那样，将导致两个链接都列在屏幕阅读器的链接列表中。应该避免这种重复。

推荐阅读