Boolean attributes in HTML and ARIA: what's the difference?

Published 2022-01-12 category: code

Some attributes in ARIA are boolean(-like). These attributes may seem a lot like boolean attributes in HTML, but there are some important differences to be aware of.

black and white drawing of man in suit George Boole, the philosopher and mathematician who came up with a type of algebra that has just true and false as its variables

Boolean attributes in HTML

In HTML, some attributes are boolean attributes, which basically means they can be true or false. They are the case, or they are not the case. They compute to one, or they compute to zero. Examples of these attributes include checked, required, disabled and open.

Boolean attributes in HTML are true when they are present:

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

(From: HTML, Common microsyntaxes, Boolean attributes)

So, if a checkbox is checked, it has the checked attribute, otherwise it does not. The attribute, when present, can have any value, like checked="checked", though the HTML spec explicitly says we should not use true or false as attribute values for boolean attributes:

The values “true” and “false” are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

It would work though: the checked attribute works with any value, even checked="true" or checked="false" represents that the input is checked:

<!--  
  on first render, the following 
  checkboxes are in checked state 
-->
<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="hello" />

 <!--  
  on first render, the following 
  checkboxes are not in checked state 
-->
<input type="checkbox" />

In some cases, browsers will help us manage the presence of these attributes. They don’t for checked, but they do for details/summary (the open attribute on the details element when its summary is expanded or collapsed). In other cases, the browser can’t manage presence or absence, like for the required attribute. Whether an element is set to required, is up to the author’s intention, the browser defaults to “not required”.

The attributes I discussed earlier are what specifications call ‘content attributes’, we write them in our markup. In JavaScript, we can also affect the truth value of these HTML attributes with so-called IDL attributes, for instance:

element.checked = true; // sets checked state to true
element.checked = 'checked'; // sets checked state to true
element.checked = 'foo'; // also sets checked state to true
element.checked = false; // sets checked state to false
element.checked = ''; // sets checked state to false

Boolean attributes in ARIA

In ARIA, there are also attributes that can be true or false, but their state is expressed differently. It is a different language than HTML, after all. HTML is the most common host for it, but ARIA can also be used in other languages, like XML and SVG.

As explained previously, HTML has the concept of boolean attributes. It also has the concept of keyword and enumerated attributes. These attributes can come with a fixed number of string values. When ARIA is used in HTML, we use these types of attributes. This means that when we say “boolean” in ARIA, we’re really talking about strings that happen to be use the words “true” or “false”.

According to the type mapping table in the WAI-ARIA 1.1 specification, there are three different attribute types in ARIA that explictly list ”true” and “false” as possible values:

That’s not all, as there are also properties with different and larger sets of possible values:

All of these fall into that “keyword and enumerated attributes” bracket, they take a nullable DOMString.

ARIA attributes can be set using setAttribute(). From ARIA 1.2, which is currently a “Candidate Recommendation Draft” (it’s like a Candidate Recommendation, but with significant updates made to it), ARIA attributes can be specified using IDL attributes, too, for instance:

element.ariaChecked = "true"; // sets `aria-checked` to true

Scott O’Hara wrote about this upcoming feature in his post New in ARIA 1.2: ARIA IDL attributes.

HTML vs ARIA booleans

So, for HTML boolean attributes it’s all about presence and absence, while in ARIA boolean attributes, the boolean state is expressed via "true" and "false" string values and there are bunch of attributes that take those strings and a couple more.

Some examples of these differences:

Summary

So, there are boolean attributes and keyword and enumerated attributes in HTML. When ARIA booleans are used in HTML, they are of the latter type. They take one of two keywords: "true" or "false". There are also ARIA attributes that take "true" and "false", but also other keywords in addition. Those may look like booleans at first sight, but are not. That’s all, thanks for reading!

Thanks Eric Bailey, Scott O’Hara, Eric Eggert, David Luhr and Erik Kroes for their valuable feedback on earlier versions of this post.

Comments, likes & shares (92)

Michael Hastrich, Michael Scharnagl, MaudStiernet, Erik Kroes 🏔, Gijs Veyfeyken, Steve Lee, Robert Spier, Westbrook, Joe Lanman, Marcus Herrmann, Ibe, Adam Daam, Stéphanie Vachon, raf/ 🏳️‍🌈, Demon Newman, Martín Di Luzio, myf, Eyal Eshet, 🌸 oscar 🌸, Manaia Junior ⚡️, David Luhr, Crux Conception, M. Psych, — mel, Birkir Gunnarsson, ryan brilliant, Passle, xirclebox 💻 Speaking about A11y @ #codeMash, Tanner Dolby, 🛸, Marc Görtz, Olivier B-G. ☃, Francis, Matthias Weston, weare, Nikolay Cholakov🙏4❤, 💧Lynda Creedy, Søren Birkemeyer and Mark Steadman liked this

The A11Y Collective, Arnaud Delafosse, Rian Rietveld, Gardener, Eric Eggert, Kevin, Martín Di Luzio, Eyal Eshet, Dennis Lembrée, Ronalene White, Mike Mai, Stephan Zavodny, Fabrice Gangler 🔗, Adrián Bolonio, Ioanna Talasli, Ramón Corominas, Carbon Five | A West Monroe Company, Emmanuel DEMEY, Nikolay Cholakov🙏4❤, Web Axe, Hadley and Mark Steadman reposted this

Hidde wrote on 12 January 2022:
it's been nice to see the rabbit hole from the inside :D
Steve Lee wrote on 12 January 2022:
Fascinating dear Watson! :D
Erik Kroes 🏔 wrote on 12 January 2022:
👉🏿 You can write '<input disabled>' but you can't write '<input aria-disabled>'. Both HTML and ARIA have boolean attributes, but they're not the same. @hdv dives in.
Eric Eggert wrote on 12 January 2022:
Ah, the complicated world of having multiple standards/languages work in the same files and structures (=the DOM). What can go wrong? 😂
Thomas Steiner wrote on 12 January 2022:
“HTML vs ARIA booleans: [F]or HTML boolean attributes, it’s all about presence and absence, while in ARIA boolean attributes, the boolean state is expressed via "true" and "false" string values and there are a bunch of attributes that take those strings and a couple more.” ⤵️
Joost van der Borg wrote on 12 January 2022:
Your ” and ’ characters seem to get mangled by (at least my) RSS reader:
Demon Newman wrote on 12 January 2022:
This was great! I’m not sure if I’ve consciously recognized the distinction. Would it be worth clarifying in the last part if “maps to” means “would mean the same thing” or “is interpreted by a screenreader as (and so you shouldn’t have both)”?
𝔇𝔢𝔳𝔢𝔩𝔬𝔭𝔢𝔯 | 𝔓𝔯𝔬𝔤𝔯𝔞𝔪𝔪𝔢𝔯 | 𝔖𝔈𝔒 wrote on 13 January 2022:
hiddedevries.nl/en/blog/2022-0…
Stefan Judis wrote on 13 January 2022:
Good read on HTML and ARIA attributes. Thanks @hdv. 🙇‍♂️ hiddedevries.nl/en/blog/2022-0…
Hidde wrote on 13 January 2022:
Danke, Stefan!
Bruce Lawson wrote on 13 January 2022:
Boolean attributes in HTML and ARIA: what's the difference? hiddedevries.nl/en/blog/2022-0… by @hdv.
Frontend Dogma wrote on 13 January 2022:
The Web Doesn’t Have Version Numbers, by @hdv: hiddedevries.nl/en/blog/2022-0…
Steve Lee wrote on 13 January 2022:
Reminds me that HTML is long overdue a tri-state checkbox! :) PS can you explain "In some cases, browsers will help us manage the presence of these attributes." Example? I didn't get it.
Hidde wrote on 13 January 2022:
If the user opens a <details>/<summary>, the presence of the open attribute is toggled by the browser
Deborah Edwards-Oñoro wrote on 13 January 2022:
"So, for HTML boolean attributes it’s all about presence and absence, while in ARIA boolean attributes, the boolean state is expressed via "true" and "false" string values and there are bunch of attributes that take those strings and a couple more."
Lonny O'Brien wrote on 13 January 2022:
Boolean attributes in HTML and ARIA: what's the difference? #Accessibility [website] hiddedevries.nl/en/blog/2022-0…
Michael Scharnagl wrote on 14 January 2022:
🔗 Boolean attributes in HTML and ARIA: what's the difference? hiddedevries.nl/en/blog/2022-0…
Веб-стандарты wrote on 14 January 2022:
Булевые атрибуты в HTML и ARIA. Хидде де Врис сравнивает, как обрабатываются значения true и false в HTML и ARIA, и объясняет разницу. hiddedevries.nl/en/blog/2022-0…
Web Standards wrote on 14 January 2022:
Boolean attributes in HTML and ARIA. @hdv compares true and false boolean values in HTML and ARIA and explains the difference. hiddedevries.nl/en/blog/2022-0…
Hidde wrote on 14 January 2022:
Oh no! Was it something unfriendly I said about the Metaverse? 😬 I'll see if I can contest this somewhere, thanks for letting me know (and for sharing the post!)
Vadim Makeev 🚜🇩🇪 wrote on 14 January 2022:
I tried to share this blog post via Facebook and got this message. No sure if you’re interested in proving them wrong, but… well, FYI 😕
Fresh Frontend Links wrote on 15 January 2022:
Boolean attributes in HTML and ARIA: what's the difference? hiddedevries.nl/en/blog/2022-0…
petamoriken wrote on 18 January 2022:
hiddedevries.nl/en/blog/2022-0…
Frontend Dogma wrote on 19 January 2022:
Boolean Attributes in HTML and ARIA: What’s the Difference?, by @hdv: hiddedevries.nl/en/blog/2022-0…
Johan Ramon wrote on 20 January 2022:
Boolean attributes in HTML and ARIA: what's the difference? hiddedevries.nl/en/blog/2022-0… #accessibility #a11y
Must Creative wrote on 20 January 2022:
Boolean attributes in HTML and ARIA: what's the difference? hiddedevries.nl/en/blog/2022-0…
Joulse wrote on 21 January 2022:
Boolean attributes in HTML and ARIA hiddedevries.nl/en/blog/2022-0…
Phuoc Nguyen wrote on 23 January 2022:
Boolean attributes in HTML and ARIA: what's the difference? hiddedevries.nl/en/blog/2022-0… #webdev #a11y #HTML
Josué Acevedo wrote on 23 January 2022:
The web doesn’t have version numbers hiddedevries.nl/en/blog/2022-0…
Oh, I missed that! Much better than mine 😅 I’ll update mine with a cheeky link to Hidde’s post. Thanks for the heads-up 👍
No worries. The more people are aware of it, the better.
great minds etc! Nice to see more content about this!