8

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
PhoneixS
  • 10,574
  • 6
  • 57
  • 73

1 Answers1

15

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • would it be better in this case to use a "sr-only" sibling span with the required information, as suggested here https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility#web-fonts-semantic – gaurav5430 Jul 09 '19 at 07:02
  • 1
    or as suggested here, https://stackoverflow.com/questions/56946956/icon-font-accessibility-parent-span-with-aria-label-or-sibling-span-with-sr-onl, when i answered your related question. but "sr-only" is not what this question was about. – slugolicious Jul 09 '19 at 18:22
  • Thanks. Yeah I found this while I was looking for an answer to my other question. – gaurav5430 Jul 10 '19 at 13:43