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

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-aria-required-is-unnecessary-for-elements-that-have-attribute-required
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML `required` attribute was introduced in HTML5 and tells both the browser and assistive technologies that a form field must be filled in before the form can be submitted. The `aria-required` attribute serves the same purpose but comes from the WAI-ARIA specification, which was designed to fill accessibility gaps in HTML. Now that `required` is widely supported, using both attributes on the same element is unnecessary duplication.

The W3C validator raises this warning because redundant ARIA attributes add noise to your markup without providing any benefit. One of the core principles of ARIA usage is the **first rule of ARIA**: if you can use a native HTML element or attribute that already has the semantics you need, use that instead of adding ARIA. The native `required` attribute provides built-in browser validation, visual cues, and accessibility information all at once — something `aria-required` alone cannot do.

Modern screen readers such as NVDA, JAWS, and VoiceOver all correctly interpret the native `required` attribute and announce the field as required to users. Keeping both attributes doesn't cause a functional problem, but it creates maintenance overhead, clutters your code, and signals to other developers that something special might be going on when it isn't.

## How to fix it

1. If your element already has the `required` attribute, remove `aria-required="true"`.
2. If your element only has `aria-required="true"` and you want browser-native validation, replace it with `required`.
3. In rare cases where you need to support assistive technologies that don't recognize the native `required` attribute (some very old screen reader versions), keeping both is a conscious trade-off — but for the vast majority of projects, the native attribute alone is sufficient.

## Examples

### ❌ Redundant `aria-required` alongside `required`

```html
<form action="/order">
  <label for="city">City</label>
  <input id="city" name="city" type="text" aria-required="true" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" aria-required="true" required>

  <label for="comments">Comments</label>
  <textarea id="comments" name="comments" aria-required="true" required></textarea>

  <button type="submit">Submit</button>
</form>
```

This triggers the validator warning on every element where both attributes appear.

### ✅ Using the native `required` attribute only

```html
<form action="/order">
  <label for="city">City</label>
  <input id="city" name="city" type="text" required>

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

  <label for="comments">Comments</label>
  <textarea id="comments" name="comments" required></textarea>

  <button type="submit">Submit</button>
</form>
```

### ✅ Using `aria-required` on a non-native element

There are valid use cases for `aria-required` — specifically when you build custom form controls that don't use native form elements. In that scenario, `aria-required` is the correct choice because the native `required` attribute has no effect on non-form elements.

```html
<div role="combobox" aria-required="true" aria-expanded="false" aria-labelledby="color-label">
  <span id="color-label">Favorite color</span>
</div>
```

Here, `aria-required="true"` is necessary because a `<div>` doesn't support the native `required` attribute.