Components

Properly implementing tabs requires a comprehensive set of ARIA attributes to ensure accessibility. These ARIA attributes not only facilitate styling but also enhance accessibility:

role="tablist"
Defines the container for tab headers.
role="tab"
Indicates a tab element, which should be a button and a direct child of role="tablist". The selected tab is identified with aria-selected="true" or false accordingly.
role="tabpanel"
Used for the contents that are switched by the tab buttons. Inactive content should be hidden (hidden).

In addition to the aforementioned styling attributes, it's essential to include aria-controls, aria-labelledby, and id attributes for tabs and tab panels to ensure proper support for screen readers.

Tabs

The sleek silver sedan hummed softly as it glided down the winding mountain road, its headlights piercing through the darkness.
If there is an element following the last role="tabpanel", a gap is automatically added.
<article role="presentation">
	<h2>Tabs</h2>
	<div role="tablist">
		<button aria-controls="car" aria-selected="true" id="tab-car" role="tab"> 
			Car 
		</button>
		<button aria-controls="bus" aria-selected="false" id="tab-bus" role="tab" tabindex="-1">
			Bus
		</button>
		<button aria-controls="bike" aria-selected="false" id="tab-bike" role="tab" tabindex="-1">
			Bike
		</button>
	</div>

	<div aria-labelledby="tab-car" id="car" role="tabpanel">
		The sleek silver sedan hummed softly as it glided down the winding
		mountain road, its headlights piercing through the darkness.
	</div>

	<div aria-labelledby="tab-bus" id="bus" role="tabpanel" hidden>
		The bustling city bus rumbled along, filled with a diverse array 
		of passengers, each lost in their own thoughts amidst the rhythmic 
		sway of the journey.
	</div>

	<div aria-labelledby="tab-bike" id="bike" role="tabpanel" hidden>
		The vibrant red bike leaned against the old oak tree, its tires 
		still warm from the afternoon ride, while the sun cast long shadows 
		across the quiet suburban street.
	</div>
	<div>If there is a following element after last <code>role="tabpanel"</code> gap is added automatically.</div>
</article>
If the tabs with role="tablist" and role="tabpanel" are the only children of an article, the tabs will expand to occupy all of the article's space.
The sleek silver sedan hummed softly as it glided down the winding mountain road, its headlights piercing through the darkness.
<article role="presentation">
	<div role="tablist">
		<button aria-controls="car" aria-selected="true" id="tab-car" role="tab"> 
			Car 
		</button>
		<button aria-controls="bus" aria-selected="false" id="tab-bus" role="tab" tabindex="-1">
			Bus
		</button>
		<button aria-controls="bike" aria-selected="false" id="tab-bike" role="tab" tabindex="-1">
			Bike
		</button>
	</div>

	<div aria-labelledby="tab-car" id="car" role="tabpanel">
		The sleek silver sedan hummed softly as it glided down the winding
		mountain road, its headlights piercing through the darkness.
	</div>

	<div aria-labelledby="tab-bus" id="bus" role="tabpanel" hidden>
		The bustling city bus rumbled along, filled with a diverse array 
		of passengers, each lost in their own thoughts amidst the rhythmic 
		sway of the journey.
	</div>

	<div aria-labelledby="tab-bike" id="bike" role="tabpanel" hidden>
		The vibrant red bike leaned against the old oak tree, its tires 
		still warm from the afternoon ride, while the sun cast long shadows 
		across the quiet suburban street.
	</div>
</article>

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.