Link text and styles

Link text

For reasons of accessibility, usability and Search Engine Optimisation link text should be descriptive of the page the link goes to. Acceptable practice includes:

using the title or H1 of the destination page;
using a keyword of why you want the user to visit that page (as above).

Good examples

Bad examples

* This link is OK if used within the agricultural site. If you are somewhere else on the website, for example, a press release it would be better to say Agricultural publicity events.

Accessibility

A special style we have developed to improve the accessibility of a page without detracting from its usability is to hide text from sighted users, who can see the text within context but to show it to screen reader users, who cannot.

Code:
<a href="link"><span class="hide">Agricultural </span>Publicity events</a>

The sighted users sees: Agricultural Publicity events. While the sreen reader user gets Agricultural Publicity events.

Link Styles

Link styles will vary depending on their whereabouts in the page.

Links in lists

Link default
You'll see this inside ordinary paragraphs and list items.

Link arrow
The standard for lists of links, for example when linking to several other webpages or resources.

Link listarrowlong
As above, but reserved for very long lists, where too much bold could be hard on the eye.

Linklist
Use this when linking to an external website.

Linking to other media

In these examples file size and image are included in the link. This informs Screen Reader users that they are being taken to a document in another format, and informing them what that format is and how big it is.

Javascript is used to open the link in a new window and adds the title " (opens in a new window)". If you add your own title the two are appended and read something like "My title (opens in a new window)" Compare the two links above, the second has a title added.

Links in the text are always underlined for clarity

Next: Using highlights