Accessible name for tab elements

How to define an accessible name for a tab element?

The following elements with role="tab" have a valid name that can be announced by screen readers:

<div role="tab">Tab name</div>

<!-- or -->
<div role="tab" aria-label="Tab name"></div>

<!-- or -->
<div role="tab" aria-labelledby="name-for-tab"></div>
<p id="name-for-tab">Name for tab</p>

Why is this important?

Screen readers announce tab elements with their accessible name. This way, people who use a screen reader understand the purpose of each tab in a tab interface.

This rule often fails because tabs contain only icons without a text alternative, leaving screen reader users unable to determine the tab’s purpose.