Links

A cartoon character floats upwards holding the strings of two balloons and a balloon dog

Links go somewhere. Buttons do something. On your website you mostly make links, and the only thing a link needs is words that say where it goes.

Screen reader users pull up a list of every link on the page, the same way they pull up the headings. A list that reads "find out more, find out more, click here, here, find out more" tells them nothing. The person using a magnifier sees one link at a time and has the same problem. So does Google.

Say where it goes

  • Use the name of the thing you are linking to. "Book a place at Saturday club on Eventbrite."
  • Put the link at the end of the sentence, so the sentence makes sense before the reader hits it.
  • Start with the useful word. "Saturday club dates" beats "Dates for the Saturday club".
  • Keep links in paragraphs underlined. People have expected that since 1995 and it still works.
  • If a link opens a new tab, say so in the link text: "Eventbrite (opens in new tab)". Better still, let it open in the same tab, which is what the back button expects.
  • Show email addresses as the address itself, so people can copy it.
  • "Click here", "here", "find out more", "read more", "this link".
  • Pasting the web address as the link text. A screen reader will read every letter of https://www.eventbrite.co.uk/e/872639481 out loud.
  • The same link text pointing at 2 different places on one page.
  • Links you can only tell apart by colour. The colour lesson comes back to this.

Not this: "Our next coffee morning is on Tuesday. Click here for details."

This: "Our next coffee morning is on Tuesday. Read about the Halifax coffee morning."

Icons and pictures as links

The Facebook and Instagram icons in your footer are links with no words. That is fine as long as the icon has a name a screen reader can use. Your platform's own social icons usually do. An icon you uploaded yourself usually does not, and WAVE will flag it as an empty link. Give it alt text that says where it goes, "Our Facebook page", not "Facebook logo".

The same goes for a picture that is a link. Its alt text is the link text. "Saturday club booking form" tells the reader what happens when they select it.

Big enough to tap

A link in a list on a phone needs space around it. If your list of groups is 12 links with no gap between them, a thumb will hit the wrong one. The guidelines ask for a target about the size of a fingertip, 24px at the very least and 44px to be comfortable. Most themes handle this. Lists of links crammed into a sidebar do not.

Check it

  1. Read every link on a page out loud, the link text only. If you hear "find out more" more than once, fix them.
  2. Run WAVE. Empty links show as red errors. Redundant links, 2 links next to each other going to the same place, show as yellow alerts.
  3. On your phone, open your list of services or groups and try to tap each link in turn with your thumb.

Search your site for the words "click here". Most editors have a search box, and some platforms let you search all pages at once. Rewrite every one you find. It is the fastest accessibility fix there is.

In the guidelines: 2.4.4 Link purpose (in context) (opens in a new tab) (A), 2.5.8 Target size (minimum) (opens in a new tab) (AA).

Next: Images, and text trapped in images →

Discussion

Log in to join the discussion. Your comment will be checked before it appears publicly.