`jsx-a11y/anchor-has-content`: do not encourage title attribute usage

[mikemai2awesome]

From: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-has-content.md

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

Can we please remove the mention of the HTML title attribute? It is problematic with assistive tech. aria-label and aria-labelledby should be the only alternatives accepted. [source]

Then remove this from the success criteria.

<a title='foo' />

[ljharb]

Do you have a more recent source than 15 years ago for this?

[mikemai2awesome]

@ljharb the post has been updated in 2020, it's clearly stated in the title and throughout the post.

also here's a test using MacOS + VoiceOver and Windows Edge + Narrator (it's what i have access to at the moment) to show the inconsistency across browsers and screen readers with the title attribute.

Screen.Recording.2025-09-03.at.10.45.49.AM.mov

Screen.Recording.2025-09-03.at.10.57.28.AM.mov

<a href="..." title="profile">
  <svg viewBox="0 0 576 512" width="100">
    ...
  </svg>
</a>
<a href="..." title="profile">
  <svg viewBox="0 0 576 512" width="100" role="img">
    <title>Address card</title>
    ...
  </svg>
</a>
<a href="..." title="profile">
  <svg viewBox="0 0 576 512" width="100" title="address-card">
    ...
  </svg>
</a>

both pages have the same code, just different browsers (chrome and safari). title does not behave like aria-label, it doesn't always set a link's (or any interactive element) accessible name, certain markup can throw it off. this is just one of the problems of the title attribute.

i understand this rule is about not having empty links, but i also don't think we should encourage something that's problematic.

[TMaszko]

More than happy to work on this ;)