ContextQMD
Back to Biomejs

noAmbiguousAnchorText

src/content/docs/linter/rules/no-ambiguous-anchor-text.mdx

latest11.1 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="HTML" icon="seti:html"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.10` - Diagnostic Category: [`lint/nursery/noAmbiguousAnchorText`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`jsx-a11y/anchor-ambiguous-text`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-ambiguous-text.md)

How to configure

json
{
	"linter": {
		"rules": {
			"nursery": {
				"noAmbiguousAnchorText": "error"
			}
		}
	}
}

Description

Disallow ambiguous anchor descriptions.

Enforces <a> values are not exact matches for the phrases "click here", "here", "link", "a link", or "learn more". Screen readers announce tags as links/interactive, but rely on values for context. Ambiguous anchor descriptions do not provide sufficient context for users.

Examples

Invalid

html
<a>learn more</a>
<pre class="language-text"><code class="language-text">code-block.html:1:1 <a href="https://biomejs.dev/linter/rules/no-ambiguous-anchor-text">lint/nursery/noAmbiguousAnchorText</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">No ambiguous anchor descriptions allowed.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>&lt;a&gt;learn more&lt;/a&gt; <strong> │ </strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Ambiguous anchor descriptions do not provide sufficient context for screen reader users. Provide more context to these users.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>

Valid

html
<a>documentation</a>

Options

words

The words option allows users to modify the strings that can be checked for in the anchor text. Useful for specifying other words in other languages.

Default ["click here", "here", "link", "a link", "learn more"]

json
{
	"linter": {
		"rules": {
			"nursery": {
				"noAmbiguousAnchorText": {
					"options": {
						"words": [
							"click this"
						]
					}
				}
			}
		}
	}
}

Invalid

html
<a>click this</a>
<pre class="language-text"><code class="language-text"></code></pre> </TabItem> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.10` - Diagnostic Category: [`lint/nursery/noAmbiguousAnchorText`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`jsx-a11y/anchor-ambiguous-text`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-ambiguous-text.md)

How to configure

json
{
	"linter": {
		"rules": {
			"nursery": {
				"noAmbiguousAnchorText": "error"
			}
		}
	}
}

Description

Disallow ambiguous anchor descriptions.

Enforces <a> values are not exact matches for the phrases "click here", "here", "link", "a link", or "learn more". Screen readers announce tags as links/interactive, but rely on values for context. Ambiguous anchor descriptions do not provide sufficient context for users.

Examples

Invalid

jsx
const Invalid = () => <a>learn more</a>;
<pre class="language-text"><code class="language-text">code-block.jsx:1:23 <a href="https://biomejs.dev/linter/rules/no-ambiguous-anchor-text">lint/nursery/noAmbiguousAnchorText</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">No ambiguous anchor descriptions allowed.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>const Invalid = () =&gt; &lt;a&gt;learn more&lt;/a&gt;; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Ambiguous anchor descriptions do not provide sufficient context for screen reader users. Provide more context to these users.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre>

Valid

jsx
const Valid = () => <a>documentation</a>;

Options

words

The words option allows users to modify the strings that can be checked for in the anchor text. Useful for specifying other words in other languages.

Default ["click here", "here", "link", "a link", "learn more"]

json
{
	"linter": {
		"rules": {
			"nursery": {
				"noAmbiguousAnchorText": {
					"options": {
						"words": [
							"click this"
						]
					}
				}
			}
		}
	}
}

Invalid

jsx
const Invalid = () => <a>click this</a>;
<pre class="language-text"><code class="language-text">code-block.jsx:1:23 <a href="https://biomejs.dev/linter/rules/no-ambiguous-anchor-text">lint/nursery/noAmbiguousAnchorText</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">No ambiguous anchor descriptions allowed.</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>const Invalid = () =&gt; &lt;a&gt;click this&lt;/a&gt;; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Ambiguous anchor descriptions do not provide sufficient context for screen reader users. Provide more context to these users.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> </code></pre> </TabItem> </Tabs>