<input> with aria-required and aria-hidden="true" applied to "(Required)" text

← 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

Note on required usage

If the required attribute is applied, the invalid state is also set in accessibility APIs. So, form controls with required applied are announced as "Invalid entry" or "Invalid data", even before users have interacted with the control. More details on the issue.

Even though native HTML attributes should be used where possible, authors could choose to use aria-required="true" instead. However, authors should not use aria-invalid="false" to solve this issue.

However, if the user has not attempted to submit the form, authors SHOULD NOT set the aria-invalid attribute on required widgets simply because the user has not yet entered data.

Source.

Example

Code

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

Assistive technologies

← Return to main list