`<input>` with help text wrapped inside `<label>`

← Return to main list

This is a test case designed to determine how help information, associated with an <input> is announced by various screen readers.

In this case, the <label> is wrapped around the content, form control and help information. For this reason, the help information is part of the label content and should be announced as part of the accessible name.

Example

Code

<div class="form-group">
  <label for="name">
    <span class="label">Name</span>
    <span class="help-text">Make sure to include full name</span>
    <input class="input" type="text" id="name">
  </label>
</div>

Assistive technologies

VoiceOver

Chrome: Name. Make sure to include full name. Edit text.
Firefox: Name. Make sure to include full name. Edit text.
Safari: Name. And one more item. Edit text. [Additional content not announced]

NVDA

Chrome: Name. Make sure to include full name. Edit. Blank.
Firefox: Name. Make sure to include full name. Edit. Has autocomplete. Blank.
Edge: Name. Make sure to include full name. Edit. Blank.

JAWS

Chrome: Name. Make sure to include full name. Edit. Type in text.
Firefox: Name. Make sure to include full name. Edit. Type in text.
Edge: Name. Make sure to include full name. Edit. Type in text.