aria-required — Marking Required Form Fields for Screen Readers

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-required indicates that a form field must be filled out before submission, supplementing the HTML required attribute when native attributes cannot be used or need reinforcement.

In this tutorial, you'll learn how to use aria-required effectively in your ARIA form implementations.

What You'll Learn

By the end of this lesson, you'll understand when to use aria-required, how it compares to the HTML required attribute, how screen readers announce it, and best practices for required field indicators.

Why It Matters

Screen reader users need to know which fields are required before submitting a form. Missing required field markers mean users may submit incomplete forms repeatedly.

Real-World Use

Durga Antivirus Pro's licensing form uses aria-required on email and license key fields so screen reader users know these are mandatory before submitting.

Required Field Decision

flowchart TD
  A[Field is required] --> B{Using native form element?}
  B -->|Yes| C[Use HTML required attribute]
  B -->|No| D[Use aria-required='true']
  C --> E{Need extra reinforcement?}
  E -->|Yes| F[Add aria-required='true' too]
  E -->|No| G[HTML required is enough]
  D --> F

How aria-required Works

aria-required tells screen readers that input is mandatory:

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

<label for="name">Name</label>
<input type="text" id="name" aria-required="true" />

The screen reader announces: "Email address, required, edit text".

HTML required vs aria-required

For native form elements, the HTML required attribute is preferred:

<!-- HTML required is sufficient for native elements -->
<label for="email">Email address <span aria-hidden="true">*</span></label>
<input type="email" id="email" required />

Use aria-required when:

• The form control is a custom widget without native required support
• You need to dynamically change required state
• You want to reinforce the required message for older screen readers

<!-- Custom widget needs aria-required -->
<div role="combobox" aria-required="true" aria-label="Country">
  <!-- custom dropdown -->
</div>

Visual Required Indicator

Always pair aria-required with a visible asterisk or text:

<label for="license">
  License key
  <span aria-hidden="true" class="required-indicator">*</span>
</label>
<input type="text" id="license" aria-required="true" />

Common Mistakes

• Using aria-required without HTML required on native elements: The native attribute provides browser validation.
• Omitting the visual indicator: Sighted users also need to know which fields are required.
• Using aria-required="false": The default is false. Only add the attribute to required fields.
• Forgetting to mark required fields in custom widgets: Custom components need explicit aria-required.
• Marking all fields as required: If all fields are required, users may become desensitized to the message.

Practice and Challenge

1. When should you use aria-required? When native required cannot be used or to reinforce it on custom form controls.

2. What is the preferred method for native form elements? The HTML required attribute.

3. How does a screen reader announce aria-required="true"? It says "required" after the field label.

4. Should you also use a visual required indicator? Yes, for sighted users.

5. Challenge: Create a form with three fields. Use HTML required on two native inputs and aria-required on one custom widget. Test with a screen reader.

FAQ

Mini Project

Build a registration form with four fields: name (required), email (required), phone (optional), and country (required, custom combobox). Apply appropriate required indicators and test with a screen reader.

What's Next

Continue to aria-invalid to learn how to indicate validation errors.