roleRequiredAriaProps

Reports ARIA roles missing their required ARIA properties.

✅ This rule is included in the jsx logical preset.

ARIA roles define how elements are exposed to assistive technologies like screen readers. Some roles require specific ARIA properties to function correctly and provide meaningful information to users. Omitting these required properties can result in incomplete or confusing experiences for users of assistive technologies.

Examples

❌ Incorrect

<div role="checkbox" />

<div role="slider" aria-valuenow="5" />

<span role="combobox" />

<div role="heading" />

✅ Correct

<div role="checkbox" aria-checked="false" />

<div role="slider" aria-valuenow="5" aria-valuemax="10" aria-valuemin="0" />

<span role="combobox" aria-controls="listbox" aria-expanded="false" />

<div role="heading" aria-level="2" />

When Not To Use It

If you are using a custom framework that populates valid ARIA property roles for you, you might not need this rule.

Further Reading

• WAI-ARIA Roles Model
• ARIA Required States and Properties

Equivalents in Other Linters

• ESLint: jsx-a11y/role-has-required-aria-props
• Oxlint: jsx_a11y/role-has-required-aria-props