jsx_a11y/heading-has-content Correctness

What it does

Enforce that heading elements (h1, h2, etc.) have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the aria-hidden prop.

Why is this bad?

Screen readers alert users to the presence of a heading tag. If the heading is empty or the text cannot be accessed, this could either confuse users or even prevent them from accessing information on the page's structure.

Examples

Examples of incorrect code for this rule:

<h1 />;

Examples of correct code for this rule:

<h1>Foo</h1>;

How to use

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

CLI

oxlint --deny jsx-a11y/heading-has-content --jsx-a11y-plugin

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/heading-has-content": "error"
  }
}

References

• Rule Source