ryanve ryanve - 5 months ago 10
HTML Question

How to use [role=option] on anchors and buttons

a[role=option]



<div role="listbox">
<a role="option">orange</a>
<a role="option">purple</a>
</div>



Error: Bad value
option
for attribute
role
on element
a
.


button[role=option]



<div role="listbox">
<button role="option">orange</button>
<button role="option">purple</button>
</div>



Error: Bad value
option
for attribute
role
on element
button
.


span[role=option]



<div role="listbox">
<span role="option">orange</span>
<span role="option">purple</span>
</div>


Validates okay with spans. Based on the
listbox
documentation
I'd think that
a[role=option]
or
button[role=option]
would be valid but those both give validation errors. They are sensible semantic fallbacks...why aren't they valid?

Answer

Neither a nor button allow role="option". This is by design. There is a handy table that outlines what roles are allowed on what elements (so no a and no button).

However, I recommend against doing this. Unless you are prepared to exactly mimic all the functionality of a select (all keyboard interactions, for example). Some issues and examples are at MDN which includes some of the additional roles and functions you must put in place. ARIA was created as a bridge technology, not to replace native controls.

Comments