停止屏幕 reader 读取 <a> 中的 href

Question

我的锚标签定义如下：

<a href="www.abc.com">
  <div tabindex="0" aria-label="XXXX"> 
   ...
  <div>
</a>

当前，屏幕reader读取<a>标签中href的内容。但是，我要的不是href里的内容，而是div里的aria-label里的内容。

我想知道实现目标的正确方法是什么？

Answer 1

从元素中删除 aria-label 或者您可以使用 aria-hidden="true"

<a href="" aria-hidden="true">Screen reader cannot read me</a>

要了解有关此检查的更多信息 here

Answer 2

将属性 aria-hidden=“true” 添加到 <a> 以对屏幕阅读器隐藏它。这也将隐藏其子元素，因此将 aria-hidden=“false” 添加到 <div> 以取消隐藏它。

Answer 3

您的

没有任何语义含义，因此 aria-label 基本上会被忽略。参见 https://www.w3.org/TR/using-aria/#label-support。具体来说，倒数第三个要点：

Don't use aria-label or aria-labelledby on a <span> or <div> unless its given a role.

您不想要 tabindex="0" 在不是 actionable/interactive.

的元素上

只需将您的 aria-label 放在锚点上即可：

<a href="www.abc.com" aria-label="XXXX">

请注意，如果您的锚点中有任何可见文本 link（示例代码中有“...”，所以我不确定那里是否有任何文本），请确保aria-label 包含相同的文本，以及您想要的任何其他文本。如果您不这样做，那么语音界面用户可能无法 select 您的 link.

Stop screen reader reading the href in <a>