# Links Without Descriptive Text

**MUST** · **ID:** `content-descriptive-link-text` · **Category:** content
**Source:** [WCAG](https://www.w3.org/WAI/WCAG21/quickref/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-descriptive-link-text

> MUST: Link text must describe its destination - avoid generic text like "click here" or "read more". Links should make sense out of context for screen reader link lists.

Links should have descriptive text, not generic phrases like "click here"

WCAG 2.1 Success Criterion 2.4.4 Link Purpose (In Context), Level A. Screen reader users often navigate by pulling up a list of links, stripped of surrounding prose — "click here" and "read more" tell them nothing. Note: this principle previously carried a Rams badge, but Rams has no descriptive-link-text rule (its only link check is "Missing link destination"), so it is now attributed to the WCAG criterion it actually comes from.

## Bad — do not do this

`content-descriptive-link-text-bad`

```tsx
export function DescriptiveLinkTextBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Generic Link Text</h4>
        <div className="space-y-3 p-3 bg-muted rounded-lg">
          <p className="text-sm">
            To see our documentation,{' '}
            <a href="#" className="text-primary underline hover:no-underline">
              click here
            </a>
            .
          </p>
          <p className="text-sm">
            For support,{' '}
            <a href="#" className="text-primary underline hover:no-underline">
              click here
            </a>
            .
          </p>
          <p className="text-sm">
            <a href="#" className="text-primary underline hover:no-underline">
              Read more
            </a>
          </p>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code className="text-error">{'<a href="#">click here</a>'}</code>
        </div>
      </div>
      <p className="text-xs text-error">
        Screen reader lists: "click here, click here, Read more" - meaningless
      </p>
    </div>
  );
}
```

## Good — do this

`content-descriptive-link-text-good`

```tsx
export function DescriptiveLinkTextGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Descriptive Link Text</h4>
        <div className="space-y-3 p-3 bg-muted rounded-lg">
          <p className="text-sm">
            Explore our{' '}
            <a href="#" className="text-primary underline hover:no-underline">
              product documentation
            </a>{' '}
            to get started.
          </p>
          <p className="text-sm">
            Questions? Contact{' '}
            <a href="#" className="text-primary underline hover:no-underline">
              customer support
            </a>
            .
          </p>
          <p className="text-sm">
            <a href="#" className="text-primary underline hover:no-underline">
              View pricing plans
            </a>
          </p>
        </div>
        <div className="mt-3 bg-muted rounded p-2 font-mono text-xs">
          <code>{'<a href="#">View pricing plans</a>'}</code>
        </div>
      </div>
      <p className="text-xs text-success">
        Screen reader lists: "product documentation, customer support, View pricing plans"
      </p>
    </div>
  );
}
```

## References

- [WCAG 2.1 SC 2.4.4 (Understanding)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html)
- [WCAG 2.1 SC 2.4.4 (Quick Reference)](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context)