Accessible Links

Links are the threads of the web. Everything people do online, from reading an article to paying a bill, depends on following links. Yet links are also one of the places where accessibility most often goes wrong: "click here" text that means nothing out of context, buttons dressed up as links, links that cannot be reached with a keyboard, and links that open new tabs without warning.

The good news: the a element is accessible by default. It can be focused, activated with Enter, announced as a "link," and listed by screen readers. Your job is to not break that, and to give every link a clear name and a clear look.

What You Will Learn

How to write link text that makes sense on its own
When to use a link and when to use a button
Why a link needs an href
How to make links visible, and not rely on colour alone
How to handle new tabs, downloads, email, and phone links
How to keep external links safe
How to check your links

The Big Idea

HTML Code
Links List Lab

index.html
<!-- Bad: the text means nothing out of context -->
<p>To get recipes, <a href="/newsletter">click here</a>.</p>
<p>Sourdough: <a href="/sourdough">Read more</a></p>
<p>Rye: <a href="/rye">Read more</a></p>

<!-- Good: each name says where it goes -->
<p>To get weekly recipes, <a href="/newsletter">join the newsletter</a>.</p>
<p>Sourdough: <a href="/sourdough">Read the sourdough recipe</a></p>
<p>Rye: <a href="/rye">Read the rye recipe</a></p>

Switch the lab to "a list of links only," first with the vague text, and then with clear text. The second list is one you could actually use.

Link Text That Works

Screen reader users often jump from link to link, or call up a list of all the links on a page, without the text around them. Sighted users skim too, and voice control users say the link text to click it. So the best link text is meaningful on its own.

Say where the link goes, or what it does: "Read the sourdough recipe," not "click here."
Avoid "click here," "here," "read more," "more," and "link." If you must use "Read more," add the subject: "Read more about sourdough."
Be unique. Links that go to different places should have different names.
Put the important words first. "Sourdough recipe" is easier to skim than "Read the recipe for sourdough."
Do not include the word "link." The screen reader already says it.
Keep it short, a phrase and not a sentence.
Do not use a web address as the link text, unless the address itself is what you are teaching. A screen reader reads "h t t p s colon slash slash...", letter by letter.
Link the right words. Link the whole phrase that describes the destination, not one random word, and do not run several links together.
Use the same name for the same destination, and different names for different destinations, across the whole site.

info

WCAG success criterion 2.4.4 (Link Purpose, In Context) allows a link's purpose to be worked out from the surrounding text (the sentence, paragraph, or list item). Clear link text is still better, because it works in a links list, and in every other situation too.

When "Read more" Is the Design

Sometimes a design needs short repeating text such as "Read more" on every card. You still have options:

<!-- Option 1: visually hidden text (using your framework's sr-only class) -->
<a href="/rye">Read more<span class="sr-only"> about rye bread</span></a>

<!-- Option 2: aria-label that STARTS with the visible text -->
<a href="/rye" aria-label="Read more about rye bread">Read more</a>

Both keep "Read more" visible, and give the link a unique name. In option 2, the name contains the visible text, which is required by WCAG 2.5.3 (see Accessible Names). One caution: some automatic translation tools may not translate aria-label, so option 1 is often safer for multilingual sites. Test with the tools your audience uses.

Link or Button?

The question is: does it take you somewhere, or does it do something?

If it...	Use
Goes to another page, or another place on the page	A link: `a href`
Does an action (submit, open a menu, save, delete)	A button: `button`
Toggles something open or closed	A button, with `aria-expanded`
Downloads a file	A link, with `download`

Why does it matter? Because they behave differently:

A link is activated with Enter. A button is activated with Enter and Space.
A screen reader announces "link" or "button," which sets an expectation: a link takes you somewhere, a button does something.
Links can be opened in a new tab, copied, and bookmarked. Buttons cannot.

<!-- Bad: not focusable, not announced, no keyboard support -->
<span class="link" onclick="goTo('/recipes')">Recipes</span>
<a href="#" onclick="openMenu()">Menu</a>

<!-- Good -->
<a href="/recipes">Recipes</a>
<button type="button" aria-expanded="false">Menu</button>

An a without an href is not a link at all: it is not in the Tab order, and it is not announced as a link. And href="#" or href="javascript:..." are fake links. Use a real URL for navigation, and a button for actions. The next lesson, Accessible Buttons, goes further.

Make Links Easy to See

Links must be recognizable without relying on colour alone (WCAG 1.4.1). About one in twelve men has some colour vision difference, and many people use screens in bright sunlight.

Keep the underline in body text. It is the strongest signal that something is a link.
If you remove the underline, the link needs a contrast of at least 3:1 against the surrounding text, plus another cue on hover and focus (such as a bold or underline). And the link colour must have 4.5:1 against the background.
Show a clear focus style. Never remove the outline without a better replacement. See Keyboard Accessibility.
Make hover, focus, and visited states distinct, but do not depend on colour for the difference between them.
Give links room. Small, tight links are hard to tap. WCAG 2.2 adds a minimum target size (24 by 24 CSS pixels, with exceptions, including links inside a sentence), but bigger is kinder, especially in lists and menus.

a {
  color: #0b5cad;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

a:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

Links That Open New Tabs

Opening a link in a new tab or window (target="_blank") can confuse people: a screen reader user may not realise a new tab has opened, and the Back button no longer works. Many users also prefer to choose for themselves, and can already open any link in a new tab.

Prefer the same tab in most cases.
If you do open a new tab, say so in the link, with text such as "(opens in a new tab)."
Add rel="noopener". Modern browsers treat target="_blank" this way by default, but older ones may not, so it is a safe habit.
Never open new windows automatically, or without a clear reason, such as a form in the middle of being filled out.

Use the builder below to see how the pieces fit together, and what the feedback says.

Files, Email, and Phone Links

Links are not just for pages. The link text should always say what will happen:

Downloads: include the file type and size, such as "Download the menu (PDF, 1 MB)." People on slow or metered connections can then choose. The download attribute only works for same-site files in most browsers.
Email: use mailto:, and show the address in the text so people can copy it if their device has no email app.
Phone numbers: use tel:, with the international format (+1 555 010 1234), so it works from anywhere.
Other languages: when a link goes to a page in another language, say so, and add hreflang to the link. If the link text is in another language, mark it with lang.

HTML Code
Link Builder

index.html
<!-- A new tab, announced in the text -->
<a href="https://example.org/guide" target="_blank" rel="noopener">
  Bread science guide (opens in a new tab)
</a>

<!-- A file download, with its type and size -->
<a href="/downloads/menu.pdf" download>Download the menu (PDF, 1 MB)</a>

<!-- Email and phone -->
<a href="mailto:hello@example.com">Email hello@example.com</a>
<a href="tel:+15550101234">Call us on +1 555 010 1234</a>

<!-- A page in another language -->
<a href="/es/" hreflang="es" lang="es">Leer en español</a>

http://127.0.0.1:5500/index.html

Where does the link go?

Link text

Address (URL or path)

Open in a new tab

HTML:

<a href="/recipes/sourdough">Read the sourdough recipe</a>

A screen reader may say: link, "Read the sourdough recipe"

Feedback:

This looks good.

Links Inside the Same Page

Links that jump to another part of the same page (a table of contents, a "skip to content" link) use a fragment, such as href="#recipes", with a matching id:

<a href="#recipes">Jump to the recipes</a>

<h2 id="recipes" tabindex="-1">Recipes</h2>

Browsers usually move keyboard focus to the target as well, but behaviour has differed in the past. Adding tabindex="-1" to a heading or section that you link to is a safe way to make the next Tab press start from the right place. See Focus Management.

Links and Images, and the Current Page

An image in a link: its alt text becomes the link's name, so describe where the link goes. See Alt Text.
Icon-only links (a social media icon, say) need a name too: aria-label="Baker's Corner on Instagram".
In a navigation menu, mark the link for the current page with aria-current="page". Screen readers say "current page," and you can style it with a[aria-current="page"].
Group related links in a nav (with a name if there are several) and a list, so screen reader users hear "list, 5 items."

<nav aria-label="Main">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/recipes">Recipes</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Check Your Links

The checker below reads every a in a snippet of HTML, and flags missing hrefs, fake links, vague text, web addresses as text, unannounced new tabs, same-name links with different destinations, and downloads with no file details.

http://127.0.0.1:5500/index.html

On a real site, you can also:

Press Tab through the page. Is every link reachable, and clearly marked when focused?
Use your screen reader's links list, or the Accessibility panel in DevTools, and read the names without the page.
Run an automated checker (such as Lighthouse or axe) for empty links and low contrast.
Check them with voice control: say "click" and the link text.

Good Habits

Write link text that works on its own.
Use a real a href for navigation, and a button for actions.
Keep the underline for links inside text.
Show a clear focus style.
Tell people when a link opens a new tab, downloads a file, or leaves your site.
Say the file type and size for downloads.
Give identical names to identical destinations, and different names to different ones.
Mark the current page with aria-current="page".
Check your links with the keyboard, a links list, and an automated tool.

Accessibility Checklist

Security and Privacy Notes

Keep link text honest. Do not show a trusted address (yourbank.com) as the text of a link that goes somewhere else. It is a common phishing trick, and it can also fool screen reader users, who cannot see the real address on hover.
Use rel="noopener" for target="_blank" links, so the new page cannot control your page through window.opener. Add noreferrer if you do not want to send your address as the referrer, but remember that it also hides where your visitors came from.
Never use javascript: links. They are hard to make accessible, they can be abused, and they are blocked by a strict Content Security Policy.
Do not put private data in URLs. Tokens, email addresses, and session IDs in a link can be read aloud, saved in browser history, shared by accident, and sent to other sites as referrers. Use POST requests or short-lived tokens instead.
Be careful with mailto:. Addresses in plain HTML are collected by spam bots. Use a contact form if spam is a concern, and tell people if you do.
The download attribute only works for same-origin files in most browsers, so do not rely on it for files hosted elsewhere.
Link to trustworthy sites, and tell people when they are leaving yours.

Global Audience Notes

Translate link text with the page, and avoid words like "here" and "more," which translate badly and give no context. A clear phrase survives translation.
Set lang and hreflang for links to content in other languages, so voices pronounce them correctly, and people know what they will find.
Web addresses with non-Latin characters (internationalized domain names) can be read strangely by screen readers. Use words as the link text, and keep the address in the href.
Right-to-left languages: link punctuation, parentheses (such as "(PDF, 1 MB)"), and mixed English words can display in an unexpected order. Test your links in a right-to-left layout.
Slow or costly data: always give file sizes. A 50 MB download can be expensive for people on mobile data plans.
Phone numbers: use international format with the country code. Local formats only work for people in your country.
Do not use symbols alone (arrows, icons) as link names. They can be read oddly in different languages, or not at all.

Common Mistakes to Avoid

"Click here" and "read more" links.
Several different links with the same name.
Using a with no href, or href="#", for actions.
Using div or span with a click handler as a link.
Removing the underline, with no other cue.
Removing the focus outline.
Opening new tabs without saying so.
Using a web address as link text.
A downloadable file with no type or size.
Image links with empty alt text and no other text.
Link text that does not match the destination page.
Never testing with a keyboard or a links list.

Practice Time

Try these in your browser and your editor:

Use the links list lab with and without clear text. Describe the difference.
Rewrite five "Read more" links on a page you built so each one makes sense alone.
Use the link builder for each of its five kinds, and read the feedback.
Run the checker on the messy page, fix every item, and run it again.
Replace a span with an onclick by a real link or button, as fits.
Add aria-current="page" to your navigation, and style it.
Open a screen reader's links list (or DevTools) on a site you like. Which names are weak?
Remove the underline from your links, then measure the contrast with the surrounding text.
Add a download link with the file type and size.
Bonus: Tab through your site with no mouse. Write down every link with weak text or weak focus.

Quick Recap

Click a question to check your answer.

1. What makes good link text?

It says where the link goes, or what it does, and makes sense on its own, because people often hear or see links without the text around them.

2. When do you use a link, and when a button?

A link takes you somewhere (a href). A button does something (submit, open, save, toggle).

3. Why is an a without an href a problem?

It is not a real link: it is not reachable with Tab, and it is not announced as a link.

4. How should you handle a link that opens a new tab?

Prefer the same tab. If you do open a new one, say so in the link text, and add rel="noopener".

5. Why keep the underline on links in text?

Links must not rely on colour alone to be recognised (WCAG 1.4.1). The underline is the clearest cue.

6. What should a download link tell you?

The file type and size, such as "Download the menu (PDF, 1 MB)."

Key Takeaways

Links take you somewhere. Buttons do something. Use the right one.
Link text must make sense out of context. Avoid "click here" and bare "read more."
Every link needs an href, and a visible name.
Do not rely on colour alone. Keep the underline, and a clear focus style.
Tell people about surprises: new tabs, downloads (with type and size), and other languages.
Keep links honest and safe: use rel="noopener", no private data in URLs, and no misleading text.
Test by keyboard, with a links list, and with an automated checker.

Next, learn how to build buttons that work for everyone in Accessible Buttons.

What You Will Learn​

The Big Idea​

Link Text That Works​

When "Read more" Is the Design​

Link or Button?​

Make Links Easy to See​

Links That Open New Tabs​

Files, Email, and Phone Links​

Links Inside the Same Page​

Links and Images, and the Current Page​

Check Your Links​

Good Habits​

Accessibility Checklist​

Security and Privacy Notes​

Global Audience Notes​

Common Mistakes to Avoid​

Practice Time​

Quick Recap​

Key Takeaways​