Question

试图弄清楚为什么灯塔审计将我的许多链接标记为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可能会影响这一点。如果第二个class="article-thumbnails-small__title"上的<div>具有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属性（具有a属性的href元素）。（这包括图像链接中的alt属性。）如果您具有普通的链接文本，则不应使用aria-label属性，因为该属性将覆盖链接文本。请参阅文档“ step F”中的text alternative computation（可访问名称和描述计算1.1）：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。

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

2 个答案: