aria-label being read when it should not screen reader : WCAG

Question

The html structure looks like this

<div>
<a href="#"> some info
  <div role="button" tabindex ="0"
      aria-label = "close"
  />
</a>
</div>

When using screen reader the a tag get read "some info close" and then on focus on button it again read "close". All I want a tag to read is "some info" and button to read "close". What change should I make? I cannot change the HTML structure.

jsfiddle https://jsfiddle.net/5c1oywzg/1/

Answer 1

You can't have a focusable element inside another focusable element.

What change should I make? I cannot change the HTML structure.

Being given an HTML code, it's difficult to make a change without changing the code.

• you're using a a[href] link for what seems to be a button
• you have to separate the focusable elements

If you could have changed the HTML structure, this would be a better code:

<div>
  <button> some info</button>
  <button aria-label="close" />
</div>

Unfortunately, we can't change anything if you can't change the HTML structure as your structure is by nature malformed.

We can still use some hacks (using javascript for instance) like adding role=description and tabindex=-1 to the a[href] element and replace "some info" with an html button , but that would be against the second rule of ARIA :

Do not change native semantics, unless you really have to.

Answer 2

1.) The fiddle is different from the code you posted above. For my answer I used the fiddle code (and added a missing " for the href attribute...)

2.) The button is part of the link, so its content is read as part of the link. Do you really want the (same) link to work both when the button is clicked AND when "some info" is clicked. Looks like "some info" is supposed to be a label/comment for the link?

depending on what you want, I would either close the a tag before the button or only wrap the button into the a tag, labeling it wth the full text and hiding the text before that with aria-hidden = "true" :

<div>
  <a href="#">
    some info
  </a>
  <button aria-label = "close">close</button>      
</div>

OR

<div>
  <span aria-hidden="true">some info</span>
  <a href="#">
    <button aria-label = "some info, close">close</button>
  </a>
</div>

Answer 3

If you can only add attributes and not change the HTML structure at all you could do this:

<div>
  <a href="#" tabindex="-1">
    <div tabindex="0">some info</div>
    <button>
      close
    </button>
  </a>
</div>

Setting tabindex to -1 removes an element from the tab order while setting it to 0 adds an item. Generally on other values should be used. More info here .

Removing the a tag from the tab order and adding the div in instead will make the keyboard skip over the a tag and focus on both the div and button tags separately.

🎻 Fiddle