Input-wrapping labels are not supported by Dragon
- Published at
- Updated at
- Reading time
- 1min
Accessible form inputs are essential for building an inclusive web. Input elements should have a label. There are two HTML-native approaches to connect a label
element with an input
element.
<!-- reference the id of the input element (explicit association) -->
<label for="email">
Your email address
</label>
<input type="email" name="email" id="email">
<!-- wrap the input element with a label (implicit association) -->
<label>
Your email address
<input type="email" name="email">
</label>
I love the input-wrapping approach because I don't have to come up with ids to connect a label with an input. It also increases the tab/click area of the wrapped input element, making it more accessible with an improved UX!
It would be such a beautiful solution if there wouldn't be the usual Frontend problem of supporting countless browsers, devices and assistive technologies such as screen readers.
Apparently, Dragon Naturally Speaking for Windows, and Voice Control for macOS and iOS don't support implicit form/label association. So that you still have to use for
/id
when wrapping your inputs.
<!-- wrapped input + for/id connection -->
<label for="email">
Your email address
<input type="email" name="email" id="email">
</label>
If you want to dive deeper into this topic, here are some more resources:
Join 5.4k readers and learn something new every week with Web Weekly.