³ÉÈËÂÛ̳

Not all elements in a HTML document are immediately visible to the user. Special care should be taken when interactive elements are not visible to meet the needs of all users.

---

Recommendations

Make hidden elements in the tab order visible on focus.

---

Why it matters

It is sometimes beneficial to provide content for specific assistive technology users that is visibly hidden, such as additional context for a share button. However, hidden content that is also in the tab order, such as a skip link, may be disorienting for some users if it remains hidden when receiving focus, in particular sighted keyboard users that are not using a screen reader.

Using a clipping technique instead of negative positioning is recommended because of problems the latter can cause in iOS7 Safari, though either approach is accessible.

Examples

Recommended:

<style>
.visibly-hidden {
    position: absolute; /* clip requires this */
    overflow: hidden;
    height: 1px;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px);
}
.visibly-hidden:focus {
    height: auto;
    width: auto;
    clip: auto;
}
</style>
<a href="#main-heading" class="visibly-hidden">Skip to content</a>

Not recommended:

<style>
.visibly-hidden {
    position: absolute;
    top: -999em;
}
</style>
<a href="#main-heading" class="visibly-hidden">Skip to content</a>

Testing

Identify which elements are focusable, and whether any of those are not visible when the page loads, using a tool such as or . Check that all focusable elements that are not visible become visible when they receive focus.

Note: to enable tabbing through all the elements in a page, you may need to adjust some OS and browser’s settings (see ).