diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts
index 77a45daf0757..f9d4fa461ef2 100644
--- a/packages/main/src/ColorPicker.ts
+++ b/packages/main/src/ColorPicker.ts
@@ -7,6 +7,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import {
 	getRGBColor,
@@ -136,6 +137,24 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	@property({ type: Boolean })
 	simplified = false;
 
+	/**
+	 * Defines the accessible name of the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.20.0
+	 */
+	@property()
+	accessibleName?: string;
+
+	/**
+	 * Receives id(or many ids) of the elements that label the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.20.0
+	 */
+	@property()
+	accessibleNameRef?: string;
+
 	/**
 	 * Defines the current main color which is selected via the hue slider and is shown in the main color square.
 	 * @private
@@ -556,7 +575,10 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	}
 
 	get colorPickerLabel() {
-		return ColorPicker.i18nBundle.getText(COLORPICKER_LABEL);
+		const effectiveLabel = getEffectiveAriaLabelText(this);
+		return effectiveLabel
+			? `${ColorPicker.i18nBundle.getText(COLORPICKER_LABEL)} ${effectiveLabel}`
+			: ColorPicker.i18nBundle.getText(COLORPICKER_LABEL);
 	}
 
 	get sliderGroupLabel() {
diff --git a/packages/main/src/ColorPickerTemplate.tsx b/packages/main/src/ColorPickerTemplate.tsx
index cc9f78868ddc..4a31c5ffa4ea 100644
--- a/packages/main/src/ColorPickerTemplate.tsx
+++ b/packages/main/src/ColorPickerTemplate.tsx
@@ -6,7 +6,7 @@ import Button from "./Button.js";
 
 export default function ColorPickerTemplate(this: ColorPicker) {
 	return (
-		<section
+		<div
 			class="ui5-color-picker-root"
 			role="group"
 			aria-label={this.colorPickerLabel}
@@ -132,6 +132,6 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					</div>
 				</div>
 			}
-		</section>
+		</div>
 	);
 }