← Back to rules

jsx-a11y/aria-proptypes Correctness

What it does

Enforces that elements do not use invalid ARIA state and property values.

Why is this bad?

Using invalid ARIA state and property values can mislead screen readers and other assistive technologies. It may cause the accessibility features of the website to fail, making it difficult for users with disabilities to use the site effectively.

Examples

Examples of incorrect code for this rule:

<div aria-level="yes" />
<div aria-relevant="additions removalss" />

Examples of correct code for this rule:

<div aria-label="foo" />
<div aria-labelledby="foo bar" />
<div aria-checked={false} />
<div aria-invalid="grammar" />

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/aria-proptypes": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["jsx-a11y"],
  rules: {
    "jsx-a11y/aria-proptypes": "error",
  },
});

CLI

oxlint --deny jsx-a11y/aria-proptypes --jsx-a11y-plugin

Version

This rule was added in v1.36.0.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground