Fake tabs have the appearance of dynamic tabs, but perform a full page load when clicked.
Updated: November 2nd, 2020
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.
This section provides interaction design for keyboard, screen reader and pointing devices.
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).
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).
<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-current: provides AT with programmatic state on the fake-tab that reflects the current URL.
aria-current attribute is not supported in Talkback/Chrome. The issue can be mitigated by de-activating the "current" link (by removing the
href attribute). Another option is to fallback to an offscreen text technique for mobile devices.