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