Can I use aria-label and aria-hidden="true" on the same element?

Question

Can I use aria-label and aria-hidden="true" on the same element?

What I want to achieve is to have an element (an open icon in a <span>) with an aria-label but ignore its contents.

<span class="oi" data-glyph="star" aria-label="Favourite" aria-hidden="true"></span>

Is correct this use or there is a conflict between aria-hidden trying to ignore the element and aria-label trying to give it meaning?

Answer 1

aria-hidden will hide the element completely to assistive technology, such as screen readers and braille devices. The element will not be in the accessibility tree (kind of like the DOM tree) so a screen reader user will not know the element is there. The aria-label will be ignored because it's hidden.

If you want to ignore the contents of an element, then it would be the nested element that you put aria-hidden on.

<span aria-label="Favourite">
  ...
  <span aria-hidden="true">you can't see me</span>
  ...
</span>

However, even that example isn't quite right because it has an aria-label on an element that has no semantic meaning. Many screen readers will ignore the aria-label (it won't be read) if the html tag you're using doesn't have any semantic meaning unless you also specify a role.

A <span> doesn't mean anything to a screen reader. Semantic tags such as <h1>, <li>, <table>, <section>, <header>, <footer>, etc all have meaning to a screen reader. Those tags will be announced as a heading or a list or a table or a region, etc. A <span> isn't announced as anything. If the screen reader is walking through the accessibility tree using the up/down arrow keys, if the <span> contains text, the text will be read but that's it.