jsx-a11y/anchor-ambiguous-text

People who use a screen reader often jump from link to link, or open a list of all links on the page. There, a link that reads "here" or "learn more" has no sentence around it, so nobody can tell where it goes.

Case, punctuation and extra spaces are ignored. An aria-label on the link or on an element inside it counts as its text, and so does the alt of an img inside it. Elements with aria-hidden don't.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"jsx-a11y/anchor-ambiguous-text" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"jsx-a11y/anchor-ambiguous-text" = ["error", {
  words = ["click here", "here", "link", "a link", "learn more"],
}]

Examples#

example.jsx3 problems

const pricing = <p>To see our prices, <a href="/pricing">click here</a>.</p>;
const docs = <a href="/docs">Learn more!</a>;
const home = <a href="/"><img src="/home.png" alt="link" /></a>;

example.jsxNo problems

const pricing = <p>See <a href="/pricing">our prices</a>.</p>;
const docs = <a href="/docs">Learn more about plugins</a>;
const home = <a href="/"><img src="/home.png" alt="Home page" /></a>;

Options#

Option	Default	What it does
`words`	`["click here", "here", "link", "a link", "learn more"]`	The texts to report, in lower case. Your list replaces the default.

example.jsxwith { "words": ["read more"] }1 problem

const more = <a href={post.url}>Read more</a>;

example.jsxwith { "words": ["read more"] }No problems

const pricing = <a href="/pricing">click here</a>;