diff --git a/src/components/cvaa-overlay/cvaa-overlay.tsx b/src/components/cvaa-overlay/cvaa-overlay.tsx
index 13e56cb35..b111b4351 100644
--- a/src/components/cvaa-overlay/cvaa-overlay.tsx
+++ b/src/components/cvaa-overlay/cvaa-overlay.tsx
@@ -11,6 +11,7 @@ import {withLogger} from '../logger';
 import {MainCaptionsWindow} from './main-captions_window';
 import {CustomCaptionsWindow} from './custom-captions-window';
 import {withText} from 'preact-i18n';
+import { Utils } from '@playkit-js/playkit-js';
 
 /**
  * mapping state to props
@@ -41,7 +42,10 @@ const COMPONENT_NAME = 'CVAAOverlay';
 @withLogger(COMPONENT_NAME)
 @withEventDispatcher(COMPONENT_NAME)
 @withKeyboardA11y
-@withText({cvvaDialogText: 'cvaa.title'})
+@withText({
+  cvvaDialogText: 'cvaa.title',
+  cvvaSetCustomCaptionsText: 'cvaa.set_custom_caption',
+})
 class CVAAOverlay extends Component<any, any> {
   /**
    * componentWillUnmount
@@ -131,6 +135,10 @@ class CVAAOverlay extends Component<any, any> {
    */
   render(props: any): VNode<any> {
     props.clearAccessibleChildren();
+    const isMainOverlay = this.state.activeWindow === cvaaOverlayState.Main;
+    const titleId = `captions_title_${Utils.Generator.guid()}`;
+    const ariaProps = isMainOverlay ? { ariaLabelledBy: titleId } : { ariaLabel: this.props.cvvaSetCustomCaptionsText };
+
     return (
       <Overlay
         open
@@ -138,9 +146,11 @@ class CVAAOverlay extends Component<any, any> {
         addAccessibleChild={this.props.addAccessibleChild}
         onClose={props.onClose}
         type="cvaa"
-        label={props.cvvaDialogText}>
+        {...ariaProps}
+      >
         {this.state.activeWindow === cvaaOverlayState.Main ? (
           <MainCaptionsWindow
+            captionsTitleId={titleId}
             cvaaOverlayState={cvaaOverlayState}
             addAccessibleChild={props.addAccessibleChild}
             /*@ts-expect-error - Property 'captionsStyleDefault' does not exist on type 'CVAAOverlay' */
diff --git a/src/components/cvaa-overlay/main-captions_window.tsx b/src/components/cvaa-overlay/main-captions_window.tsx
index 9fd328532..218dee0b8 100644
--- a/src/components/cvaa-overlay/main-captions_window.tsx
+++ b/src/components/cvaa-overlay/main-captions_window.tsx
@@ -75,7 +75,7 @@ class MainCaptionsWindow extends Component<any, any> {
   render(props: any): VNode<any> {
     return (
       <div className={[style.overlayScreen, style.active].join(' ')}>
-        <h2 className={style.title}>
+        <h2 className={style.title} id={this.props.captionsTitleId}>
           <Text id={'cvaa.title'} />
         </h2>
         <div role="group">
diff --git a/src/components/overlay/overlay.tsx b/src/components/overlay/overlay.tsx
index edc5c898c..d28d3a871 100644
--- a/src/components/overlay/overlay.tsx
+++ b/src/components/overlay/overlay.tsx
@@ -127,7 +127,8 @@ class Overlay extends Component<any, any> {
    * @returns {React$Element} - component
    * @memberof Overlay
    */
-  render({type, open, label = 'dialog'}: any): VNode<any> {
+  render({type, open, ariaLabel, ariaLabelledBy}: any): VNode<any> {
+    const ariaProps = ariaLabelledBy ? { 'aria-labelledby': ariaLabelledBy } : { 'aria-label': ariaLabel }
     const overlayClass = [style.overlay];
     if (type) {
       const classType = style[type + '-overlay'] ? style[type + '-overlay'] : type + '-overlay';
@@ -140,7 +141,7 @@ class Overlay extends Component<any, any> {
     }
 
     return (
-      <div tabIndex={-1} className={overlayClass.join(' ')} role="dialog" onKeyDown={this.onKeyDown} aria-label={label}>
+      <div tabIndex={-1} className={overlayClass.join(' ')} role="dialog" onKeyDown={this.onKeyDown} {...ariaProps}>
         <div className={style.overlayContents}>{this.props.children}</div>
         {this.renderCloseButton(this.props)}
       </div>