HTML-Aria-label无法在锚标签上接受

Question

我正在尝试应用Aria-label，但在尝试为STQC验证时会出现错误。

2.4.4链接目的（上下文中） WAI-ARIA 'aria-label'属性应该描述它们所标记的链接，因为'aria-label'将覆盖其他链接文本。

这是我的示例代码。

<li>test1
  <a  href="/test/abc/0219/test.pdf" aria-label="-detail for abc" title="test"  target="_blank">-Click here</a>
</li>

- Code lover

---

你找到答案了吗？我在一个a标签上放了一个aria-label，但它在DOM中没有渲染出来。 - undefined

Answer 1

aria-label 可以与 a 元素一起使用。不确定您提到 STQC 是指什么，但您可以查看一个描述性的可与 aria-label 一起使用的元素列表。

- lucalanca

Answer 2

将 aria-label 移动到 li 标签内部

<li aria-label="-detail for abc"><a href="">click here</a></li>

- jzuhri

Answer 3

这是一个旨在帮助辅助技术（例如屏幕阅读器）为一个没有标签的HTML元素附加标签的属性。

aria-label的作用与此类似，但它适用于那些在屏幕上没有标签不切实际或不可取的情况。参考MDN example：

<button aria-label="Close" onclick="myDialog.close()">X</button>

大多数人可以通过视觉推断出这个按钮将关闭对话框。但是使用辅助技术的盲人可能只会听到“X”被朗读出来，没有视觉线索就无法理解其含义。aria-label明确告诉他们这个按钮将做什么。

- Ravi Chauhan

---

是的，我知道这一点。但问题是，我在aria-label中提供了描述性信息，但即使如此，它也无法通过验证。这就是我面临的问题。我不确定我是否可以忽略它，因为审计员会计算错误的数量，他不会对理解逻辑或检查我的代码感兴趣。我必须解决这种类型的错误，并且我有200多个这样的错误。 - undefined