Accessible Kit / Tabs

Accessible Tabs

Fully accessible tabs with keyboard navigation and ARIA support

Basic Tabs

Standard tabs component with horizontal navigation

Product Overview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Technical Specifications

  • Screen: 15.6 inches
  • Processor: Intel Core i7
  • RAM: 16GB DDR4
  • Storage: 512GB SSD

Customer Reviews

⭐⭐⭐⭐⭐ "Great product, very satisfied!" - John K.

⭐⭐⭐⭐ "Good quality for the price." - Mary V.

Boxed Variant

Tabs with a border around the content

Dashboard

Welcome to your dashboard. Here you'll find an overview of all activities.

Settings

Application configuration and user preferences.

User Profile

Edit your personal information and account settings.

Archive

Archived items (this tab is disabled).

Pills Variant

Tabs styled as pills/buttons

Statistics

Overview of key metrics and statistics.

Visualizations

Graphical display of data and trends.

Generated Reports

Exportable reports and analyses.

Vertical Tabs

Tabs with vertical navigation (displayed horizontally on mobile)

Account Settings

Manage basic account information.

Security

Password settings and two-factor authentication.

Notifications

Configure email and push notifications.

Privacy

Visibility and data sharing settings.

Tabs with Badges

Tabs with counters or badge indicators

All Tasks

Showing all 24 tasks regardless of status.

Active Tasks

12 tasks you're currently working on.

Completed Tasks

10 tasks you've already finished.

Archived Tasks

2 archived tasks for future reference.

Fade Animation

Tabs with smooth transitions between panels

First Slide

Content with fade animation when switching.

Second Slide

Smooth transition between content.

Third Slide

Last panel with animated transition.

Usage

Basic HTML Structure:

<div data-tabs>
    <div role="tablist" data-tabs-list>
        <button data-tabs-tab>Tab 1</button>
        <button data-tabs-tab>Tab 2</button>
        <button data-tabs-tab>Tab 3</button>
    </div>

    <div data-tabs-panel>
        Tab 1 content
    </div>

    <div data-tabs-panel>
        Tab 2 content
    </div>

    <div data-tabs-panel>
        Tab 3 content
    </div>
</div>

JavaScript Initialization:

1. ES6 Module Import - init functions (Recommended)

import { initTabs } from './a11y-kit/a11y-tabs.js';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initTabs();
});

2. ES6 Module Import - Bootstrap Style

import { Tabs } from './a11y-kit/a11y-tabs.js';

const tabs = new Tabs(element, {
    activeIndex: 0,
    automatic: true,
    orientation: 'horizontal',
    onChange: (tab, panel, index) => console.log('Tab changed:', index),
    onTabClick: (tab, index) => console.log('Clicked:', index)
});

3. NPM package (Module bundlers: Astro, Vite, Webpack)

npm install accessible-kit

// Import only what you need (best for tree-shaking)
import { initTabs, Tabs } from 'accessible-kit/tabs';

// Initialize after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initTabs(); // Auto-init all tabs

  // OR create instances manually
  const tabs = new Tabs(element, options);
});

Variants:

<!-- Boxed variant -->
<div data-tabs data-variant="boxed">...</div>

<!-- Pills variant -->
<div data-tabs data-variant="pills">...</div>

<!-- Vertical variant -->
<div data-tabs data-orientation="vertical">...</div>

<!-- Fade animations are default -->
<div data-tabs>...</div>

<!-- Disable animations -->
<div data-tabs data-no-animation>...</div>

<!-- Disabled tab -->
<button data-tabs-tab disabled>Disabled</button>

<!-- Badge (optional class for styling) -->
<span class="tabs__tab-badge">12</span>

Keyboard Navigation

  • ← / → - Navigate between tabs (horizontal)
  • ↑ / ↓ - Navigate between tabs (vertical)
  • Home - Jump to first tab
  • End - Jump to last tab
  • Enter / Space - Activate focused tab (manual activation)
  • Tab - Move focus to panel content

Features