Fake Tabs

List of navigation links styled to look like tabs.

My eBay activity, messages and account links that appear like tabs

Introduction

Fake tabs have the appearance of dynamic tabs, but perform a full page load when clicked.

Working Examples

Experience the pattern in action on our companion eBay MIND Patterns examples website.

Examine the required markup structure on the bones GitHub project.

View a fully styled example on the eBay Skin website.

Best Practices

Fake tabs is a navigation pattern. The "tabs" are simply a list of links with no additional JavaScript behaviour. For dynamic tabs that hide & show content, please consult the disclosure tabs pattern.

Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

Keyboard

Tab key navigates the fake tabs.

The currently "selected" fake tab can remain in the tabindex.

Enter key activates a fake tab (i.e. it navigates to the link href).

Screen Reader

Upon entering the list, the number of list items will be announced.

The "current" fake tab should be announced as the "current" item (exact words may differ depending on the screen reader).

Developer Guide

Fake Tabs require no JavaScript, they are simply an ordered list of links.

<div class="fake-tabs">
    <ul class="fake-tabs__items">
        <li class="fake-tabs__item fake-tabs__item--current">
            <a aria-current="page" href="http://www.ebay.com">Page 1</a>
        </li>
        <li class="fake-tabs__item">
            <a href="http://www.ebay.com">Page 2</a>
        </li>
        <li class="fake-tabs__item">
            <a href="http://www.ebay.com">Page 3</a>
        </li>
    </ul>
    <!-- optional -->
    <div class="fake-tabs__content">
        <div class="fake-tabs__cell">
            <!-- content -->
        </div>
    </div>
</div>

Fake tabs may optionally be wrapped inside of a navigation landmark region to aid discoverability.

ARIA Reference

• aria-current: provides AT with programmatic state on the fake-tab that reflects the current URL.