代码之家 › 专栏 › 技术社区 › Haradzieniec

可访问性:更好地放置tabindex=-1以避免重复链接?

jaws-screen-reader tabindex accessibility css html

Haradzieniec · 技术社区 · 5 年前

这是我的密码:

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

换言之,这里的问题是您使用了th 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>

还有第三种方法:联合两个 <a></a><a></a> 变成这样的一个 <a> picture + some description</a> ,但出于某些原因,我会避免这样做。

P.P.S.描述文本“some description”对于图像描述和锚定标记中的文本都是相等的。

5 回复 | 直到 5 年前

Tsundoku 5 年前

去掉图像链接,
去掉文本链接,
,其中图像具有 空的 alt 属性 :

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

在第三种情况下 中高音 属性应为空,以避免文本重复(屏幕阅读器用户不希望听到链接文本两次)。这也会导致更简单的代码不依赖于 tabindex="-1" . 另见 WCAG Technique H2: Combining adjacent image and text links for the same resource

请注意,使用两个相邻的链接,都具有 href tabindex=-1 ,将导致两个链接都列在屏幕阅读器的链接列表中。应避免这种重复。

ksav 5 年前

在我看来,假设你的alt描述应该等于你的链接文本是一种误导的方法。

如果链接指向产品详细信息页面,则链接文本应描述该详细信息页面。但是,image 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>

Adam 5 年前

这个 tabindex

制造 img 使用javascript的clickable将避免烦人的键盘用户或屏幕阅读器用户,让鼠标用户点击图像本身。

slugolicious 5 年前

从一个纯粹的 WCAG 从可及性的角度来看, 必须更改原始代码。事实上 WAVE 指出它只是该工具的一个产物。这不是一个错误,而是一个“警报”(用波浪术语)。WAVE的文档中提到了“警报”:

全部的 图标,错误除外。警报需要仔细检查,[y]可能代表 .

关键在于警报是“最终用户”问题,即可用性或用户体验问题。不是可访问性故障。

因此,如果您试图遵守WCAG AA,那么拥有冗余链路不是故障,也不必修复。但是如果你考虑用户体验,减少指向同一目的地的制表位和链接的数量总是一件好事。

怎么解决这个问题似乎是OP的关键。当两个相邻的链接指向同一位置时,最好的方法是将链接合并为一个。添加 tabindex="-1" 对一个用户来说通常是个坏主意,因为这只会影响键盘用户,而不会影响屏幕阅读器用户。

Daut Åukasz BlaszyÅski 5 年前

我会把它们都保留下来,因为如果一个人使用屏幕阅读器在你的网站上点击,你会希望他们听到图像描述以及锚定标签中的文本。

正确的答案是——视情况而定。

如果您的图像更好地描述了您的链接,那么请使用该图像。

如果您的锚定标记更好地描述了它,那么使用 <a> .

一些信息 tabindex

请查看您可以添加到链接的所有辅助功能 here