Booleans in ARIA
First posted 9th May 2022 in Development; updated 11th May 2022
HTML doesn’t care about the value an attribute is given: if it exists it’s true, if it doesn’t it’s false. ARIA, on the other hand, does care.
False usually matters
aria-expanded allows values of
aria-expanded="true" returns true and
aria-expanded="false" returns false.
If this was HTML they’d both return true, but the difference with
aria-expanded is that the false value is significant: it might be telling the user that a button has a dropdown menu that’s currently closed.
This significance is because of ARIA’s utility nature. Running with
aria-expanded as an example, the closest thing in HTML is the
<details> element with its
openis present, the
<details>widget is open
openis not present, the
<details>widget is closed
open is closely tied with the
<details> element, which is either opened or closed.
aria-expanded is usually used on a generic element like
<button> that could have any purpose; not just showing and hiding content.
More than just a boolean
There are also situations where an ARIA attribute allows more than just
aria-checked, which can also accept
aria-invalid, which has
aria-current, which also allows
HTML doesn’t have this extra nuance.
Because ARIA attributes cares about their values, a boolean ARIA attribute doesn’t work at all unless it has a value. Even
aria-required, which is only really useful when it’s set to
true, and doesn’t have any extra values on top of
false, needs to be written out in full.