field-optional

Description

A required field must be programmatically determinable as required. This ensures that users, especially those relying on assistive technologies, can understand which fields are mandatory when filling out forms. The field-optional rule aligns with WCAG Success Criterion 3.3.2 (Labels or Instructions), which requires that labels or instructions are provided when content requires user input.

The rule emphasizes that the required state of a field must be conveyed programmatically, not just visually. This allows assistive technologies to accurately inform users about mandatory fields.

Examples

In the following example, a field is marked as required visually using an asterisk (*), but this information is not programmatically determinable. This violates the field-optional rule because assistive technologies cannot convey the required state to users.

In the following corrected example, the required state is programmatically determinable using the aria-required attribute, set to "true". This ensures that assistive technologies can accurately inform users that the field is mandatory.

How to fix?

To fix violations of the field-optional rule, follow these steps:

1. Identify all required fields on your webpage.
2. Ensure that the required state is programmatically determinable by using the required attribute or ARIA properties like aria-required="true". Add a detail like “An asterisk (*) indicates a required field” to the instructions whenever it is used.
3. Avoid relying solely on visual indicators (e.g., asterisks) to denote required fields.
4. Test your forms with assistive technologies to confirm that the required state is properly conveyed.

Reference

WCAG Success Criterion 3.3.2: Labels or Instructions