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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-aria-required-on-element-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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`

```html
<!-- "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`

```html
<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

```html
<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:

```html
<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.