ariaPropTypes

Reports ARIA properties with invalid value types.

✅ This rule is included in the jsx logical preset.

ARIA properties have specific value types defined in the WAI-ARIA specification. Each property expects values of a particular type, such as boolean, integer, token, or string. Providing values that don’t match the expected type can cause assistive technologies to ignore the property or behave unexpectedly.

Common value types include:

• boolean: true or false (e.g., aria-disabled, aria-hidden)
• tristate: true, false, or mixed (e.g., aria-checked, aria-pressed)
• integer: whole numbers (e.g., aria-level, aria-posinset)
• number: numeric values (e.g., aria-valuemax, aria-valuemin)
• token: specific predefined values (e.g., aria-live, aria-orientation)
• string: any text value (e.g., aria-label, aria-placeholder)
• ID reference: ID of another element (e.g., aria-activedescendant)
• ID list: space-separated list of IDs (e.g., aria-controls, aria-labelledby)

This is required for WCAG 4.1.2 compliance.

Examples

❌ Incorrect

<div aria-hidden="yes" />

<input aria-checked="1" />

<div aria-level="low" />

<button aria-pressed="yes" />

<div aria-autocomplete="invalid" />

✅ Correct

<div aria-hidden="true" />

<input aria-checked="true" />

<div aria-level="1" />

<button aria-pressed="false" />

<div aria-autocomplete="inline" />

When Not To Use It

If you are using a framework that automatically transforms specific invalid property values to match the ARIA specification, this rule might not be useful for you.

Further Reading

• WCAG 4.1.2: Name, Role, Value
• WAI-ARIA States and Properties
• MDN: ARIA attributes

Equivalents in Other Linters

• ESLint: jsx-a11y/aria-proptypes