anchorContent

Reports anchor elements without accessible content.

✅ This rule is included in the jsx logical preset.

Automated tools such as screen readers and search engine crawlers rely on anchors (links) having contents to understand those links. If anchor is missing accessible content, then it will not be properly understood.

This rule checks that all anchors either have child content or an ARIA property describing the anchor.

Examples

❌ Incorrect

<a />

<a></a>

<a>
  <span aria-hidden />
</a>

✅ Correct

<a>Link text</a>

<a aria-label="Link" />

<a title="Link title" />

When Not To Use It

If you are using a framework that automatically generates accessible content for anchors, you can safely disable this rule.

Further Reading

• WCAG 2.4.4 - Link Purpose
• WCAG 4.1.2 - Name, Role, Value

Equivalents in Other Linters

• ESLint: jsx-a11y/anchor-content
• Oxlint: jsx_a11y/anchor-has-content