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.