辅助功能：放置 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>

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

我的解决方案是为 link 之一设置 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。描述文本 "some description" 与图像描述和锚标记中的文本相同。

Answer 1

我会同时保留它们，因为如果使用屏幕 reader 的人在您的网站上使用 tab 键，您希望他们听到图像描述以及锚标记中的文本。

正确答案是 - 视情况而定。

如果您的图片更好地描述了您的 link，请使用该图片。

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

tabindex

的一些信息

请查看您可以添加到 link here

中的所有辅助功能

Answer 2

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

删除图片 link,
摆脱文字 link,
将图像和文本组合成一个单个link，其中图像有一个空alt 属性:

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

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

请注意，使用两个相邻的 links，都具有 href 属性，其中一个具有 tabindex=-1，如问题中所建议的，将导致两个 link 被列在屏幕 reader 的 link 列表中。应该避免这种重复。

Answer 3

在我看来，假设您的替代描述应该等于您的 link 文本是一种误入歧途的方法。

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

如果 link 转到产品详细信息页面，则 link 文本应描述该详细信息页面。但是，图片 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 4

tabindex 只改变了键盘顺序，但屏幕 reader 仍然会宣布相同的 link 两次。

使用 javascript 使 img 可点击将避免烦人的键盘用户或屏幕reader 用户，让鼠标用户点击图像本身。

Answer 5

从纯粹的WCAG accessibility point of view, nothing has to change in the original code. That fact that WAVE 指出它只是那个工具的神器。这不是错误，而是 "alert"（以 WAVE 术语来说）。 WAVE 的文档是关于 "alerts":

The goal should not be to get rid of all icons, except for the errors. Alerts will require close scrutiny - the[y] likely represent an end user issue.

关键是警报是 "end user" 问题，这意味着可用性或用户体验问题。不是辅助功能故障。

因此，如果您试图遵守 WCAG AA，那么冗余 link 并不是失败，也不必修复。但是，如果您关注用户体验，减少制表位和指向同一目的地的 link 的数量总是一件好事。

你如何解决这个问题似乎是 OP 的症结所在。当相邻的两个link指向同一个位置时，最好的办法是将link合二为一。添加 tabindex="-1" 通常不是一个好主意，因为这只会影响键盘用户而不影响屏幕 reader 用户。

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

Accessibility: better place to place tabindex=-1 to avoid duplicate links?

html

css

accessibility

tabindex

jaws-screen-reader