https://github.com/agnosticui/a11y-tabs

A lightweight (<1Kb) JavaScript package to facilitate a11y-compliant tabbed interfaces
https://github.com/agnosticui/a11y-tabs

a11y accessibility tabs

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/agnosticui/a11y-tabs
• Owner: AgnosticUI
• License: mit
• Created: 2021-10-27T11:22:19.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-11-04T21:21:42.000Z (about 3 years ago)
• Last Synced: 2024-10-29T16:59:31.312Z (3 months ago)
• Topics: a11y, accessibility, tabs
• Language: JavaScript
• Homepage: https://agnosticui.github.io/a11y-tabs/
• Size: 224 KB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [A11y Tabs](https://github.com/AgnosticUI/a11y-tabs)

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

- [Documentation↗](https://agnosticui.github.io/a11y-tabs/)

- [Demo on Codepen↗](https://codepen.io/roblevin/pen/qBXmvoL)

**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](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_selection_follows_focus) or automatic activation patterns)

## Credits & Inspiration

### Kitty Giraudel

A heartfelt thank you to [@KittyGiraudel](https://github.com/KittyGiraudel) for creating [a11y-dialog](https://github.com/KittyGiraudel/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](https://www.w3.org/TR/wai-aria-practices-1.1/#intro) resources, and [MDN tab role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role) documentation efforts. Both resources certainly provided helpful and prescriptive guidance for this project.