HTML: the aria-required attribute

The aria-required attribute tells assistive technology that a form control must have a value before the form can be submitted.

Prefer native HTML

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

The native required attribute communicates the requirement and participates in the browser's constraint validation. Visible wording such as “required” also helps people who do not use assistive technology.

When ARIA is useful

<div role="textbox" aria-required="true" aria-labelledby="name-label">
  Custom control
</div>

Custom widgets may need aria-required="true" when no native form control can express their role. Adding ARIA does not add validation, submission behavior, or an error message.

Give useful feedback

<label for="code">Access code (required)</label>
<input id="code" name="code" required aria-describedby="code-error" aria-invalid="true">
<p id="code-error">Enter the six-digit code from your email.</p>

When validation fails, explain what is wrong and how to fix it. Keep the accessible state, visible message, and actual validation rule consistent.

Common mistakes

• Using aria-required instead of native required on a standard input.
• Marking a control as required without telling users which value is expected.
• Relying on a red border or an ARIA state without an understandable error message.
• Skipping server-side validation.