2

试图弄清楚为什么 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 上显示实际的帖子标题，对吗？

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

4

2 回答 2

4

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

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

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

但是，CSS 会影响这一点。如果您class="article-thumbnails-small__title"的第二个<div>有display:noneor 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>
于 2018-12-13T23:56:34.750 回答
1

aria-label链接上的属性（a具有href属性的元素）仅应在出于某种原因无法或不希望使用可感知的链接文本时使用。（这包括alt图像链接中的属性。）如果您有正常的链接文本，则不应使用该aria-label属性，因为该属性会覆盖链接文本。请参阅文档可访问名称和描述计算 1.1中文本替代计算的步骤 F ：元素具有允许从其内容（即链接文本和/或链接中的属性）计算其名称的固有角色. 但是，只有在没有aaltimgaria-label链接元素上的属性（参见步骤 C .

另见原则 2：ARIA 既能掩饰又能增强，在 WAI-ARIA 创作实践 1.1 中创造力量和危险，其中指出 ARIA 有时会覆盖原始语义或内容，并举aria-label了一个例子。

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

于 2018-12-14T11:27:45.320 回答