diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js
index ffa989d20214..5f2387c0c067 100644
--- a/packages/main/src/Tab.js
+++ b/packages/main/src/Tab.js
@@ -337,6 +337,10 @@ class Tab extends UI5Element {
 			labels.push(`${this._id}-icon`);
 		}
 
+		if (this._designDescription) {
+			labels.push(`${this._id}-designDescription`);
+		}
+
 		return labels.join(" ");
 	}
 
@@ -395,6 +399,14 @@ class Tab extends UI5Element {
 		}
 	}
 
+	get _designDescription() {
+		if (this.design === SemanticColor.Default) {
+			return null;
+		}
+
+		return this.design;
+	}
+
 	get semanticIconClasses() {
 		const classes = ["ui5-tab-semantic-icon"];
 
diff --git a/packages/main/src/TabInOverflow.hbs b/packages/main/src/TabInOverflow.hbs
index 86c2b28c0057..f362ac188a45 100644
--- a/packages/main/src/TabInOverflow.hbs
+++ b/packages/main/src/TabInOverflow.hbs
@@ -4,7 +4,6 @@
 	type="{{this.overflowState}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"
-	aria-labelledby="{{this.ariaLabelledBy}}"
 	._realTab="{{this}}"
 	style="{{this._style}}"
 >
@@ -13,15 +12,18 @@
 			{{#if this.semanticIconName}}
 				<ui5-icon class="{{this.semanticIconClasses}}" name="{{this.semanticIconName}}"></ui5-icon>
 			{{/if}}
-
 			{{#if this.icon}}
 				<ui5-icon name="{{this.icon}}"></ui5-icon>
 			{{/if}}
 			{{this.text}}
-
 			{{#if this.additionalText}}
 				({{this.additionalText}})
 			{{/if}}
+			{{#if this._designDescription}}
+				<div id="{{this._id}}-designDescription" class="ui5-hidden-text">
+					{{this._designDescription}}
+				</div>
+			{{/if}}
 		</div>
 	</div>
 </ui5-li-custom>
diff --git a/packages/main/src/TabInStrip.hbs b/packages/main/src/TabInStrip.hbs
index 9cac8ccb16b9..d9bade6b9549 100644
--- a/packages/main/src/TabInStrip.hbs
+++ b/packages/main/src/TabInStrip.hbs
@@ -14,7 +14,13 @@
 >
 	{{#if this.icon}}
 		<div class="ui5-tab-strip-item-icon-outer">
-			<ui5-icon name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon>
+			<ui5-icon id="{{this._id}}-icon" name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon>
+		</div>
+	{{/if}}
+
+	{{#if this._designDescription}}
+		<div id="{{this._id}}-designDescription" class="ui5-tab-strip-design-description">
+			{{this._designDescription}}
 		</div>
 	{{/if}}
 
diff --git a/packages/main/src/themes/TabInOverflow.css b/packages/main/src/themes/TabInOverflow.css
index 3d964ba3dcc0..ab3b675648bf 100644
--- a/packages/main/src/themes/TabInOverflow.css
+++ b/packages/main/src/themes/TabInOverflow.css
@@ -1,4 +1,5 @@
 @import "./TabSemanticIcon.css";
+@import "./InvisibleTextStyles.css";
 
 .ui5-tab-overflow-item {
 	color: var(--_ui5_tc_overflowItem_default_color);
diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css
index 9f1a6b6f4bdc..68d6ec4080a4 100644
--- a/packages/main/src/themes/TabInStrip.css
+++ b/packages/main/src/themes/TabInStrip.css
@@ -28,7 +28,8 @@
 .ui5-tc__separator[hidden],
 .ui5-tab-strip-item[hidden],
 .ui5-tab-strip-item--textOnly[hidden],
-.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden] {
+.ui5-tab-strip-item.ui5-tab-strip-item--textOnly.ui5-tab-strip-item--inline[hidden],
+.ui5-tab-strip-design-description {
 	display: none;
 }