I have a question about the use of a check box in an implicit label element.

Hello NeoDahl, ^ - ^

There are two ways to link labels and input elements: explicit and implicit.

Explicit connection

Explicit connection refers to the explicit connection of the for property of the label element and the id property of the input element using the same value.

<label for="user-id">ID</label>
<input type="text" id="user-id">

Implicit connection

Implicit connection is a method of connecting an input element by wrapping it around a label element.

<label>ID <input type="text"></label>

Both explicit and implicit connections provide the same results. However, there are differences in accessibility.

Explicit connections are easy to use when different HTML elements are included between labels and input elements.

Using explicit connections improves accessibility because linking the input element with the label element makes it clear what to type in the input element. Also, when users click on linked label content, the check status of the input element changes, so usability is also improved

For implicit connections, Some information and communication aids do not recognize the connection so using explicit connections is more recommended if you are mindful of access. (Generally, explicit labels are better supported by assistive technology)

.

But Most of the information and communication aids used today are implicit Supports connections. Therefore, there is a large use of implicit connection methods I don't think it'll be a problem. Google Guide - Accessibility Please refer to the tree article and read it.

.

However, if accessibility issues arise in the future, it may be necessary to modify and supplement them from implicit to explicit.

[strong] Both are standard uses. For example, Bootstrap uses the input attribute assuming that only check box/radio button is used without a label tag.