---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
<>
	<h1 />
	<h1>
		<div aria-hidden />
	</h1>
	<h1></h1>
	<h1>
		<></>
	</h1>
	<h1 aria-hidden="true">content</h1>
	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
	<h1>{undefined}</h1>
	<h1 children />
	<h1 children={""} />
	<h1 children={null} />
	<h1 children={undefined} />
	<h1 {...props} aria-hidden="true" />
</>;

```

# Diagnostics
```
invalid.jsx:2:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
    1 │ <>
  > 2 │ 	<h1 />
      │ 	^^^^^^
    3 │ 	<h1>
    4 │ 		<div aria-hidden />
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:3:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
    1 │ <>
    2 │ 	<h1 />
  > 3 │ 	<h1>
      │ 	^^^^
  > 4 │ 		<div aria-hidden />
  > 5 │ 	</h1>
      │ 	^^^^^
    6 │ 	<h1></h1>
    7 │ 	<h1>
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:6:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
    4 │ 		<div aria-hidden />
    5 │ 	</h1>
  > 6 │ 	<h1></h1>
      │ 	^^^^^^^^^
    7 │ 	<h1>
    8 │ 		<></>
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:7:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
     5 │ 	</h1>
     6 │ 	<h1></h1>
   > 7 │ 	<h1>
       │ 	^^^^
   > 8 │ 		<></>
   > 9 │ 	</h1>
       │ 	^^^^^
    10 │ 	<h1 aria-hidden="true">content</h1>
    11 │ 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:10:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
     8 │ 		<></>
     9 │ 	</h1>
  > 10 │ 	<h1 aria-hidden="true">content</h1>
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    11 │ 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
    12 │ 	<h1>{undefined}</h1>
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:11:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
     9 │ 	</h1>
    10 │ 	<h1 aria-hidden="true">content</h1>
  > 11 │ 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    12 │ 	<h1>{undefined}</h1>
    13 │ 	<h1 children />
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:12:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
    10 │ 	<h1 aria-hidden="true">content</h1>
    11 │ 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
  > 12 │ 	<h1>{undefined}</h1>
       │ 	^^^^^^^^^^^^^^^^^^^^
    13 │ 	<h1 children />
    14 │ 	<h1 children={""} />
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:13:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
    11 │ 	<h1 aria-hidden="true" dangerouslySetInnerHTML={{ __html: "heading" }} />
    12 │ 	<h1>{undefined}</h1>
  > 13 │ 	<h1 children />
       │ 	^^^^^^^^^^^^^^^
    14 │ 	<h1 children={""} />
    15 │ 	<h1 children={null} />
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:14:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
    12 │ 	<h1>{undefined}</h1>
    13 │ 	<h1 children />
  > 14 │ 	<h1 children={""} />
       │ 	^^^^^^^^^^^^^^^^^^^^
    15 │ 	<h1 children={null} />
    16 │ 	<h1 children={undefined} />
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:15:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
    13 │ 	<h1 children />
    14 │ 	<h1 children={""} />
  > 15 │ 	<h1 children={null} />
       │ 	^^^^^^^^^^^^^^^^^^^^^^
    16 │ 	<h1 children={undefined} />
    17 │ 	<h1 {...props} aria-hidden="true" />
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:16:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
    14 │ 	<h1 children={""} />
    15 │ 	<h1 children={null} />
  > 16 │ 	<h1 children={undefined} />
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^
    17 │ 	<h1 {...props} aria-hidden="true" />
    18 │ </>;
  
  i All headings on a page should have content that is accessible to screen readers.
  

```

```
invalid.jsx:17:2 lint/a11y/useHeadingContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide screen reader accessible content when using heading  elements.
  
    15 │ 	<h1 children={null} />
    16 │ 	<h1 children={undefined} />
  > 17 │ 	<h1 {...props} aria-hidden="true" />
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    18 │ </>;
    19 │ 
  
  i All headings on a page should have content that is accessible to screen readers.
  

```