<input> with error message wrapped inside <label>

← Return to main list

This is a test case designed to determine how an error message, 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 error message 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>
    <input class="input" type="text" id="name">
    <span class="error-message">Error: Make sure to include full name</span>
  </label>
</div>

Assistive technologies

← Return to main list