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

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

<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

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

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

Learn more:

MDN Reference

MDN: aria-required

→

W3C Reference

W3C: aria-required

→