All color combinations must pass the WCAG 2.0 AA-compliant colour contrast check in accordance with the Snook colour contrast checker.

This is a ratio of 4.5:1 for text 18pt or less in size, and 3:1 for text larger than 18pt or text that is bold and larger than 14pt.

Where it cannot be adapted, stylised text used in pre-existing broadcast logos and branding is exempt from this requirement.

Rationale

If there is sufficient contrast between foreground and background colours, particularly between text and its background but also applicable to the keys of graphs and similar, then users with moderately low vision or with colour deficiencies that affect contrast to a minor degree are more likely to be able to access BBC content without requiring additional assistive technologies.

Techniques

n/a

Tests

Links that are part of general editorial content must self evident, identifiable by their visual style, and distinguishable from the surrounding content.

Text links must have a mouse-over state change.

Rationale

To aid discoverability all links must be made self-evident with their visual style.

Appropriate styles are:

• underlined
• a different colour, meeting contrast standards, to the surrounding text

When hovered over links should have a change in style as confirmation that they are links.

Appropriate styles are:

• adding an underline to previously not underlined content
• a change in colour, with a sufficiently different contrast to meet the contrast standard compared with the default state colour

Techniques

Pass:

<style>
    body {
        background: #fff;
        color: #000;
    }

    a {
        color: #005580;
        text-decoration: none;
    }

    a:focus,
    a:hover {
        background: 
        text-decoration: underline;
    }
</style>

<a href="http://www.bbc.co.uk/">BBC</a>

Fail:

<style>
    body {
        background: #fff;
        color: #000;
    }

    a {
        color: #000;
        text-decoration: none;
    }
</style>

<a href="http://www.bbc.co.uk/">BBC</a>

Tests

All focusable elements must have a clearly identifiable visual style when they have focus

Rationale

Sighted keyboard users do not have the explicit association between pointer and content that pointing device users have, so it is important that they are aware at all times what element currently has focus and which element keyboard interactions will operate on.

The currently focussed element should therefore have a visual style that makes it clearly distinguishable from the surrounding content.

Techniques

Pass:

<style>
    a {
        text-decoration: none;
    }
    a:focus {
        text-decoration: underline;
    }
</style>

Fail:

<style>
    a {
        outline: none;
    }
</style>

Test

Controls for JavaScript enhanced interactions must be <a>, <button>, or <input>[type=checkbox,color,date,datetime,datetime-local,email,file,month,number,password,radio,range,search,tel,text,time,url,week]elements if that is the only mechanism for controlling them.

<a> elements used for controls must have an href attribute.

Controls that have no purpose without JavaScript must not be added to the page before the associated code is available capable of running.

Rationale

When creating controls for user interaction with JavaScript enhanced features, for example a carousel with previous and next controls, the controls must be implemented with elements that provide natively focusable elements with click, keydown, and focus events so they are accessible to keyboard as well as pointing device users. If there is an alternative method of controlling the feature, for example a carousel that automatically displays new content when it receives content then controls that are only available to pointing device users can be used.

In general, use <a> elements when there is a URL associated with the interaction when JavaScript is not enabled, and<button> elements for interactions that don’t have an associated URL.

<a> elements without a href attribute are not keyboard accessible, and therefore must not be used for controls.

When there is no core (non-JavaScript) interaction then the control must not be added to the document before the associated JavaScript is capable of running as this would lead to controls that apparently do nothing, potentially causing confusion to users.

Techniques

Pass:

<button type="button">Open panel</button>

<ul>
    <li><a href="#newstab">News</a></li>
    <li><a href="#sporttab">Sport</a></li>
    <li><a href="#entertainmenttab">Entertainment</a></li>
</ul>

Fail:

<a href="#">Open panel</a>

<ul>
    <li><a>News</a></li>
    <li><a>Sport</a></li>
    <li><a>Entertainment</a></li>
</ul>

Tests

A document must have exactly one <h1> element.

Heading levels after the document <h1> element must be sequential and must notskip heading levels.

Heading elements must be followed by content.

Rationale

A logical heading structure is invaluable for users of screen readers and similar assistive technologies to help navigate content.

Users should be able to use the document’s <h1> identify its main content. Documents should have one main subject.

Heading levels should not be skipped as a predictable document outline is an important factor for understandability.

Headings should not be used for non-heading purposes, i.e. to identify blocks of content. A heading should always be followed either by non-heading content or by a heading of one level deeper.

Techniques

Pass:

<div role="main">
    <h1>Main page content</h1>

    <p>Lorem ipsum…</p>

    <h2>Secondary content</h2>

    <h3>Tertiary content one</h2>

    <ul>
        <li>Lorem</li>
    </ul>

    <h3>Tertiary content two</h3>

    <ul>
        <li>Ipsum</li>
    </ul>
</div>

Fail:

<div role="main">
    <h3>Main content</h3>

    <h2>Secondary content</h2>

    <h2>Tertiary content</h2>

    <p>Lorem ipsum…</p>
</div>

Tests

The main language of the page must be specified.

Changes to language within the page must be indicated.

Rationale

Assistive technologies such as screen readers have support for different languages, allowing for appropriate pronunciation.

Techniques

Pass:

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <title>Language techniques</title>
</head>
<body>
    <h1>Techniques for language in HTML</h1>
    <p><span lang="es">Cinco de Mayo</span> is Spanish for "fifth of May"</p>
</body>
</html>

Fail:

<!DOCTYPE html>
<html>
<head>
    <title>Language techniques</title>
</head>
<body>
    <h1>Techniques for language in HTML</h1>
    <p>Cinco de Mayo is Spanish for "fifth of May"</p>
</body>
</html>

Tests