4

Can I do <div aria-hidden> instead of <div aria-hidden="true"> or should I always do <div aria-hidden="true">?

Lux
  • 17,835
  • 5
  • 43
  • 73

3 Answers3

4

The current version of spec indicates that "aria-hidden" is a state, and it could have three values:

false: The element is exposed to the accessibility API as if it was rendered.

true: The element is hidden from the accessibility API.

undefined (default): The element's hidden state is determined by the user agent based on whether it is rendered.

This means that when aria-hidden attribute is set on an element without an explicit true or false value, it will be considered hidden if it is not rendered.

Can I do <div aria-hidden> instead of <div aria-hidden="true"> or should I always do <div aria-hidden="true">?

<div aria-hidden> and <div aria-hidden="true"> are not equivalent, and you must set aria-hidden="true" if the element is visible on screen but you wish to hide it from the accessibility API.

Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
  • 2
    The default value is "undefined" https://www.w3.org/TR/wai-aria-1.1/#aria-hidden . I don't see in your answer an evidence for stating that an empty value would not replace the "true" value as for any boolean attributes. The right answer (see @Quentin) is that `aria-hidden` is not a boolean attribute but a state (as it can have 3 different values) – Adam Mar 10 '19 at 07:54
  • @Adam Thanks for pointing out. I was looking at an older version of the spec. I have updated the answer. – Nisarg Shah Mar 15 '19 at 06:52
3

It is not a boolean attribute. An explicit value must be provided.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    This is the correct answer. `aria-hidden` is a state and can have 3 values : true, false and "undefined". – Adam Mar 10 '19 at 07:49
1

You need to use aria-hidden="true" (or false, respectively).

A comment on aria-hidden="false", though: As far as I can tell, this doesn't have a useful effect. display:none; will still render content invisible for screen readers, even when aria-hidden is set to false, so it's NOT a way of dragging elements out of invisibility for screen readers.

Please note that using aria-hidden should be considered carefully: Depending on the browser used, unexpected effects can occur. As aria-hidden marks an element and all its child elements as hidden, but might not negate other attributes, you need to test your UIs thoroughly when using aria-hidden. For example, a child element might be focusable, but marked as hidden -- focus still moves to that element, but no accessibility information is rendered, because that element is supposed to be hidden.

TimB
  • 970
  • 8
  • 17