⏎ Lint Rules

useAnchorContent (since v10.0.0)

This rule is recommended by Rome.

Enforce that anchor elements have content and that the content is accessible to screen readers.

Accessible means that the content is not hidden using the aria-hidden attribute.

Examples

Invalid

<a />

a11y/useAnchorContent.js:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a />
      │ ^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  

<a></a>

a11y/useAnchorContent.js:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a></a>
      │ ^^^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  

<a>    </a>

a11y/useAnchorContent.js:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a>    </a>
      │ ^^^^^^^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  

<a aria-hidden>content</a>

a11y/useAnchorContent.js:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a aria-hidden>content</a>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  

<a><span aria-hidden="true">content</span></a>

a11y/useAnchorContent.js:1:1 lint/a11y/useAnchorContent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide screen reader accessible content when using `a` elements.
  
  > 1 │ <a><span aria-hidden="true">content</span></a>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ All links on a page should have content that is accessible to screen readers.
  

Valid

<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>