Question

此问题与辅助功能有关。

这是我的代码：

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

P.S。第三种方法是：将两个<a></a><a></a>合并为一个<a> picture + some description</a>之类的文件，但出于某些原因，我会避免使用它。

P.P.S。对于图像描述和锚标记中的文本，描述文本“某些描述”是相同的。

Answer 1

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

摆脱图片链接，
摆脱文字链接，
将图像和文本合并到单个链接，其中图像具有空的alt属性：

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

在第三种情况下，alt属性应该为空，以避免文本重复（屏幕阅读器用户不想两次听到链接文本）。这也会导致不依赖tabindex="-1"的简单代码。另请参见WCAG Technique H2: Combining adjacent image and text links for the same resource。

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

Answer 2

我认为，假设您的替代描述应与链接文字相同，这是一种误导的方法。

假设您正在为在线商店设计产品列表页面。

如果链接转到产品详细信息页面，则链接文本应描述该详细信息页面。但是，图片alt应该描述图片本身，而不是详细信息页面。

.link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<a class="link" href="https://www.mywebsite.org/detail-page-100">
  <img class="link-img" src="https://picsum.photos/200" alt="2 puppies running through a meadow in the summer sun">
  <span class="link-desc">Buy organic pet food - 5kg</span>
</a>

Answer 3

tabindex仅更改键盘顺序，但是屏幕阅读器仍将两次声明相同的链接。

使用javascript使img可点击可避免烦人的键盘用户或屏幕阅读器用户，而使鼠标用户点击图像本身。

Answer 4

从纯粹的WCAG可访问性的角度来看，没有任何必须更改原始代码。 WAVE指出的事实仅仅是该工具的产物。这不是错误，而是“警报”（以WAVE术语）。 WAVE的文档说明了有关“警报”的信息：

除错误外，目标不应该是摆脱所有图标。警报需要仔细检查-[y]可能表示最终用户问题。

关键在于警报是“最终用户”问题，这意味着可用性或用户体验问题。不是可访问性失败。

因此，如果您要遵守WCAG AA，则具有冗余链接不是故障，并且不必进行修复。但是，如果您正在考虑用户体验，那么减少制表位和指向相同目的地的链接的数量总是一件好事。

如何解决问题似乎是OP的症结所在。当两个相邻的链接指向同一位置时，最好的方法是将这些链接合并为一个。将tabindex="-1"加到一个通常是个坏主意，因为这只会影响键盘用户，而不会影响屏幕阅读器用户。

Answer 5

我会同时保留它们，因为如果使用屏幕阅读器的人浏览您的网站，您希望他们听到图像描述以及锚标签中的文本。

正确的答案是-这取决于。

如果您的图片可以更好地描述您的链接，请使用图片。

如果您的锚标记能更好地描述它-请使用<a>。

tabindex的一些信息

请查看您可以添加到链接here

的所有辅助功能。

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

5 个答案: