Link Text

You can use a screen reader to quickly skim a page by just listening to link text. Link text that makes sense out of context is very useful, “read more” or “click here” not so much. Use the same text for the same link every time. “Contact us” shouldn’t change to “get in touch”.

Adding link text

Say I want to link to my page about colour contrast. The link in the navigation is colour”, so colour” is my link text.

colour is my link text

I select the word colour

the word "colour" is highlighted

and then pick the link icon. It looks like a line between two brackets

the "link" icon has been chosen

you’ll see “search or type url”. If you are linking to a page that’s not on your site enter the URL. If you are linking to page on your site, search for it.

"search or type url"

When you start searching some recommendations will pop up. Choose the one you want.

start to type "col" and see search results

Add the link, hit enter and now colour goes to the page.

Styling Links

Underlines are the accepted convention – everyone knows they mean that’s a link. Don’t use underlines for emphasis (bold works, right?). People will keep trying to click your emphasized text.

Opening links in a new tab

Opening links in a new window takes control away from your users. It disables the “back” button. It makes it hard to use for a lot of people – including the ones who have 30 browser tabs open. If you really need to open links in a new window warn your users.