diff --git a/packages/components/color-picker-panel/src/components/alpha-slider.vue b/packages/components/color-picker-panel/src/components/alpha-slider.vue
index 34db54c321..a579e8a3de 100644
--- a/packages/components/color-picker-panel/src/components/alpha-slider.vue
+++ b/packages/components/color-picker-panel/src/components/alpha-slider.vue
@@ -12,7 +12,8 @@
       :aria-valuemin="minValue"
       :aria-valuemax="maxValue"
       role="slider"
-      tabindex="0"
+      :tabindex="disabled ? undefined : 0"
+      :aria-disabled="disabled"
       @keydown="handleKeydown"
     />
   </div>
diff --git a/packages/components/color-picker-panel/src/components/hue-slider.vue b/packages/components/color-picker-panel/src/components/hue-slider.vue
index dc3690e728..83e1fcc5ae 100644
--- a/packages/components/color-picker-panel/src/components/hue-slider.vue
+++ b/packages/components/color-picker-panel/src/components/hue-slider.vue
@@ -12,7 +12,8 @@
       :aria-valuemin="minValue"
       :aria-valuemax="maxValue"
       role="slider"
-      tabindex="0"
+      :tabindex="disabled ? undefined : 0"
+      :aria-disabled="disabled"
       @keydown="handleKeydown"
     />
   </div>
diff --git a/packages/components/color-picker-panel/src/components/sv-panel.vue b/packages/components/color-picker-panel/src/components/sv-panel.vue
index 2e60c2014d..f61ffed494 100644
--- a/packages/components/color-picker-panel/src/components/sv-panel.vue
+++ b/packages/components/color-picker-panel/src/components/sv-panel.vue
@@ -4,7 +4,8 @@
       ref="cursorRef"
       :class="cursorKls"
       :style="cursorStyle"
-      tabindex="0"
+      :tabindex="disabled ? undefined : 0"
+      :aria-disabled="disabled"
       role="slider"
       aria-valuemin="0,0"
       aria-valuemax="100,100"
diff --git a/packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue b/packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue
index faa8af7d16..52a0acd108 100644
--- a/packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue
+++ b/packages/components/date-picker-panel/src/date-picker-com/basic-date-table.vue
@@ -39,7 +39,8 @@
           :class="getCellClasses(cell)"
           :aria-current="cell.isCurrent ? 'date' : undefined"
           :aria-selected="cell.isCurrent"
-          :tabindex="isSelectedCell(cell) ? 0 : -1"
+          :tabindex="disabled ? undefined : isSelectedCell(cell) ? 0 : -1"
+          :aria-disabled="disabled"
           @focus="handleFocus"
         >
           <el-date-picker-cell :cell="cell" />
diff --git a/packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue b/packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue
index 51e0e1c4bb..4228a2e8dc 100644
--- a/packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue
+++ b/packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue
@@ -99,7 +99,8 @@
             role="button"
             :class="dpNs.e('header-label')"
             aria-live="polite"
-            tabindex="0"
+            :tabindex="disabled ? undefined : 0"
+            :aria-disabled="disabled"
             @keydown.enter="showPicker('year')"
             @click="showPicker('year')"
             >{{ yearLabel }}</span
@@ -108,7 +109,8 @@
             v-show="currentView === 'date'"
             role="button"
             aria-live="polite"
-            tabindex="0"
+            :tabindex="disabled ? undefined : 0"
+            :aria-disabled="disabled"
             :class="[
               dpNs.e('header-label'),
               { active: currentView === 'month' },
diff --git a/packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue b/packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue
index 7070b12b89..e485dbf6bb 100644
--- a/packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue
+++ b/packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue
@@ -179,7 +179,8 @@
                 role="button"
                 :class="drpNs.e('header-label')"
                 aria-live="polite"
-                tabindex="0"
+                :tabindex="disabled ? undefined : 0"
+                :aria-disabled="disabled"
                 @keydown.enter="showLeftPicker('year')"
                 @click="showLeftPicker('year')"
               >
@@ -189,7 +190,8 @@
                 v-show="leftCurrentView === 'date'"
                 role="button"
                 aria-live="polite"
-                tabindex="0"
+                :tabindex="disabled ? undefined : 0"
+                :aria-disabled="disabled"
                 :class="[
                   drpNs.e('header-label'),
                   { active: leftCurrentView === 'month' },
@@ -309,7 +311,8 @@
                 role="button"
                 :class="drpNs.e('header-label')"
                 aria-live="polite"
-                tabindex="0"
+                :tabindex="disabled ? undefined : 0"
+                :aria-disabled="disabled"
                 @keydown.enter="showRightPicker('year')"
                 @click="showRightPicker('year')"
               >
@@ -319,7 +322,8 @@
                 v-show="rightCurrentView === 'date'"
                 role="button"
                 aria-live="polite"
-                tabindex="0"
+                :tabindex="disabled ? undefined : 0"
+                :aria-disabled="disabled"
                 :class="[
                   drpNs.e('header-label'),
                   { active: rightCurrentView === 'month' },