CODEWITHSUNDEEP
htmlhyperlinkwai-ariascreen-readers
bunny
bunny

Reputation: 2027

Stop screen reader reading the href in <a>

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?

Upvotes: 2

Views: 2915

Answers (3)

slugolicious
slugolicious

Reputation: 17435

Your <div> does not have any semantic meaning so the aria-label will essentially be ignored. See https://www.w3.org/TR/using-aria/#label-support. Specifically, the third last bullet point:

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

You do not want tabindex="0" on an element that is not actionable/interactive.

Just put your aria-label on the anchor itself:

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

Note that if there is any visible text in your anchor link (you have "..." in you sample code so I wasn't sure if there was any text there), make sure the aria-label contains that same text, plus any additional text that you want. If you don't, then speech interface users may not be able to select your link.

Upvotes: 4

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

remove aria-label from the elements or you can use aria-hidden="true"

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

To know more about this check here

Upvotes: 0

JasonR
JasonR

Reputation: 401

Add the attribute aria-hidden=“true” to the <a> to hide it from screen readers. That will hide its child elements as well, so add aria-hidden=“false” to the <div> to un-hide it.

Upvotes: -1

Related Questions