`<input>` with `required` and "(Required)" added to label text

This is a test case designed to determine how a visual "required" indicator is announced by various screen readers.

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>
  <label for="name">Full name (Required)</label>
  <input required type="text" id="name">
</div>

Assistive technologies

VoiceOver

Chrome: Full name. (Required). Required. Invalid data. Edit text.
Firefox: Full name. (Required). Required. Invalid data. Edit text.
Safari: Full name. (Required). Required. Edit text.

NVDA

Chrome: Full name. (Required). Edit. Required. Invalid entry. Blank.
Firefox: Full name. (Required). Edit. Required. Invalid entry. Has autocomplete. Blank.
Edge: Full name. (Required). Edit. Required. Invalid entry. Blank.

JAWS

Chrome: Full name. Left parent. Required. Right parent. Edit. Required. Invalid entry. Type in text.
Firefox: Full name. Left parent. Required. Right parent. Edit. Required. Invalid entry. Type in text.
Edge: Full name. Left parent. Required. Right parent. Edit. Required. Invalid entry. Type in text.

← Return to main list

<input> with required and "(Required)" added to label text

Note on required usage