This is an advanced follow-up to the Dynamic Tabs Question. You must upgrade the functionality with specific WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) patterns.

Proper ARIA implementation allows users with visual impairments to navigate the tabbed interface using screen readers by communicating the relationship between triggers and panels.

Technical Requirements:

Roles: Container must be tablist, triggers must be tab, and content areas must be tabpanel.
aria-selected: Set to true on the active trigger, false otherwise.
aria-controls: Each tab must point to the id of its content panel.
aria-labelledby: Each panel must point to the id of its trigger button.
Interactive Elements: Use <button> tags for tabs to ensure native focusability.

💡 Why this matters for the user

Screen Readers: When a blind user focuses on the "HTML" button, the screen reader announces: "Tab, HTML, selected, 1 of 3."
Structural Relationship: The aria-controls and aria-labelledby create a programmatic "bridge" so the software knows exactly which text describes which button.
Keyboard Focus: Using <button> ensures users can "Tab" through the options using only a keyboard.