Bad value X for attribute “aria-required” on element Y.

The aria-required attribute is a WAI-ARIA property that signals to assistive technologies (like screen readers) that a user must provide a value for a form control before the form can be submitted. According to the ARIA specification, the attribute’s value must be either "true" or "false". Any other value — such as "yes", "1", "", or a misspelling — is invalid and will produce this validation error.

Common mistakes include writing aria-required="yes", aria-required="", aria-required="required", or even aria-required="True" (note: the value is case-sensitive and must be lowercase).

Why this matters

When an invalid value is used, assistive technologies may not correctly interpret whether the field is required. This can lead to a confusing experience for users who rely on screen readers, as they may not be told that a field is mandatory before submitting a form. Using valid attribute values ensures consistent, predictable behavior across all browsers and assistive technologies.

When to use aria-required vs. required

For native HTML form elements like <input>, <select>, and <textarea>, you should use the built-in HTML required attribute. It provides both validation behavior and accessibility information out of the box, without needing ARIA.

The aria-required attribute is intended for custom (non-semantic) form controls — for example, a <div> with a role="textbox" or role="combobox". In these cases, the browser doesn’t know the element is a form control, so aria-required="true" communicates the requirement to assistive technologies.

Examples

❌ Invalid values for aria-required

<!-- "yes" is not a valid value -->

<div
  role="textbox"
  contenteditable
  aria-labelledby="name_label"
  aria-required="yes">
</div>

<!-- Empty string is not valid -->

<input type="text" aria-required="">

<!-- "required" is not valid -->

<input type="email" aria-required="required">

✅ Correct usage with aria-required

<div id="email_label">Email Address *</div>
<div
  role="textbox"
  contenteditable
  aria-labelledby="email_label"
  aria-required="true"
  id="email">
</div>

✅ Explicitly marking a field as not required

<div id="notes_label">Notes (optional)</div>
<div
  role="textbox"
  contenteditable
  aria-labelledby="notes_label"
  aria-required="false"
  id="notes">
</div>

✅ Preferred approach for native form elements

When using standard HTML form controls, skip aria-required and use the native required attribute instead:

<label for="email">Email Address *</label>
<input type="email" id="email" name="email" required>

<label for="country">Country *</label>
<select id="country" name="country" required>
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

The native required attribute automatically conveys the required state to assistive technologies and also triggers built-in browser validation, making it the better choice whenever a native form element is available.

Learn more:

MDN Reference

MDN - aria-required

→

Rocket Validator Guide

Attribute “aria-required” is unnecessary for elements that have attribute “required”.

→