Understanding Accessibility

Guideline 2. Don't rely on colour alone.

Checkpoint 2.1 - Ensure that all information conveyed with colour is also available without colour, for example from context or markup

How do I do it?

Compliance with this checkpoint involves links being either different from normal text (underlined, italicised, bold, in buttons etc) or in obvious navigation bars.

dash-underline

dash-underline example

This can be done simply in the external style sheet. A sample style for a link with a dash underline is given below:

a:link {
font: small "Comic Sans MS";
color: #006699;
text-decoration: none;
border-bottom: 1px dashed #006699;
}

How do I check that it meets the WCAG criteria?

Links should be in an obvious navigation bar or have a font effect applied or else they will fail the check. For example, where in-text links are found, they must have a font effect applied. Font effects applied to links should not be used for non-linked text. Other colour specific content, where not marked up, will also cause the page to fail.

An obvious navigation bar will have either:

  • a separate vertical or horizontal grouping of more than two links;
  • a background colour effect;
  • a border;
  • a graphic which implies a navigation bar.

Related Links:

guideline 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14