Tabs UI — 3 Techniques Compared

Updated Apr 30, 2026

Compare 3 techniques to create tabbed content: the CSS radio button hack (pure CSS, keyboard accessible), the CSS :target pseudo-class (URL-shareable tabs), and JavaScript tabs with full ARIA support. Each method offers different benefits for navigation, accessibility, and dynamic content loading.

Open Demo

[CSS Radio Button Hack] Pure CSS Tabs with Radio Buttons

Demo & Code

CSS-only tabs using hidden radio buttons and :checked selector to switch between tab panels. Technique: CSS Radio Button Hack. No JS, keyboard accessible, mutually exclusive. Source code by RSalgado on CodePen.

Technologies

HTML CSS JavaScript

Code By

RSalgado

Created

2024-06-10

View on CodePen

Open Demo

[CSS :target Hack] CSS :target Tab Container

Demo & Code

CSS tabs using the :target pseudo-class that activates based on URL fragment identifier. Technique: CSS :target Hack. URL-shareable tabs, no JS, bookmarkable. Source code by Ghaste on CodePen.

Technologies

HTML CSS JavaScript

Code By

Ghaste

Created

2025-11-20

View on CodePen

Open Demo

[JavaScript Tabs] JS Tabs with Accessibility

Demo & Code

JavaScript tabs with full ARIA attributes, keyboard navigation, and responsive behavior. Technique: JavaScript Tabs. Full a11y, dynamic content, any trigger type. Source code by Mark Caron on CodePen.

Technologies

HTML CSS JavaScript

Code By

Mark Caron

Created

2024-03-15

View on CodePen