基本（所有）链接标签是否需要 aria-label？

Question

试图弄清楚为什么 Lighthouse 审核将我的一堆链接标记为未通过 elements have discernible names

<h3>
  <a href="https://..." class="custom classes here">My New Post Title</a>
</h3>

我的问题是所有链接都需要aria-labels，因为我认为如果它只是一个普通链接，那么链接内的文本是必需的吗？

或者我的标记结构还有其他问题吗？另一个标记的元素是这个：

<a class="custom classes" href="https://...">
  <div class="custom classes" style="background-image: url('https://...');"></div>
  <div class="article-thumbnails-small__title">Post Title</div>
</a>

我知道a 没有文字，所以aria-label 应该在带有实际帖子标题的div 上，对吗？

已解决 我看错了元素……祝你有美好的一天。

Answer 1

你的两个例子都很好，不应该被标记。一定有别的事情发生。您发布的代码是否与正在测试的代码完全一致？

ARIA 属性应谨慎使用，并且仅在本机标记不足时使用。对于链接，如您所说，如果<a>...</a> 之间有任何文本，那么这就是“可识别文本”。

如果链接没有任何直接文本，但如果子元素有，那么您也可以，例如您的第二个示例。 <a> 没有文字，但第二个 <div> 有“帖子标题”。查找“可识别文本”时会考虑<a> 的所有子元素。当我 tab 到该链接时，我会从屏幕阅读器中听到“帖子标题，链接”。

但是，CSS 会影响这一点。如果您在第二个<div> 上的class="article-thumbnails-small__title" 有display:none 或visibility:hidden，那么该文本将不可识别，因为它是隐藏的。

如果类有width/height:0px，那么它可能也无法识别。有时 0 大小的元素被认为是隐藏的。

如果你的链接没有文字但有嵌套的<img>，只要图片有alt文字，就可以了。

好：

<a href="foo.html">
  <img src="foo.jpg" alt="foo">
</a>

没有可辨认的文字：

<a href="foo.html">
  <img src="foo.jpg">
</a>

Answer 2

链接上的aria-label 属性（带有href 属性的a 元素）只应在出于某种原因无法或不希望使用可感知的链接文本时使用。 （这包括图片链接中的alt 属性。）如果您有正常的链接文本，则不应使用aria-label 属性，因为该属性会覆盖链接文本。请参阅文档 Accessible Name and Description Computation 1.1 中的text alternative computation 的step F：a 元素具有允许从其内容（即链接文本和/或alt）计算其名称的固有角色链接中img 的属性）。但是，只有在链接元素上没有aria-label 属性 时才会执行此步骤（请参阅step C。

另请参阅 WAI-ARIA 创作实践 1.1 中的 Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger，其中指出 ARIA 有时会覆盖原始语义或内容，并以 aria-label 为例。

因此，如果 Lighthouse 用可感知的链接文本标记链接且没有 aria-label 属性，则肯定有其他原因，例如隐藏元素的 CSS。