停止屏幕阅读器阅读<a>

Question

I have anchor tag defined as below:

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

Currently, the screen reader reads the content of href in <a> tag. However, I don't want the href to be read, but the content in the aria-label in the div.

I would like to know what is the right way to achieve the goal?

Answer 1

您的

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

  

  除非给定角色，否则
• 请勿在或
  上使用aria-label或aria-labeledby。
  

您不不希望tabindex="0"用于不可操作/不可交互的元素。

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

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

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

答案 1 :(得分：-1)

从元素中删除aria-label，也可以使用aria-hidden="true"

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

要详细了解此支票here

答案 2 :(得分：-1)

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

Answer 2

从元素中删除aria-label，也可以使用aria-hidden="true"

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

要详细了解此支票here

Answer 3

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