Future Media Standards & Guidelines

Visible on focus

Hidden elements in tab order must be made visible on focus.

Rationale

While it sometimes beneficial to provide content to screen reader users only, not all keyboard users also use a screen reader. Having hidden content in tab order, such as <a> or <button> elements, that remain hidden when focussed causes confusion for keyboard users that do not also use a screen reader.

It is recommened to use a clipping technique instead of negative positioning because of problems this can cause in iOS7 Safari, but either approach is accessible.

Techniques

Pass:

<style>
.hidden {
    position: absolute; /* clip only relevant on absolutely positioned elements */
    overflow: hidden;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px); /* For IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}


.hidden:focus {
    height: auto;
    width: auto;
    clip: auto;
}
</style>

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

Fail:

<style>
.hidden {
    position: absolute;
    top: -999em;
}
</style>

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

Tests

Procedure Expected Result Type
Tab through all elements in the document. Depending on browser / operating system you may need to activate tabbing through all controls (see Enabling keyboard navigation in Mac OS X Web browsers for OSX) All elements in tab order must be visible when they receive focus 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.