From 3a56703cb04feadf917b539afcd58f33baf5f562 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 16 Nov 2021 21:21:47 +0800
Subject: [PATCH] feat(Tabs): add aria-controls for a11y (#9882)

* feat(Tabs): add aria-controls for a11y

* test: keep jest snapshot stable
---
 .../test/__snapshots__/index.spec.ts.snap     |  12 +-
 packages/vant/src/composables/use-id.ts       |  15 +
 .../test/__snapshots__/index.spec.ts.snap     |  72 ++-
 .../test/__snapshots__/demo.spec.ts.snap      |  27 +-
 .../icon/test/__snapshots__/demo.spec.ts.snap |  36 +-
 .../test/__snapshots__/demo.spec.ts.snap      |  18 +-
 .../list/test/__snapshots__/demo.spec.ts.snap |  27 +-
 .../test/__snapshots__/demo.spec.ts.snap      |  27 +-
 packages/vant/src/tab/Tab.tsx                 |  20 +-
 .../tab/test/__snapshots__/demo.spec.ts.snap  | 417 ++++++++++++++----
 .../test/__snapshots__/index.spec.tsx.snap    | 166 +++++--
 .../test/__snapshots__/insert.spec.tsx.snap   |  72 ++-
 packages/vant/src/tabs/Tabs.tsx               |   5 +
 packages/vant/src/tabs/TabsTitle.tsx          |   4 +
 packages/vant/src/tabs/types.ts               |   1 +
 packages/vant/src/vue-tsx-shim.d.ts           |   1 +
 16 files changed, 731 insertions(+), 189 deletions(-)
 create mode 100644 packages/vant/src/composables/use-id.ts

diff --git a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
index 185f67837..c21648631 100644
--- a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
@@ -62,7 +62,8 @@ exports[`should update tabs when previous tab is clicked 1`] = `
            class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-cascader__tab"
              tabindex="-1"
              aria-selected="false"
@@ -71,7 +72,8 @@ exports[`should update tabs when previous tab is clicked 1`] = `
             Jiangsu
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected"
              tabindex="0"
              aria-selected="true"
@@ -92,8 +94,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
              class="van-swipe__track"
         >
           <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+               id="van-tab"
                role="tabpanel"
+               tabindex="-1"
                aria-hidden="true"
+               aria-labelledby="van-tabs-0"
                style="width: 100px;"
           >
             <div class="van-tab__pane">
@@ -114,8 +119,11 @@ exports[`should update tabs when previous tab is clicked 1`] = `
             </div>
           </div>
           <div class="van-swipe-item van-tab__pane-wrapper"
+               id="van-tab"
                role="tabpanel"
+               tabindex="0"
                aria-hidden="false"
+               aria-labelledby="van-tabs-1"
                style="width: 100px;"
           >
             <div class="van-tab__pane">
diff --git a/packages/vant/src/composables/use-id.ts b/packages/vant/src/composables/use-id.ts
new file mode 100644
index 000000000..d2bd081c3
--- /dev/null
+++ b/packages/vant/src/composables/use-id.ts
@@ -0,0 +1,15 @@
+import { getCurrentInstance } from 'vue';
+
+let current = 0;
+
+export function useId() {
+  const vm = getCurrentInstance();
+  const { name = 'unknown' } = vm?.type || {};
+
+  // keep jest snapshot stable
+  if (process.env.NODE_ENV === 'test') {
+    return name;
+  }
+
+  return `${name}-${++current}`;
+}
diff --git a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
index adbb09e98..1e4773214 100644
--- a/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/coupon-list/test/__snapshots__/index.spec.ts.snap
@@ -30,19 +30,23 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Available (6)
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Unavailable (2)
@@ -55,8 +59,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -260,8 +267,11 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
           </div>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
@@ -311,19 +321,23 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Available (0)
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Unavailable (0)
@@ -336,8 +350,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-0"
            style="display: none;"
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -351,8 +368,11 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
           </div>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
            style
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -412,19 +432,23 @@ exports[`should render list-footer slot correctly 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Available (0)
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Unavailable (0)
@@ -437,8 +461,11 @@ exports[`should render list-footer slot correctly 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-0"
            style="display: none;"
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -453,8 +480,11 @@ exports[`should render list-footer slot correctly 1`] = `
           List Footer
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
            style
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -515,19 +545,23 @@ exports[`should use custom src when using empty-image prop 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Available (0)
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Unavailable (0)
@@ -540,8 +574,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         <div class="van-coupon-list__list van-coupon-list__list--with-bottom"
@@ -555,8 +592,11 @@ exports[`should use custom src when using empty-image prop 1`] = `
           </div>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
diff --git a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
index 4ea291ef8..e12ef2682 100644
--- a/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap
@@ -18,28 +18,34 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Error
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Network
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Search
@@ -52,8 +58,11 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         <div class="van-empty">
@@ -65,13 +74,19 @@ exports[`should render demo and match snapshot 1`] = `
           </p>
         </div>
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>
diff --git a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
index 83e09dba7..edb9a23c4 100644
--- a/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/icon/test/__snapshots__/demo.spec.ts.snap
@@ -9,37 +9,45 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-tabs__nav van-tabs__nav--line"
              aria-orientation="horizontal"
         >
-          <div role="tab"
+          <div id="van-tabs-0"
+               role="tab"
                class="van-tab van-tab--active"
                tabindex="0"
                aria-selected="true"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
               Demo
             </span>
           </div>
-          <div role="tab"
+          <div id="van-tabs-1"
+               role="tab"
                class="van-tab"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
               Basic
             </span>
           </div>
-          <div role="tab"
+          <div id="van-tabs-2"
+               role="tab"
                class="van-tab"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
               Outline
             </span>
           </div>
-          <div role="tab"
+          <div id="van-tabs-3"
+               role="tab"
                class="van-tab"
                tabindex="-1"
                aria-selected="false"
+               aria-controls="van-tab"
           >
             <span class="van-tab__text van-tab__text--ellipsis">
               Filled
@@ -54,8 +62,11 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div>
@@ -130,18 +141,27 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-3"
          style="display: none;"
     >
     </div>
diff --git a/packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap
index ad6ac77c2..23aacda5a 100644
--- a/packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/index-bar/test/__snapshots__/demo.spec.ts.snap
@@ -7,19 +7,23 @@ exports[`should render demo and match snapshot 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Basic Usage
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Custom Index List
@@ -32,8 +36,11 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div class="van-index-bar">
@@ -901,8 +908,11 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
diff --git a/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
index 89b815911..bc6484bfd 100644
--- a/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/list/test/__snapshots__/demo.spec.ts.snap
@@ -7,28 +7,34 @@ exports[`should render demo and match snapshot 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Basic Usage
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Error Info
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           PullRefresh
@@ -41,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div role="feed"
@@ -72,13 +81,19 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
diff --git a/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
index d499f5d2d..9dddee2e2 100644
--- a/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/pull-refresh/test/__snapshots__/demo.spec.ts.snap
@@ -7,28 +7,34 @@ exports[`should render demo and match snapshot 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Basic Usage
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Success Tip
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           Custom Tips
@@ -41,8 +47,11 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       <div class="van-pull-refresh">
@@ -57,13 +66,19 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
diff --git a/packages/vant/src/tab/Tab.tsx b/packages/vant/src/tab/Tab.tsx
index 2d8272dcc..b98821de4 100644
--- a/packages/vant/src/tab/Tab.tsx
+++ b/packages/vant/src/tab/Tab.tsx
@@ -22,6 +22,8 @@ import { TABS_KEY } from '../tabs/Tabs';
 
 // Composables
 import { useParent } from '@vant/use';
+import { useId } from '../composables/use-id';
+import { useExpose } from '../composables/use-expose';
 import { routeProps } from '../composables/use-route';
 import { TAB_STATUS_KEY } from '../composables/use-tab-status';
 
@@ -49,6 +51,7 @@ export default defineComponent({
   props: tabProps,
 
   setup(props, { slots }) {
+    const id = useId();
     const inited = ref(false);
     const { parent, index } = useParent(TABS_KEY);
 
@@ -92,6 +95,7 @@ export default defineComponent({
     provide(TAB_STATUS_KEY, active);
 
     return () => {
+      const label = `${parent.id}-${index.value}`;
       const { animated, swipeable, scrollspy, lazyRender } = parent.props;
 
       if (!slots.default && !animated) {
@@ -103,9 +107,12 @@ export default defineComponent({
       if (animated || swipeable) {
         return (
           <SwipeItem
+            id={id}
             role="tabpanel"
-            aria-hidden={!active.value}
             class={bem('pane-wrapper', { inactive: !active.value })}
+            tabindex={active.value ? 0 : -1}
+            aria-hidden={!active.value}
+            aria-labelledby={label}
           >
             <div class={bem('pane')}>{slots.default?.()}</div>
           </SwipeItem>
@@ -115,8 +122,17 @@ export default defineComponent({
       const shouldRender = inited.value || scrollspy || !lazyRender;
       const Content = shouldRender ? slots.default?.() : null;
 
+      useExpose({ id });
+
       return (
-        <div v-show={show} role="tabpanel" class={bem('pane')}>
+        <div
+          v-show={show}
+          id={id}
+          role="tabpanel"
+          class={bem('pane')}
+          tabindex={show ? 0 : -1}
+          aria-labelledby={label}
+        >
           {Content}
         </div>
       );
diff --git a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
index c65453b4d..907c86386 100644
--- a/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/tab/test/__snapshots__/demo.spec.ts.snap
@@ -8,37 +8,45 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 1
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 2
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 3
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-3"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 4
@@ -51,24 +59,36 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         content of tab 1
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-3"
            style="display: none;"
       >
       </div>
@@ -82,28 +102,34 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 1
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 2
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 3
@@ -116,19 +142,28 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-0"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
            style
       >
         content of tab 2
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>
@@ -142,73 +177,89 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Tab 1
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Tab 2
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Tab 3
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-3"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Tab 4
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-4"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Tab 5
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-5"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Tab 6
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-6"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Tab 7
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-7"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text">
             Tab 8
@@ -221,44 +272,68 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         content of tab 1
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-3"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-4"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-5"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-6"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-7"
            style="display: none;"
       >
       </div>
@@ -272,28 +347,34 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 1
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab van-tab--disabled"
              aria-selected="false"
              aria-disabled="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 2
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 3
@@ -306,19 +387,28 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         content of tab 1
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>
@@ -332,28 +422,34 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--card"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 1
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 2
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 3
@@ -362,19 +458,28 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         content of tab 1
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>
@@ -388,19 +493,23 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 1
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 2
@@ -413,14 +522,20 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         content of tab 1
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
@@ -436,37 +551,45 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tabs__nav van-tabs__nav--line"
                aria-orientation="horizontal"
           >
-            <div role="tab"
+            <div id="van-tabs-0"
+                 role="tab"
                  class="van-tab van-tab--active"
                  tabindex="0"
                  aria-selected="true"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text van-tab__text--ellipsis">
                 Tab 1
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-1"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text van-tab__text--ellipsis">
                 Tab 2
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-2"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text van-tab__text--ellipsis">
                 Tab 3
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-3"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text van-tab__text--ellipsis">
                 Tab 4
@@ -481,24 +604,36 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         content of tab 1
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-3"
            style="display: none;"
       >
       </div>
@@ -512,10 +647,12 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             <i class="van-badge__wrapper van-icon van-icon-more-o">
@@ -523,10 +660,12 @@ exports[`should render demo and match snapshot 1`] = `
             Tab
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             <i class="van-badge__wrapper van-icon van-icon-more-o">
@@ -541,14 +680,20 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         content of tab 1
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
@@ -562,7 +707,8 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
@@ -571,7 +717,8 @@ exports[`should render demo and match snapshot 1`] = `
             Tab 1
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
@@ -580,7 +727,8 @@ exports[`should render demo and match snapshot 1`] = `
             Tab 2
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
@@ -589,7 +737,8 @@ exports[`should render demo and match snapshot 1`] = `
             Tab 3
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-3"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
@@ -610,8 +759,11 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-swipe__track"
         >
           <div class="van-swipe-item van-tab__pane-wrapper"
+               id="van-tab"
                role="tabpanel"
+               tabindex="0"
                aria-hidden="false"
+               aria-labelledby="van-tabs-0"
                style="width: 100px;"
           >
             <div class="van-tab__pane">
@@ -619,8 +771,11 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
           </div>
           <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+               id="van-tab"
                role="tabpanel"
+               tabindex="-1"
                aria-hidden="true"
+               aria-labelledby="van-tabs-1"
                style="width: 100px;"
           >
             <div class="van-tab__pane">
@@ -628,14 +783,20 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
           </div>
           <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+               id="van-tab"
                role="tabpanel"
+               tabindex="-1"
                aria-hidden="true"
+               aria-labelledby="van-tabs-2"
                style="width: 100px;"
           >
           </div>
           <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+               id="van-tab"
                role="tabpanel"
+               tabindex="-1"
                aria-hidden="true"
+               aria-labelledby="van-tabs-3"
                style="width: 100px;"
           >
           </div>
@@ -651,7 +812,8 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
@@ -660,7 +822,8 @@ exports[`should render demo and match snapshot 1`] = `
             Tab 1
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
@@ -669,7 +832,8 @@ exports[`should render demo and match snapshot 1`] = `
             Tab 2
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
@@ -678,7 +842,8 @@ exports[`should render demo and match snapshot 1`] = `
             Tab 3
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-3"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
@@ -699,8 +864,11 @@ exports[`should render demo and match snapshot 1`] = `
              class="van-swipe__track"
         >
           <div class="van-swipe-item van-tab__pane-wrapper"
+               id="van-tab"
                role="tabpanel"
+               tabindex="0"
                aria-hidden="false"
+               aria-labelledby="van-tabs-0"
                style="width: 100px;"
           >
             <div class="van-tab__pane">
@@ -708,8 +876,11 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
           </div>
           <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+               id="van-tab"
                role="tabpanel"
+               tabindex="-1"
                aria-hidden="true"
+               aria-labelledby="van-tabs-1"
                style="width: 100px;"
           >
             <div class="van-tab__pane">
@@ -717,14 +888,20 @@ exports[`should render demo and match snapshot 1`] = `
             </div>
           </div>
           <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+               id="van-tab"
                role="tabpanel"
+               tabindex="-1"
                aria-hidden="true"
+               aria-labelledby="van-tabs-2"
                style="width: 100px;"
           >
           </div>
           <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+               id="van-tab"
                role="tabpanel"
+               tabindex="-1"
                aria-hidden="true"
+               aria-labelledby="van-tabs-3"
                style="width: 100px;"
           >
           </div>
@@ -742,73 +919,89 @@ exports[`should render demo and match snapshot 1`] = `
                class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
                aria-orientation="horizontal"
           >
-            <div role="tab"
+            <div id="van-tabs-0"
+                 role="tab"
                  class="van-tab van-tab--active"
                  tabindex="0"
                  aria-selected="true"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text">
                 Tab 1
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-1"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text">
                 Tab 2
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-2"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text">
                 Tab 3
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-3"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text">
                 Tab 4
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-4"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text">
                 Tab 5
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-5"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text">
                 Tab 6
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-6"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text">
                 Tab 7
               </span>
             </div>
-            <div role="tab"
+            <div id="van-tabs-7"
+                 role="tab"
                  class="van-tab"
                  tabindex="-1"
                  aria-selected="false"
+                 aria-controls="van-tab"
             >
               <span class="van-tab__text">
                 Tab 8
@@ -823,43 +1016,67 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
       >
         content of tab 1
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
       >
         content of tab 2
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-2"
       >
         content of tab 3
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-3"
       >
         content of tab 4
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-4"
       >
         content of tab 5
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-5"
       >
         content of tab 6
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-6"
       >
         content of tab 7
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-7"
       >
         content of tab 8
       </div>
@@ -873,37 +1090,45 @@ exports[`should render demo and match snapshot 1`] = `
            class="van-tabs__nav van-tabs__nav--line"
            aria-orientation="horizontal"
       >
-        <div role="tab"
+        <div id="van-tabs-0"
+             role="tab"
              class="van-tab van-tab--active"
              tabindex="0"
              aria-selected="true"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 1
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-1"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 2
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-2"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 3
           </span>
         </div>
-        <div role="tab"
+        <div id="van-tabs-3"
+             role="tab"
              class="van-tab"
              tabindex="-1"
              aria-selected="false"
+             aria-controls="van-tab"
         >
           <span class="van-tab__text van-tab__text--ellipsis">
             Tab 4
@@ -916,24 +1141,36 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-tabs__content">
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-0"
            style
       >
         content of tab 1
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-1"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-2"
            style="display: none;"
       >
       </div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="-1"
+           aria-labelledby="van-tabs-3"
            style="display: none;"
       >
       </div>
diff --git a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
index 850bf72aa..e3b37943d 100644
--- a/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/tab/test/__snapshots__/index.spec.tsx.snap
@@ -2,13 +2,19 @@
 
 exports[`should allow to disable lazy-render prop 1`] = `
 <div class="van-tabs__content">
-  <div role="tabpanel"
+  <div id="van-tab"
+       role="tabpanel"
        class="van-tab__pane"
+       tabindex="-1"
+       aria-labelledby="van-tabs-0"
        style="display: none;"
   >
   </div>
-  <div role="tabpanel"
+  <div id="van-tab"
+       role="tabpanel"
        class="van-tab__pane"
+       tabindex="-1"
+       aria-labelledby="van-tabs-1"
        style="display: none;"
   >
   </div>
@@ -17,14 +23,20 @@ exports[`should allow to disable lazy-render prop 1`] = `
 
 exports[`should allow to disable lazy-render prop 2`] = `
 <div class="van-tabs__content">
-  <div role="tabpanel"
+  <div id="van-tab"
+       role="tabpanel"
        class="van-tab__pane"
+       tabindex="0"
+       aria-labelledby="van-tabs-0"
        style
   >
     Text
   </div>
-  <div role="tabpanel"
+  <div id="van-tab"
+       role="tabpanel"
        class="van-tab__pane"
+       tabindex="-1"
+       aria-labelledby="van-tabs-1"
        style="display: none;"
   >
     Text
@@ -39,28 +51,34 @@ exports[`should allow to set name prop 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -73,19 +91,28 @@ exports[`should allow to set name prop 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -103,9 +130,12 @@ DOMWrapper {
     "_values": Object {},
   },
   "wrapperElement": <div
+    aria-labelledby="van-tabs-0"
     class="van-tab__pane"
+    id="van-tab"
     role="tabpanel"
     style=""
+    tabindex="0"
   >
     
     Text
@@ -120,10 +150,12 @@ exports[`should not render empty tab 1`] = `
 `;
 
 exports[`should render badge prop correctly 1`] = `
-<div role="tab"
+<div id="van-tabs-0"
+     role="tab"
      class="van-tab van-tab--active"
      tabindex="0"
      aria-selected="true"
+     aria-controls="van-tab"
 >
   <div class="van-badge__wrapper">
     <span class="van-tab__text van-tab__text--ellipsis">
@@ -142,10 +174,12 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
        aria-orientation="horizontal"
   >
     Custom nav left
-    <div role="tab"
+    <div id="van-tabs-0"
+         role="tab"
          class="van-tab van-tab--active"
          tabindex="0"
          aria-selected="true"
+         aria-controls="van-tab"
     >
       <span class="van-tab__text van-tab__text--ellipsis">
         Title
@@ -167,28 +201,34 @@ exports[`should switch tab after click the tab title 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -201,19 +241,28 @@ exports[`should switch tab after click the tab title 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-0"
          style
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-1"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -228,28 +277,34 @@ exports[`should switch tab after click the tab title 2`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           title3
@@ -262,20 +317,29 @@ exports[`should switch tab after click the tab title 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
          style
     >
       Text
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -290,7 +354,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
@@ -299,7 +364,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
@@ -308,7 +374,8 @@ exports[`swipe switch tab after swiping tab content 1`] = `
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
@@ -329,8 +396,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
            class="van-swipe__track"
       >
         <div class="van-swipe-item van-tab__pane-wrapper"
+             id="van-tab"
              role="tabpanel"
+             tabindex="0"
              aria-hidden="false"
+             aria-labelledby="van-tabs-0"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -338,8 +408,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-1"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -347,8 +420,11 @@ exports[`swipe switch tab after swiping tab content 1`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-2"
              style="width: 100px;"
         >
         </div>
@@ -365,7 +441,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
@@ -374,7 +451,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
@@ -383,7 +461,8 @@ exports[`swipe switch tab after swiping tab content 2`] = `
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
@@ -404,8 +483,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
            class="van-swipe__track"
       >
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-0"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -413,8 +495,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper"
+             id="van-tab"
              role="tabpanel"
+             tabindex="0"
              aria-hidden="false"
+             aria-labelledby="van-tabs-1"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -422,8 +507,11 @@ exports[`swipe switch tab after swiping tab content 2`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-2"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -443,7 +531,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
@@ -452,7 +541,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
           title1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
@@ -461,7 +551,8 @@ exports[`swipe switch tab after swiping tab content 3`] = `
           title2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab van-tab--disabled"
            aria-selected="false"
            aria-disabled="true"
@@ -482,8 +573,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
            class="van-swipe__track"
       >
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-0"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -491,8 +585,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper"
+             id="van-tab"
              role="tabpanel"
+             tabindex="0"
              aria-hidden="false"
+             aria-labelledby="van-tabs-1"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
@@ -500,8 +597,11 @@ exports[`swipe switch tab after swiping tab content 3`] = `
           </div>
         </div>
         <div class="van-swipe-item van-tab__pane-wrapper van-tab__pane-wrapper--inactive"
+             id="van-tab"
              role="tabpanel"
+             tabindex="-1"
              aria-hidden="true"
+             aria-labelledby="van-tabs-2"
              style="width: 100px;"
         >
           <div class="van-tab__pane">
diff --git a/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap b/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
index a11855ee2..4fc9fd9f0 100644
--- a/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
+++ b/packages/vant/src/tab/test/__snapshots__/insert.spec.tsx.snap
@@ -7,28 +7,34 @@ exports[`should render Tab inside a component correctly 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           3
@@ -41,19 +47,28 @@ exports[`should render Tab inside a component correctly 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
          style
     >
       1
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
     </div>
@@ -68,28 +83,34 @@ exports[`should render correctly after inserting a tab 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           1
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           2
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-2"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           3
@@ -102,20 +123,29 @@ exports[`should render correctly after inserting a tab 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
     </div>
     <div>
-      <div role="tabpanel"
+      <div id="van-tab"
+           role="tabpanel"
            class="van-tab__pane"
+           tabindex="0"
+           aria-labelledby="van-tabs-1"
       >
         2
       </div>
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-2"
          style="display: none;"
     >
       3
@@ -131,19 +161,23 @@ exports[`should render correctly after inserting a tab with name 1`] = `
          class="van-tabs__nav van-tabs__nav--line"
          aria-orientation="horizontal"
     >
-      <div role="tab"
+      <div id="van-tabs-0"
+           role="tab"
            class="van-tab"
            tabindex="-1"
            aria-selected="false"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           bar
         </span>
       </div>
-      <div role="tab"
+      <div id="van-tabs-1"
+           role="tab"
            class="van-tab van-tab--active"
            tabindex="0"
            aria-selected="true"
+           aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
           foo
@@ -156,14 +190,20 @@ exports[`should render correctly after inserting a tab with name 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="-1"
+         aria-labelledby="van-tabs-0"
          style="display: none;"
     >
       bar
     </div>
-    <div role="tabpanel"
+    <div id="van-tab"
+         role="tabpanel"
          class="van-tab__pane"
+         tabindex="0"
+         aria-labelledby="van-tabs-1"
          style
     >
       foo
diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx
index 1bfc2fda5..b56d0e1f1 100644
--- a/packages/vant/src/tabs/Tabs.tsx
+++ b/packages/vant/src/tabs/Tabs.tsx
@@ -44,6 +44,7 @@ import {
   useEventListener,
   onMountedOrActivated,
 } from '@vant/use';
+import { useId } from '../composables/use-id';
 import { route, RouteProps } from '../composables/use-route';
 import { useRefs } from '../composables/use-refs';
 import { useExpose } from '../composables/use-expose';
@@ -123,6 +124,7 @@ export default defineComponent({
     const navRef = ref<HTMLElement>();
     const wrapRef = ref<HTMLElement>();
 
+    const id = useId();
     const scroller = useScrollParent(root);
     const [titleRefs, setTitleRefs] = useRefs<ComponentInstance>();
     const { children, linkChildren } = useChildren(TABS_KEY);
@@ -359,12 +361,14 @@ export default defineComponent({
     const renderNav = () =>
       children.map((item, index) => (
         <TabsTitle
+          id={`${id}-${index}`}
           ref={setTitleRefs(index)}
           type={props.type}
           color={props.color}
           style={item.titleStyle}
           class={item.titleClass}
           isActive={index === state.currentIndex}
+          controls={item.id}
           scrollable={scrollable.value}
           renderTitle={item.$slots.title}
           activeColor={props.titleActiveColor}
@@ -472,6 +476,7 @@ export default defineComponent({
     useEventListener('scroll', onScroll, { target: scroller });
 
     linkChildren({
+      id,
       props,
       setLine,
       onRendered,
diff --git a/packages/vant/src/tabs/TabsTitle.tsx b/packages/vant/src/tabs/TabsTitle.tsx
index 0f3f8dfa0..8a3c2bc7e 100644
--- a/packages/vant/src/tabs/TabsTitle.tsx
+++ b/packages/vant/src/tabs/TabsTitle.tsx
@@ -8,6 +8,7 @@ export default defineComponent({
   name,
 
   props: {
+    id: String,
     dot: Boolean,
     type: String,
     color: String,
@@ -15,6 +16,7 @@ export default defineComponent({
     badge: numericProp,
     isActive: Boolean,
     disabled: Boolean,
+    controls: String,
     scrollable: Boolean,
     activeColor: String,
     renderTitle: Function,
@@ -75,6 +77,7 @@ export default defineComponent({
 
     return () => (
       <div
+        id={props.id}
         role="tab"
         class={[
           bem({
@@ -86,6 +89,7 @@ export default defineComponent({
         tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}
         aria-selected={props.isActive}
         aria-disabled={props.disabled || undefined}
+        aria-controls={props.controls}
       >
         {renderText()}
       </div>
diff --git a/packages/vant/src/tabs/types.ts b/packages/vant/src/tabs/types.ts
index 55ac0d450..6181f4d89 100644
--- a/packages/vant/src/tabs/types.ts
+++ b/packages/vant/src/tabs/types.ts
@@ -11,6 +11,7 @@ export type TabsClickTabEventParams = {
 };
 
 export type TabsProvide = {
+  id: string;
   props: TabsProps;
   setLine: () => void;
   onRendered: (name: string | number, title?: string) => void;
diff --git a/packages/vant/src/vue-tsx-shim.d.ts b/packages/vant/src/vue-tsx-shim.d.ts
index a3edbabc0..6bb2fa09e 100644
--- a/packages/vant/src/vue-tsx-shim.d.ts
+++ b/packages/vant/src/vue-tsx-shim.d.ts
@@ -4,6 +4,7 @@ type EventHandler = (...args: any[]) => void;
 
 declare module 'vue' {
   interface ComponentCustomProps {
+    id?: string;
     role?: string;
     tabindex?: number;
     onClick?: EventHandler;