Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
3 contributors

Users who have contributed to this file

@beefancohen @WilcoFiers @bmish

jsx-a11y/heading-has-content

💼 This rule is enabled in the following configs: ☑️ recommended, 🔒 strict.

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. Refer to the references to learn about why this is important.

Rule options

This rule takes one optional object argument of type object:

{
    "rules": {
        "jsx-a11y/heading-has-content": [ 2, {
            "components": [ "MyHeading" ],
          }],
    }
}

For the components option, these strings determine which JSX elements (always including <h1> thru <h6>) should be checked for having content. This is a good use case when you have a wrapper component that simply renders an h1 element (like in React):

// Header.js
const Header = props => {
  return (
    <h1 {...props}>{ props.children }</h1>
  );
}

...

// CreateAccount.js (for example)
...
return (
  <Header>Create Account</Header>
);

Bad

function Foo(props) {
  return <label {...props} />
}

Succeed

<h1>Heading Content!</h1>
<h1><TextWrapper /><h1>
<h1 dangerouslySetInnerHTML={{ __html: 'foo' }} />

Fail

<h1 />
<h1><TextWrapper aria-hidden />

Accessibility guidelines

Resources