Makzan / I share what I learned

Tabs in HTML is not easy

Link: How Tabs Should Work


  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 2015-12-25. More articles like this:
- Accessibility
- Clip & Quote
- JavaScript
- Web Technologies

Previous <- Link: Regular Expression Crossword Puzzle
Next -> Link: Japanese bookshop stocks only one book at a time