Attaching a label to a button
<label> element is used to put a caption on interactive elements like
<meter>, etc. Those elements would otherwise have semantically no name, so for good usability and accessability it's mandatory to use the
<label> element or one of the
aria-labelledby attributes. Clicking the label will activate the labeled control.
However, it's also valid HTML to use the
<label> together with a
<button> element, or an
<input type="button">. Clicking the label will cause a click event on the button. However, be aware that this may cause some issues with assistive technologies, as the button will now have a label that diverges from its inner text.
<label for="my-button">This is the label - try clicking it</label>
>How about a button</button>
This article has been published on on my blog. Here's a list of all articles if you're interested in this kind of stuff.
If you have feedback, questions, or want to comment on this, please send me an e-mail or contact me through any other channel.