Input-wrapping labels are not supported by Dragon

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 input element.

<!-- 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 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>

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.