The MDN has the following explanation of the ARIA button role:
The button role is for clickable elements that trigger a response when activated by the user. Adding role="button" tells the screen reader the element is a button, but provides no button functionality.
If I understand things correctly, the basic idea is that when a user can click on something to make stuff happen, and that something isn't a <button>, you should give it role="button".
This got me thinking: when you use a <label> element together with a <checkbox>, like so:
<label>
<input type="checkbox"/>
Click me
</label>
It makes it so that you can click on the label text to click on the checkbox. In other words, the label is a non-button clickable element that triggers a response when activated by the user ... so shouldn't it get the ARIA role?
I ask because I couldn't find any examples of this on the web, so I think I might be misunderstanding the role.
Interesting question.
No, you should not make a <label> a button.
The main reason for that is that the label element is only kind of a delegate or assistant for another interactive element, e.g. a checkbox. It’s a helper, and not expected to handle interaction itself.
In most cases, any click event that occurs on the label element is send to the associated interactive element.
document.querySelector('input').addEventListener('click', _ => alert("Checkbox input element received click"));<label>
<input type="checkbox">
Click this text
</label>The HTML standard for the label element mentions this:
The activation behavior of a label element for events targeted at interactive content descendants of a label element, and any descendants of those interactive content descendants, must be to do nothing.
The main goal of a <label> is to provide an accessible name for the interactive element. Any activation behaviour is left to the platform.
It is convenient to have a larger target by making the label clickable, so most platforms reroute clicks to the associated element.
For focus navigation, or assistive technology, labels usually are completely transparent, i.e. ignored. For this reason the implicit role of a <label> is none.
A button does not at all function like this. It’s in the centre of attention and not expected to delegate its activation.