Makzan / I share what I learned

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 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

📬 Subscribe to Makzan’s Weekly Dispatch

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:

What to expect: If you wish to withdraw your consent and stop hearing from us, simply click the unsubscribe link at the bottom of every email we send or contact us at mak@makzan.net. We value and respect your personal data and privacy. To view our privacy policy, please visit our website. By submitting this form, you agree that we may process your information in accordance with these terms.