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.

Filed under Accessibility, Clip & Quote, JavaScript, Web Design