Tabs in HTML is not easy

Link: How Tabs Should Work

REQUIREMENTS: WHAT MAKES THE PERFECT TAB?

1. All content is navigable and available without JavaScript (crawler-compatible and low JS-compatible).
2. ARIA roles.
3. The tabs are anchor links that:
   • are clickable
   • have block layout
   • have their href pointing to the id of the panel element
   • use the correct cursor (i.e. cursor: pointer).
4. Since tabs are clickable, the user can open in a new tab/window and the page correctly loads with the correct tab open.
5. Right-clicking (and Shift-clicking) doesn’t cause the tab to be selected.
6. Native browser Back/Forward button correctly changes the state of the selected tab (think about it working exactly as if there were no JavaScript in place).

I created the following example of adding ARIA-roles to tabs. But Remy’s example is obviously more complete.