Input-wrapping labels are not supported by Dragon

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:

• Should form labels be wrapped or separate?
• My Priority of Methods for Labeling a Control.