Future Media Standards & Guidelines

Text Links Standards v2.1

1. Requirements

1.1. Link text MUST describe the destination of the link.

1.2. Title attributes SHOULD ONLY be used when the link's text does not fully describe the destination of that link.

1.3. A text link's title-attribute SHOULD further describe the destination of the link and MUST NOT only repeat the link's text (refer to the Textual Equivalent Standards for more information).

1.4. Example: If you roll over a text link that says "Email News". The title-attribute will say "Subscribe to the BBC's News Email."

1.5. Link text MUST be meaningful out of context e.g. do not use "More", "Further Information", "Visit", "Watch Now", "Download" or "Click Here". You MAY hide further descriptive text in a manner that can be found by screenreaders.

1.6. You MUST NOT use the URL as link text, UNLESS displaying dynamic contents (such as search results) where there is no alternative, or in links from within emails to BBC sites.

Top of page

2.1. A text link SHOULD have sufficient space around it for the user to be able to accurately select the link, particularly where several links appear together.

2.2. You SHOULD have a minimum of four pixels padding around a link; or equivalent, given your chosen units of measurement.

Top of page

3.1 Links MUST be clearly identifiable and distinguishable from surrounding text, by use of a presentation or context cue.

3.1.1 A presentation cue MUST be one or both of these:

  • bold and underlined
  • a different colour (all colours used MUST comply with colour contrast standards, including being visible to colour blind users).

3.1.2 A context cue is when a link's position e.g. left-hand navigation or related links box conveys that it is clickable. In these cases use of bold is sufficient however visual elements SHOULD be used to indicate their significance, e.g. graphics or bullets.

3.2 You MUST use a mouse-over state-change to indicate that a piece of text is a link. This MAY be either an underline or a change of colour. Underlines SHOULD NOT disappear on mouse-over UNLESS the link is a graphic and has some other graphic form indicating a change of state.

3.3 Your visited link colour SHOULD be different from the non-visited links' colour. This colour difference MUST be evident to colour blind users (see Viz check).

Top of page

4. Examples of context

Example 1: Category contents panel

Text in category contents panels like this example (e.g. a bold heading, plus a comma-delimited list) will be assumed by the user to be links, as these are often used on bbc.co.uk portal pages.

Screenshot of a category contents panel

Example 2: Left-navigation region

The left-navigation region is used to hold local and global navigation links. Thus any text in this region will be assumed by the user to be a link.

Screenshot of a left-navigation region

Example 3: Right navigation

Links that relate to the copy in the main content area may be listed in a right-navigation panel. These links should be a list, under a heading.

Screenshot of a right-navigation panel

Top of page

5. Triggers

This standard may be extended to also give:

  • Guidance on how links should look & feel in graphical & multimedia (non-HTML) content in future.
  • Standards for providing visual cues for external / internal links.

Top of page

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.