src/content/docs/linter/rules/use-anchor-content.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/useAnchorContent`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/anchor-has-content`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-has-content.md){
"linter": {
"rules": {
"a11y": {
"useAnchorContent": "error"
}
}
}
}
Enforce that anchors have content and that the content is accessible to screen readers.
Accessible means the content is not hidden using the aria-hidden attribute.
Refer to the references to learn about why this is important.
<a />
<a></a>
<a> </a>
<a aria-hidden>content</a>
<a><span aria-hidden="true">content</span></a>
<a>content</a>
function html() {
return { __html: "foo" }
}
<a dangerouslySetInnerHTML={html()} />
<a><TextWrapper aria-hidden={true} />content</a>
<a><div aria-hidden="true"></div>content</a>
{
"linter": {
"rules": {
"a11y": {
"useAnchorContent": "error"
}
}
}
}
Enforce that anchors have content and that the content is accessible to screen readers.
Accessible means the content is not hidden using the aria-hidden attribute.
Anchor tags should have text content that describes the link destination for screen reader users.
Alternatively, the anchor can have an accessible name via the aria-label or title attribute.
:::note
In .html files, this rule matches element names case-insensitively (e.g., <A>, <a>).
In component-based frameworks (Vue, Svelte, Astro), only lowercase element names are checked.
PascalCase variants like <A> are assumed to be custom components and are ignored.
:::
<a></a>
<a> </a>
<a aria-hidden="true">content</a>
<a><span aria-hidden="true">content</span></a>
<a>content</a>
<a><span>content</span></a>
<a><span aria-hidden="true"></span>content</a>
<a aria-label="Navigate to home"></a>
<a title="Home page"></a>