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

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