Input-wrapping labels are not supported by Dragon
- Published at
- Updated at
- Reading time
Accessible form inputs are essential for building an inclusive web. It's no news that input elements should come with a properly describing label. There are two HTML-native approaches to connect a
label element with an
<!-- reference the id of the input element --> <label for="email"> Your email address </label> <input type="email" name="email" id="email"> <!-- wrap the input element with a label --> <label> Your email address <input type="email" name="email"> </label>
I love the input-wrapping approach because I don't have to invent ids to connect a label with an input. Additionally, it 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, the Dragon speech recognition software is not supporting wrapping labels (Dragon product page), which means you still have to use
id when wrapping your inputs.
<!-- wrapped input + for/id connection --> <label for="email"> Your email address <input type="email" name="email" id="email"> </label>
And that's it. This quick post's purpose is purely to have the links above at hand in the future, so that's it already. 🙈
If you want to read more about labels and input, have a look at Adrian Roselli's post My Priority of Methods for Labeling a Control.
- Automatic hyphenation depends on the defined document language
- How to visualize the tab order without using an extension in Firefox
- How to define Open Graph / Twitter image alt text (and why it might not matter...)
- How to read an entire document using VoiceOver
- "HTML End Tag Labels" – a useful VSCode extension to navigate HTML