Skip to main content

jsx-a11y/useHeadingContent

enforce heading (h1, h2, etc) elements contain accessible content

ESLint Equivalent: heading-has-content

Examples

Invalid

<h1 />

 file.tsx:1 lint/jsx-a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide screen reader accessible content when using heading elements.

    <h1 />
    ^^^^^^

  All headings on a page should have content that is accessible to
    screen readers.


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

 file.tsx:1 lint/jsx-a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide screen reader accessible content when using heading elements.

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

  All headings on a page should have content that is accessible to
    screen readers.


<h1><div aria-hidden /></h1>

 file.tsx:1 lint/jsx-a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide screen reader accessible content when using heading elements.

    <h1><div aria-hidden /></h1>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  All headings on a page should have content that is accessible to
    screen readers.

Valid

<h1>heading</h1>
<h1><TextWrapper /></h1>
<h1 dangerouslySetInnerHTML={{ __html: 'heading' }} />
<h1><div aria-hidden />visible content</h1>