Main content

Displaying items by tag: Web

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

Procedure Expected Result Type
Test every foreground and background colour combination against the Snook colour contrast checker Every combination must pass against the WCAG 2.0 AA standard Manual / Tool

Published in Color

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

Procedure Expected Result Type
For every <a> element check the visual style All <a> elements must be visually distinguishable from the surrounding content Manual
For every <a> element check the visual style of the :hover state All <a> elements must have a visually distinguishable style between :link and :hover states Manual

Published in How To

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

Procedure Expected Result Type
For every <a><button>, or other focusable element check the visual style of the:focus state All <a><button>, and other focusable elements must have a visually distinguishable style between their regular and:focus states Manual

Published in How To

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

Procedure Expected Result Type
Identify each control on the page Navigate the page with a keyboard and ensure that each control is accessible Manual

Published in How To

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

Procedure Expected Result Type
Use WAVE Toolbar or similar to generate a document outline There must be exactly one <h1>; No heading levels may be skipped after the <h1>; Tool
Search document source for ‘</h1>’, ‘</h2>’, ‘</h3>’, ‘</h4>’, ‘</h5>’, ‘</h6> There must be exactly one instance of ‘</h1>’ Each heading must be followed by content or another heading of one level deeper Manual

Published in How To

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

Procedure Expected Result Type
Search source for <html>element <html> element must have a lang attribute with a value equal to the language code for the main page content language Manual
Validate the page against the W3C Internationalization Checker There must not be a ‘The html tag has no language attribute’ warning, and the Language HTML tag value should match the language code for the main page content language Tool
Search source for each instance of a language change Each instance should have a containing element with a lang attribute with a value equal to the language code for the language Manual

Published in How To
Page 1 of 2