Tabs in HTML is not easy
Link: How Tabs Should Work
REQUIREMENTS: WHAT MAKES THE PERFECT TAB?
- ARIA roles.
- The tabs are anchor links that:
- are clickable
- have block layout
- have their
hrefpointing to the
idof the panel element
- use the correct cursor (i.e.
- Since tabs are clickable, the user can open in a new tab/window and the page correctly loads with the correct tab open.
- Right-clicking (and Shift-clicking) doesn’t cause the tab to be selected.
I created the following example of adding ARIA-roles to tabs. But Remy’s example is obviously more complete.
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: