A11yTabs

a11y-tabs a lightweight (less then 1Kb) JavaScript package that facilitates a11y-compliant tabbed interfaces.

✔︎ Proper use of aria-* attributes applied
✔︎ ENTER and SPACE select
✔︎ HOME and END take you to start and end respectively
✔︎ LEFT and RIGHT for horizontally oriented tabs
✔︎ UP and DOWN for vertically oriented tabs
✔︎ Circular navigation and proper tab and arrow navigation focus
✔︎ Lightweight (< 1Kb)
✔︎ Tested with Cypress E2E
✔︎ Available as esm and umd
✔︎ Supports prefers reduced motion system preference

Try the live demo on Codepen↗.

Credits & Inspiration

Kitty Giraudel

A heartfelt thank you to @KittyGiraudel for creating a11y-dialog which inspired me to create a kindred-spirited and comparable a11y-tabs. Specifically, I found a11y-dialog's small surface API, clear documentation and sandbox demo made ramping up quite efficient. As such, I followed the same patterns with a11y-tabs. Both have helped me as I work on my still experimental framework-agnostic UI component library AgnosticUI (which supports React, Vue, Angular, and Svelte—do go check it out).

WAI-ARIA & MDN

I was also inspired by the WAI-ARIA practices resources, and MDN tab role documentation efforts. Both resources certainly provided helpful and prescriptive guidance for this project.