WebAIR

(if yes) Do you also use semantic markup to convey the same information (e.g. by using a heading element)? (TXT11)

Why is this important?

To ensure that the information on a webpage is conveyed to everyone, colour should be used only in addition to semantic markup. In the example of the colour of the paragraph being changed to signify it is a heading, it would be much more appropriate to use a heading element instead. Alternatively, different patterns or differences in font may be used to convey differences, although this would not be conveyed to a screen reader.

How to fix the problem

Whenever colour coding has been used to convey information, make sure there is another means of conveying the same same information. This can usually be achieved by using the appropriate semantic markup (such as using a heading element to markup heading text) but it can also be achieved by a text description, or different patterns, or differences in font etc.

Example

//An example of colour coding that is used without the appropriate semantic markup
<p style="color: green">This is the title of this section</p>
<p>This is the content of this section. It is made up of several sentences. Each of the sentences contains a number of words.</p>

//An example of colour coding that is used with the appropriate semantic markup
<h1>This is the title of this section</h1>
<p>This is the content of this section. It is made up of several sentences. Each of the sentences contains a number of words.</p>

Further Information

  1. http://www.un.org/webaccessibility/1_visual/12_notcolouralone.shtml