Hyperscript Behavior: Accessible Tabs

This tab widget is built using hyperscript behaviors, which allow us to attach multiple event handlers to a group of HTML elements.

Accessibility

This control is built using <button> elements and WAI-ARIA controls, based on W3C Accessibility guidelines so that it should behave well with screen readers and other adaptive technologies. You can try it out by pressing the [TAB] key to navigate to different tabs. To select a focused tab, press the [SPACE] bar. Tabs can also be selected by pressing the right and left arrow keys.

Consistency

This control also uses the browser's hash to maintain state, so that tabs will stay selected even after a page reload.

This is the content for the first tab