---
url: /docs/guide/usage/linter/rules/jsx_a11y/anchor-has-content.md
---

### What it does

Enforce that anchors have content and that the content is accessible to screen readers.
Accessible means that it is not hidden using the `aria-hidden` prop.

Alternatively, you may use the `title` prop or the `aria-label` prop.

Anchors passed directly as JSX prop values to custom components are ignored,
since the receiving component may supply their content.

### Why is this bad?

Anchor elements without content can be confusing for users relying
on screen readers to understand.

### Examples

Examples of **correct** code for this rule:

```jsx
<a>Anchor Content!</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
<a title='foo' />
<a aria-label='foo' />
<Button render={<a href='/home' />}>Home</Button>
```

Examples of **incorrect** code for this rule:

```jsx
<a />
<a><TextWrapper aria-hidden /></a>
```

## Configuration

This rule accepts a configuration object with the following properties:

### components

type: `string[]`

default: `[]`

Additional custom component names to treat as anchor elements.

## How to use

## Version

This rule was added in v0.0.18.

## References