Control styles

As users go through a page they should be able to understand what elements they can interact with or use to control their experience.

Recommendations

Visually style links that are within general editorial content so that they are self-evident and distinguishable from the surrounding content.

Change the visual style of all links, buttons, inputs and other interactive elements on hover and focus. Hover and focus styles can be similar.

Visually style links differently from buttons.

Why it matters

To aid discoverability, all links must be self-evident by their visual style.

Appropriate styles include:

  • underlined,
  • a different colour, in combination with another style and sufficient contrast with the surrounding text.

When hovered over and/or focussed on, all interactive elements should have a change in style, as confirmation that they are interactive.

Appropriate styles for links include:

  • adding an underline to previously not underlined content,
  • a change in colour, in combination with another style and sufficient contrast with the default state colour.

Links and buttons require some users to use different controls to activate them, so it is helpful if they do not look the same.

Examples

Recommended:

<style>
    body {
        background: #fff;
        color: #000;
    }
    a {
        color: #006EEE;
        text-decoration: none;
        font-weight: bold; /* doesn't rely only on colour */
    }
    a:focus,
    a:hover {
        text-decoration: underline;
    }
</style>
<a href="http://www.bbc.co.uk/">大象传媒</a>

Not recommended:

<style>
    body {
        background: #fff;
        color: #000;
    }
    a {
        color: #000;
        text-decoration: none;
    }
</style>
<a href="http://www.bbc.co.uk/">大象传媒</a>

Testing

Identify all <a> elements within the general editorial content, using a tool such as the or a browser鈥檚 developer tools. Aim for links that are visually distinguishable from any surrounding text content.

Identify all interactive elements, using a tool such as or . Check that all interactive elements change style in a visually distinguishable way on hover or focus.