Tab-like Page Navigation—Two Versions

View the library of solutions.

These tab-like navigation links are semantically in-page links and do not use an ARIA model. (See "Why not use ARIA" for more info.)

Notice that after navigating to the requested in-page content, if you press the tab key focus goes to the first actionable element found in the DOM after the linked container's open tag.

This is important because engaging an in-page link should move focus to the corresponding container requested.

Unfortunately, this can be problematic in certain browsers. Therefore, by assigning tabindex="-1" to the target container, the container now accepts focus when the in-page tab link is engaged.

These tab-like navigation links can either:

Reveal a single content panel at a time.
Show all content and scroll to the content requested.

Use the buttons below to see each version. The js does not change.

Section One
Section Two
Section Three

Welcome to Section One

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.

Welcome to Section Two

Welcome to Section Three

Why not use ARIA?

We don't use ARIA in this method since this tab-like navigation is simply a list of in-page links configured horizontally rather than vertically. It doesn't add much user value to the page.

The use of tab-like navigation most often serves marketers (above-the-fold content) and developers (cuts down on the need for session variables, heavy server calls, etc.).

ARIA tab solutions are best used for creating web-based tools that assist the user in navigation and content curation. The ARIA methodology for tabs sprang out of the need for a web-based solution for the type of tab interface you find when, say, configuring PC settings.

ARIA was never meant to be used for simple website navigation.

Therefore, when creating simple website navigation ARIA should not be used. But when creating complex widgets such as web-mail interfaces an ARIA tab model would be used.