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.
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> );
function Foo(props) { return <label {...props} /> }
<h1>Heading Content!</h1> <h1><TextWrapper /><h1> <h1 dangerouslySetInnerHTML={{ __html: 'foo' }} />
<h1 /> <h1><TextWrapper aria-hidden />