Overview

This self-contained interface demonstrates an accessible tabbed widget built with plain HTML, CSS, and JavaScript. Everything renders directly in your browser with no build step.

Use the tabs above to switch between panels. Keyboard users can navigate with the arrow keys.

Features

• Three tabs, each a real <button> element with role="tab".
• aria-selected reflects the active tab on load and after every change.
• Only the selected panel is visible; the others use the hidden attribute.
• Arrow-key navigation and focus management follow the WAI-ARIA tabs pattern.

FAQ

Does this require any dependencies? No. All CSS and JS are inlined.

Will it work offline? Yes. There are no external fonts, scripts, or network calls.

Is it accessible? Yes. It uses semantic buttons, ARIA roles, and keyboard support.