Future Media Standards & Guidelines

Focus styles

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

Using the standards and guidelines

You can use use and re-use the the BBC Accessibility Standards and Guidelines under an Open Government Licence for Public Sector Information.

Details can be found on the Open Government Licence for Public Sector Information website.

Feedback

We would love to hear your feedback. If you have a question or comment about the standards or guidelines email us at AccessibilityTeam@bbc.co.uk.

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.