A11y Tabs

A lightweight (<1Kb) JavaScript package to facilitate a11y-compliant tabbed interfaces.

• Documentation↗
• Demo on Codepen↗

Features:

• Support for keyboard navigation home, end, left, right, enter, and space
• Proper use of aria-* attributes applied
• Circular navigation and proper tab and arrow navigation focus
• Lightweight (< 1Kb)
• Tested
• Available as esm and umd
• Supports prefers reduced motion system preference

Unavailble features:

• aria-orientation vertical with up, down arrow support (coming soon!)
• This implementation uses the manual activation pattern which requires the user to click or press enter / space on a focused tab button to open its corresponding panel (as opposed to the selection follow focus or automatic activation patterns)

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.

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.