<input> with visual "required" indicator, and "aria-hidden"

Return to main list

In this case, the visual "Required" indicator is hidden from assistive technologies via the aria-hidden attribute. So, only the required attribute should be announced, along with the <label> content

Example

Code

<div class="form-group">
  <label class="label" for="name">
    Full name
    <span class="required" aria-hidden="true">(Required)</span>
  </label>
  <input required class="input" type="text" id="name">
</div>

Assistive technologies

VoiceOver

NVDA

JAWS

Return to main list