Lesson 04 · Part 1 · Links

Linking content

A link takes you somewhere. A button does something on this page. The element you pick is the role a screen reader announces, and the keyboard behaviour the browser gives you for free. Then the link text has to say where it goes.

In one minute

Goes somewhere (page, file, mail, phone) → <a href>. Does something here → <button> (lesson 05).
The accessible name of a link is its text. It must make sense read alone, in a list of links.
Tell people when a link opens a new tab, downloads a file, or leaves the page.
An image link needs alt text that says the destination. In an app, update the title when the route changes.

In plain words

A link is a road sign. "Read more" is a sign that says only "Road". If you drive past forty signs that all say "Road", you learn nothing. Screen reader users often hear all the signs at once as a list, so every sign has to name its destination.

1. Real link or clickable text?

A real <a href> is in the tab order, announced as "link", opens with Enter, can be opened in a new tab by right click, and works before your JavaScript loads. Text with a click handler has none of that. The role is what kind of thing the element is, and assistive technology announces it.

Step 1. Choose the markup, then press Tab to find it and Enter to use it.

Clickable text

Bad

Read the notes

Not in the tab order. No role of link.

Real link, real name

Fixed

Read the notes on buttons

Tab to it. The name says where it goes, not "click here".

2. The name says where it goes

The accessible name is the link text. Screen readers can list every link on a page, out of context. "PDF" is a bad name. "Invoice March (PDF)" is a good one. This is WCAG 2.4.4 (Link Purpose in Context) and, stricter, 2.4.9 (Link Purpose, link only).

Step 1. Pick the wording for four links on a news page. Then read the links list.

Links list (what the screen reader offers)

The third option uses visually hidden text inside the link: Read more<span class="sr-only"> about the bus strike</span>. It works, but the visible text must still be part of the name so voice control users can say "click Read more" (WCAG 2.5.3 Label in Name).

3. Warn about changes: new tab, downloads, mail, phone

Opening a new tab, starting a download, or launching the mail app are surprises. Someone using a magnifier may not see the new window appear, and a screen reader user may not know the old page is still open behind it. Say it in the name. Do not rely on an icon alone.

A download is a normal link, with the filename visible: Download this lesson HTML.
mailto: and tel: are still links. Say what will open: "Email support" or "Call 555 0100".
A new tab: "Pricing (opens in a new tab)". If you use target="_blank", add rel="noopener".

Step 1. Choose the kind of link, then switch the name between bare and informative.

Kind of link

4. Image links: alt is the destination

When an image is the only thing in a link, its alt text becomes the link name. It should say where the link goes, not what the picture looks like (WCAG 1.1.1, 2.4.4).

Step 1. Choose the alt text for a logo that links to the home page.

5. Apps: the link worked only if the document says so

In a client-rendered app, clicking a link swaps the content without a reload. The browser does not announce a new page, so you must. Update document.title, and move focus to the new page's heading (or announce the change). Otherwise a screen reader user hears nothing, and a keyboard user is left on a link that no longer matters.

Step 1. Choose how the router behaves, then activate a link.

Home · Northwind (simulated browser tab)

Home

Welcome to Northwind.

Common mistakes

You see	Why it is a problem	Fix
`<span onclick>` as a link	No focus, no role, no Enter.	`<a href>`
"Click here", "Read more"	Meaningless in a links list.	Name the destination.
`<a href="#">` that runs script	Announced as a link but goes nowhere.	Use a button.
New tab with no warning	Users lose their place.	"(opens in a new tab)" in the name.
Image link with alt="image"	Name is "image, link".	Alt = destination.
Route change without a title update	Screen reader says nothing happened.	Set `document.title` and move focus.

Try it yourself

Find a "Learn more" link in a product you use. Rewrite the name so it still makes sense when all links are read as a list.
Press Tab through lab 1 with the real link selected. Where does the focus ring appear?
Open a link with Ctrl/Cmd + click. Does it work? (It only does if it is a real <a href>.)

Remember

Navigates → link. Acts → button.
Link text is the name. Make it unique and descriptive.
Mention new tabs, downloads and mail or phone launches.
Image link: alt is the destination.
Single-page apps: update the title and focus on each route change.

Edit this example in the playground