Makzan / I share what I learnt

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.


Published on December 25, 2015. More articles like this: Accessibility, Clip & Quote, JavaScript, Web Technologies.

Want productive tips and web technologies links like this in your inbox each week? Sign up for weekly dispatch each week. No spam ever. Just useful content: