Fake 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).

ARIA Reference