Attaching a label to a button

The <label> element is used to put a caption on interactive elements like <input>, <textarea>, <select>, <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-label/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>
<button
    id="my-button"
    onClick="window.alert('Clickety Clack')"
    type="button"
>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.

Tags: til,HTML
References: