---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: area.jsx
---
# Input
```jsx
// invalid

<>
	<area />
  <area alt />
  <area alt={undefined} />
  <area src="xyz" />
  <area {...this.props} />
  <area aria-label="" />
  <area aria-label={undefined} />
  <area aria-labelledby="" />
  <area aria-labelledby={undefined} />
</>;

//valid

<>
  <area aria-label="foo" />
  <area aria-labelledby="id1" />
  <area alt="" />
  <area alt="This is descriptive!" />
  <area alt={altText} />
  <Area />
</>;

```

# Diagnostics
```
area.jsx:4:2 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
    3 │ <>
  > 4 │ 	<area />
      │ 	^^^^^^^^
    5 │   <area alt />
    6 │   <area alt={undefined} />
  
  i Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
  

```

```
area.jsx:5:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
    3 │ <>
    4 │ 	<area />
  > 5 │   <area alt />
      │   ^^^^^^^^^^^^
    6 │   <area alt={undefined} />
    7 │   <area src="xyz" />
  
  i Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
  

```

```
area.jsx:6:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
    4 │ 	<area />
    5 │   <area alt />
  > 6 │   <area alt={undefined} />
      │   ^^^^^^^^^^^^^^^^^^^^^^^^
    7 │   <area src="xyz" />
    8 │   <area {...this.props} />
  
  i Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
  

```

```
area.jsx:7:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
    5 │   <area alt />
    6 │   <area alt={undefined} />
  > 7 │   <area src="xyz" />
      │   ^^^^^^^^^^^^^^^^^^
    8 │   <area {...this.props} />
    9 │   <area aria-label="" />
  
  i Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
  

```

```
area.jsx:8:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
     6 │   <area alt={undefined} />
     7 │   <area src="xyz" />
   > 8 │   <area {...this.props} />
       │   ^^^^^^^^^^^^^^^^^^^^^^^^
     9 │   <area aria-label="" />
    10 │   <area aria-label={undefined} />
  
  i Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
  

```

```
area.jsx:9:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
     7 │   <area src="xyz" />
     8 │   <area {...this.props} />
   > 9 │   <area aria-label="" />
       │   ^^^^^^^^^^^^^^^^^^^^^^
    10 │   <area aria-label={undefined} />
    11 │   <area aria-labelledby="" />
  
  i Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
  

```

```
area.jsx:10:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
     8 │   <area {...this.props} />
     9 │   <area aria-label="" />
  > 10 │   <area aria-label={undefined} />
       │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    11 │   <area aria-labelledby="" />
    12 │   <area aria-labelledby={undefined} />
  
  i Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
  

```

```
area.jsx:11:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
     9 │   <area aria-label="" />
    10 │   <area aria-label={undefined} />
  > 11 │   <area aria-labelledby="" />
       │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    12 │   <area aria-labelledby={undefined} />
    13 │ </>;
  
  i Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
  

```

```
area.jsx:12:3 lint/a11y/useAltText ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a text alternative through the alt, aria-label or aria-labelledby attribute
  
    10 │   <area aria-label={undefined} />
    11 │   <area aria-labelledby="" />
  > 12 │   <area aria-labelledby={undefined} />
       │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    13 │ </>;
    14 │ 
  
  i Meaningful alternative text on elements helps users relying on screen readers to understand content's purpose within a page.
  

```