基本（全部）link 标签是否需要 aria-label？

Question

试图找出为什么 Lighthouse 审计将我的一堆 link 标记为未通过 elements have discernible names

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

我的问题是所有 link 都需要 aria-labels 因为我认为如果它只是一个普通的 link link 中的文本是必需的吗？

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

<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 并使用实际的 post 标题，对吗？

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

Answer 1

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

ARIA 属性应谨慎使用，并且仅在本机标记不足时使用。对于 links，如您所说，如果 <a>...</a> 之间有任何文本，则为 "discernible text"。

如果 link 没有任何直接文本，但如果子元素有，那么你也可以，比如你的第二个例子。 <a> 没有文本，但第二个 <div> 有 "Post Title"。查找 "discernible text" 时会考虑 <a> 的所有子元素。当我 tab 到那个 link 时，我会从屏幕 reader.

听到 "Post Title, link"

但是，CSS 会对此产生影响。如果第二个 <div> 上的 class="article-thumbnails-small__title" 有一个 display:none 或 visibility:hidden，那么该文本将不会可辨认，因为它是隐藏的。

如果class有width/height:0px，那么可能也看不出来。有时 0 大小的元素被认为是隐藏的。

如果您的 link 没有文字但有嵌套的 <img>，只要图像有 alt 文字，就可以了。

好:

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

没有可识别的文本：

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

Answer 2

links 上的 aria-label 属性（具有 href 属性的 a 元素）仅应在出于任何原因不可能或不希望使用可感知的 link 文本。（这包括图像 link 中的 alt 属性。）如果您有正常的 link 文本，您 不应该 使用 aria-label 属性，因为该属性会覆盖 link 文本。参见 step F of the text alternative computation in the document Accessible Name and Description Computation 1.1: the a element has an inherent role that allows the computation of its name from its content (i.e. the link text and/or the alt attribute on an img in the link). However, this step is only followed if there is no aria-label attribute on the link element (see step C。

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

因此，如果 Lighthouse 标记 link 具有可感知的 link 文本且没有 aria-label 属性，则必须有其他原因，例如隐藏元素的 CSS .

基本（全部）link 标签是否需要 aria-label？

Is an aria-label needed for basic (all) link tags?

html

lighthouse

wai-aria