aria-required

Description

The aria-required rule ensures that you identify mandatory form fields for users of assistive technologies.

For form fields that users must fill out, set the aria-required attribute to true. If it is an input field, having the required attribute also suffices. This is essential for accessibility because it programmatically communicates the requirement to screen readers and other assistive tools.

In cases of radio buttons, you need not check aria-required on individual fields. You only need to check it on the top level field, ideally a radiogroup field or <fieldset>.

This rule aligns with WCAG Success Criterion 3.3.1: Error Identification (Level A), which requires that labels or instructions are provided when content requires user input.

Examples

In the following example, the Email field is mandatory and Phone number is an optional field. However, the Email field is missing the aria-required="true" attribute.

In the following corrected example, the mandatory Email field includes the correct attribute: aria-required="true".

How to fix?

To fix violations of the aria-required rule, follow these steps:

1. Identify all form fields in your application that are mandatory.
2. For each mandatory field, add the attribute aria-required="true" to the input element.
3. Do not use aria-required="true" on fields that are optional.
4. Do not use required and aria-required="true" together, as it will cause the screen reader to repeat the announcement that it is a mandatory field.
5. Check if aria-required is set on individual fields for radio buttons. If so, change it to aria-required="true" on the top-level field, ideally a radiogroup field or <fieldset>.

References

• WCAG Success Criterion 3.3.1: Error Identification (Level A)