html - 辅助功能:放置 tabindex=-1 以避免重复链接的更好位置？

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。从可访问性的 Angular 来看，哪种代码更好:

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

附言还有第三种方法:联合两个 <a></a><a></a>变成一个，例如 <a> picture + some description</a> ，但出于某些原因我会避免使用它。

附言描述文本“some description”对于图像描述和 anchor 标记中的文本都是相同的。

Answer 1

我没有看到使用相同 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 Technique H2: Combining adjacent image and text links for the same resource .

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