1

I read in some posts(post1 and post2) that aria-hidden="true" hides the element from all user agents.

aria-hidden (state): Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.

  • Does aria-hidden="true" hides the element from all user agents or only screen-readers?
  • If yes, then in bootstrap why is the glyphicon inside the carousel-control icon visible even with the attribute aria-hedden="true"?
Community
  • 1
  • 1
user31782
  • 7,087
  • 14
  • 68
  • 143

1 Answers1

2

Even though the official documentation states that element and all of its descendants are not visible, elements with aria-hidden="true" tags are indeed visible in all modern browsers.

But elements with this tag will be invisible to accessibility tools, such as screen readers.

Example: https://jsfiddle.net/92s2q861/

Further, using visibility: hidden; o̶r̶ ̶̶d̶i̶s̶p̶l̶a̶y̶:̶ ̶n̶o̶n̶e̶̶ CSS attributes will hide the element from he user when the DOM is rendered in the browser. But witout aria-hidden="true" tag, that element will be detected by the accessibility tools.

UPDATE: display: none will hide the element when DOM is rendered in browser and the element will be ignored by the accessibility tools as well.

T J
  • 42,762
  • 13
  • 83
  • 138
Sajith Edirisinghe
  • 1,707
  • 1
  • 12
  • 18
  • Are you sure that elements with `display:none` will be detected by screen readers(accessibility tools)? `display: none` diminishes the element from the document flow. And css tricks says something else https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ – user31782 May 07 '16 at 07:15
  • Yes you are right. Sorry abut the confusion. I have updated the answer. `display: none` hides the element from the screen readers as well. Tested it withe default screen reader in Ubuntu. – Sajith Edirisinghe May 07 '16 at 07:34
  • How did you type that weird deleted display none? – T J May 07 '16 at 08:21
  • 1
    The benevolent Unicode deity has blessed us with s̶t̶r̶i̶k̶e̶t̶h̶r̶o̶u̶g̶h̶ characters. (http://adamvarga.com/strike/) – Sajith Edirisinghe May 07 '16 at 08:32