aria-required not necessary when native required present

[MohsinQK]

Accessibility Note: Use of required vs aria-required (WCAG 2.1)

According to WCAG 2.1, it's important to use the correct attribute to indicate that a form field is required for assistive technologies. Here’s a breakdown of best practices:

---

✅ required (HTML5 native attribute)

• Should be used on native form elements like <input>, <select>, and <textarea>.
• Recognized by modern browsers and assistive technologies (e.g., screen readers).
• Triggers built-in form validation and provides sufficient accessibility information.
• No need to add aria-required="true" if required is already present on native elements.

✅ aria-required="true"

• Used only for custom form controls (e.g., a <div> with role="textbox").
• Ensures that assistive technologies know the field is required when native HTML validation is not available.
• Does not trigger browser-native form validation.

---

🔧 Best Practice

• Use required for all native HTML5 form elements.
• Use aria-required="true" only when building custom form components.
• Avoid adding both required and aria-required="true" to the same native element – it’s redundant.

---

📘 WCAG 2.1 References

• 3.3.1 Error Identification
• 4.1.2 Name, Role, Value

[Teisi]

#293

[mschwemer]

See also #1229

[deoostfrees]

aria-required="true" was included in the codebase as a fallback for older screen readers that did not reliably display the required state of the native required attribute. However, since modern assistive technologies (NVDA, JAWS, and VoiceOver) now handle this correctly, it is no longer necessary for native HTML form elements.