From fe7c0c38bf4e211aa44a5cca5ae8ff37b6543fdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Fri, 24 May 2019 11:33:22 +0800
Subject: [PATCH] [improvement] Tab: improve accessibility

---
 docs/markdown/changelog.zh-CN.md              |   1 +
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../test/__snapshots__/index.spec.js.snap     |   4 +-
 .../test/__snapshots__/index.spec.js.snap     |  20 +--
 .../test/__snapshots__/demo.spec.js.snap      |  10 +-
 .../list/test/__snapshots__/demo.spec.js.snap |  10 +-
 packages/tab/index.js                         |  13 +-
 .../tab/test/__snapshots__/demo.spec.js.snap  | 154 ++++++++---------
 .../tab/test/__snapshots__/index.spec.js.snap | 156 +++++++++---------
 packages/tabs/index.js                        |   4 +-
 10 files changed, 193 insertions(+), 181 deletions(-)

diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md
index b744135de..9ce090592 100644
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@@ -24,6 +24,7 @@
 
 ##### Tab
 
+- 支持无障碍访问
 - 新增`border`属性
 
 ##### Uploader
diff --git a/packages/address-list/test/__snapshots__/demo.spec.js.snap b/packages/address-list/test/__snapshots__/demo.spec.js.snap
index 7c739b4b9..837ec3217 100644
--- a/packages/address-list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-list/test/__snapshots__/demo.spec.js.snap
@@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
-      <div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
+      <div class="van-cell van-address-item van-address-item--disabled">
         <div class="van-cell__value van-cell__value--alone van-address-item__value">
           <div class="van-address-item__name">王五，1320000000</div>
           <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
diff --git a/packages/address-list/test/__snapshots__/index.spec.js.snap b/packages/address-list/test/__snapshots__/index.spec.js.snap
index 8087999b4..71609c3d5 100644
--- a/packages/address-list/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-list/test/__snapshots__/index.spec.js.snap
@@ -3,14 +3,14 @@
 exports[`unswitchable 1`] = `
 <div class="van-address-list">
   <div class="van-radio-group">
-    <div class="van-cell van-address-item van-address-item--unswitchable">
+    <div class="van-cell van-address-item">
       <div class="van-cell__value van-cell__value--alone van-address-item__value">
         <div class="van-address-item__name">张三，13000000000</div>
         <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
       </div><i class="van-icon van-icon-edit van-address-item__edit">
         <!----></i>
     </div>
-    <div class="van-cell van-address-item van-address-item--unswitchable">
+    <div class="van-cell van-address-item">
       <div class="van-cell__value van-cell__value--alone van-address-item__value">
         <div class="van-address-item__name">李四，1310000000</div>
         <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
diff --git a/packages/coupon-list/test/__snapshots__/index.spec.js.snap b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
index c6cfa051e..d8bebe676 100644
--- a/packages/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/packages/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -27,14 +27,14 @@ exports[`render coupon list 1`] = `
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap van-hairline--top-bottom">
-      <div class="van-tabs__nav van-tabs__nav--line">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
         <div class="van-tabs__line"></div>
-        <div class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (6)</span></div>
-        <div class="van-tab"><span class="van-ellipsis">不可使用优惠券 (2)</span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (6)</span></div>
+        <div role="tab" class="van-tab"><span class="van-ellipsis">不可使用优惠券 (2)</span></div>
       </div>
     </div>
     <div class="van-tabs__content">
-      <div class="van-tab__pane">
+      <div role="tabpanel" class="van-tab__pane">
         <div class="van-coupon-list__list" style="height: 628px;">
           <div class="van-coupon">
             <div class="van-coupon__content">
@@ -117,7 +117,7 @@ exports[`render coupon list 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-tab__pane" style="display: none;">
+      <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
         <!---->
       </div>
     </div>
@@ -152,21 +152,21 @@ exports[`render empty coupon list 1`] = `
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap van-hairline--top-bottom">
-      <div class="van-tabs__nav van-tabs__nav--line">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
         <div class="van-tabs__line"></div>
-        <div class="van-tab"><span class="van-ellipsis">可使用优惠券 (0)</span></div>
-        <div class="van-tab van-tab--active"><span class="van-ellipsis">不可使用优惠券 (0)</span></div>
+        <div role="tab" class="van-tab"><span class="van-ellipsis">可使用优惠券 (0)</span></div>
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-ellipsis">不可使用优惠券 (0)</span></div>
       </div>
     </div>
     <div class="van-tabs__content">
-      <div class="van-tab__pane" style="display: none;">
+      <div role="tabpanel" class="van-tab__pane" aria-hidden="true" style="display: none;">
         <div class="van-coupon-list__list" style="height: 628px;">
           <div class="van-coupon-list__empty"><img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>暂无优惠券</p>
           </div>
         </div>
       </div>
-      <div class="van-tab__pane" style="">
+      <div role="tabpanel" class="van-tab__pane" style="">
         <div class="van-coupon-list__list" style="height: 628px;">
           <div class="van-coupon-list__empty"><img src="https://img.yzcdn.cn/vant/coupon-empty.png">
             <p>暂无优惠券</p>
diff --git a/packages/index-bar/test/__snapshots__/demo.spec.js.snap b/packages/index-bar/test/__snapshots__/demo.spec.js.snap
index 6cda0c121..578dae5bd 100644
--- a/packages/index-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/index-bar/test/__snapshots__/demo.spec.js.snap
@@ -4,14 +4,14 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
-      <div class="van-tabs__nav van-tabs__nav--line">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
         <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-        <div class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
-        <div class="van-tab"><span class="van-ellipsis">自定义索引列表</span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
+        <div role="tab" class="van-tab"><span class="van-ellipsis">自定义索引列表</span></div>
       </div>
     </div>
     <div class="van-tabs__content">
-      <div class="van-tab__pane" style="">
+      <div role="tabpanel" class="van-tab__pane" style="">
         <div class="van-index-bar">
           <div class="van-index-bar__sidebar" style="z-index: 1;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
           <div>
@@ -328,7 +328,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-tab__pane" style="display: none;">
+      <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
         <!---->
       </div>
     </div>
diff --git a/packages/list/test/__snapshots__/demo.spec.js.snap b/packages/list/test/__snapshots__/demo.spec.js.snap
index d22d4f94c..1855178e1 100644
--- a/packages/list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/list/test/__snapshots__/demo.spec.js.snap
@@ -4,14 +4,14 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
-      <div class="van-tabs__nav van-tabs__nav--line">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
         <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-        <div class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
-        <div class="van-tab"><span class="van-ellipsis">错误提示</span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
+        <div role="tab" class="van-tab"><span class="van-ellipsis">错误提示</span></div>
       </div>
     </div>
     <div class="van-tabs__content">
-      <div class="van-tab__pane" style="">
+      <div role="tabpanel" class="van-tab__pane" style="">
         <div class="van-pull-refresh">
           <div class="van-pull-refresh__track" style="transition: 0ms;">
             <div class="van-pull-refresh__head"></div>
@@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-tab__pane" style="display: none;">
+      <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
         <!---->
       </div>
     </div>
diff --git a/packages/tab/index.js b/packages/tab/index.js
index dd397593f..3898e9a55 100644
--- a/packages/tab/index.js
+++ b/packages/tab/index.js
@@ -51,14 +51,23 @@ export default sfc({
 
     if (this.parent.animated) {
       return (
-        <div class={bem('pane-wrapper', { inactive: !this.selected })}>
+        <div
+          role="tabpanel"
+          aria-hidden={!this.selected}
+          class={bem('pane-wrapper', { inactive: !this.selected })}
+        >
           <div class={bem('pane')}>{Content}</div>
         </div>
       );
     }
 
     return (
-      <div vShow={this.selected} class={bem('pane')}>
+      <div
+        vShow={this.selected}
+        role="tabpanel"
+        class={bem('pane')}
+        aria-hidden={!this.selected}
+      >
         {Content}
       </div>
     );
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index 2ad45767e..2d32c3e59 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -5,25 +5,25 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 1</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
-          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 4</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 4</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="">
+        <div role="tabpanel" class="van-tab__pane" style="">
           内容 3
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -32,41 +32,41 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-          <div class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-ellipsis">标签 1</span></div>
-          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 2</span></div>
-          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 3</span></div>
-          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 4</span></div>
-          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 5</span></div>
-          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 6</span></div>
-          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 7</span></div>
-          <div class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 8</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 4</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 5</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 6</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 7</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-ellipsis">标签 8</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="">
+        <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -75,21 +75,21 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
-          <div class="van-tab van-tab--disabled"><span class="van-ellipsis">标签 2</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 3</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="">
+        <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -98,20 +98,20 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--card">
       <div class="van-tabs__wrap">
-        <div class="van-tabs__nav van-tabs__nav--card">
-          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 3</span></div>
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--card">
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="">
+        <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -120,17 +120,17 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="">
+        <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -139,25 +139,25 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 1</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
-          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 4</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 4</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="">
+        <div role="tabpanel" class="van-tab__pane" style="">
           内容 3
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -166,16 +166,16 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-          <div class="van-tab van-tab--active">
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active">
             <div>
               <div><i class="van-icon van-icon-more-o">
                   <!----></i>标签
               </div>
             </div>
           </div>
-          <div class="van-tab">
+          <div role="tab" class="van-tab">
             <div>
               <div><i class="van-icon van-icon-more-o">
                   <!----></i>标签
@@ -185,10 +185,10 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="">
+        <div role="tabpanel" class="van-tab__pane" style="">
           内容 1
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
@@ -197,32 +197,32 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 3</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 4</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 4</span></div>
         </div>
       </div>
       <div class="van-tabs__content van-tabs__content--animated">
         <div class="van-tabs__track" style="transform: translate3d(0%, 0, 0); transition-duration: 0.3s;">
-          <div class="van-tab__pane-wrapper">
+          <div role="tabpanel" class="van-tab__pane-wrapper">
             <div class="van-tab__pane">
               内容 1
             </div>
           </div>
-          <div class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
+          <div role="tabpanel" aria-hidden="true" class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
             <div class="van-tab__pane">
               <!---->
             </div>
           </div>
-          <div class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
+          <div role="tabpanel" aria-hidden="true" class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
             <div class="van-tab__pane">
               <!---->
             </div>
           </div>
-          <div class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
+          <div role="tabpanel" aria-hidden="true" class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
             <div class="van-tab__pane">
               <!---->
             </div>
@@ -234,25 +234,25 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div class="van-tabs__nav van-tabs__nav--line">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px);"></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 1</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 2</span></div>
-          <div class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
-          <div class="van-tab"><span class="van-ellipsis">标签 4</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 2</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab"><span class="van-ellipsis">标签 4</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
-        <div class="van-tab__pane" style="">
+        <div role="tabpanel" class="van-tab__pane" style="">
           内容 3
         </div>
-        <div class="van-tab__pane" style="display: none;">
+        <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
           <!---->
         </div>
       </div>
diff --git a/packages/tab/test/__snapshots__/index.spec.js.snap b/packages/tab/test/__snapshots__/index.spec.js.snap
index fc1cbdfef..2c006334c 100644
--- a/packages/tab/test/__snapshots__/index.spec.js.snap
+++ b/packages/tab/test/__snapshots__/index.spec.js.snap
@@ -3,7 +3,7 @@
 exports[`border props 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap">
-    <div class="van-tabs__nav van-tabs__nav--line">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
       <div class="van-tabs__line"></div>
     </div>
   </div>
@@ -14,21 +14,21 @@ exports[`border props 1`] = `
 exports[`change tabs data 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane">Text</div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane">Text</div>
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -38,20 +38,20 @@ exports[`change tabs data 1`] = `
 exports[`change tabs data 2`] = `
 <div class="van-tabs van-tabs--card">
   <div class="van-tabs__wrap">
-    <div class="van-tabs__nav van-tabs__nav--card" style="border-color: blue;">
-      <div class="van-tab van-tab--active" style="background-color: blue; border-color: blue;"><span class="van-ellipsis">new title1</span></div>
-      <div class="van-tab" style="color: blue; border-color: blue;"><span class="van-ellipsis"></span></div>
-      <div class="van-tab van-tab--disabled" style="border-color: blue;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--card" style="border-color: blue;">
+      <div class="van-tab van-tab--active" style="background-color: blue; border-color: blue;" role="tab" aria-selected="true"><span class="van-ellipsis">new title1</span></div>
+      <div role="tab" class="van-tab" style="color: blue; border-color: blue;"><span class="van-ellipsis"></span></div>
+      <div role="tab" class="van-tab van-tab--disabled" style="border-color: blue;">
         <div><span>title2</span></div>
       </div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane">Text</div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane">Text</div>
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -61,21 +61,21 @@ exports[`change tabs data 2`] = `
 exports[`click to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text</div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="">Text</div>
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -85,21 +85,21 @@ exports[`click to switch tab 1`] = `
 exports[`click to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px); transition-duration: 0.3s;"></div>
-      <div class="van-tab"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab van-tab--active">
+      <div role="tab" class="van-tab"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab van-tab--active" aria-selected="true">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="display: none;">Text</div>
-    <div class="van-tab__pane" style="">
+    <div role="tabpanel" class="van-tab__pane" style="display: none;" aria-hidden="true">Text</div>
+    <div role="tabpanel" class="van-tab__pane" style="">
       Text
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -109,20 +109,20 @@ exports[`click to switch tab 2`] = `
 exports[`lazy render 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab"><span class="van-ellipsis"></span></div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-ellipsis"></span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane">Text</div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane">Text</div>
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
       <div><span>title2</span></div>
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -132,21 +132,21 @@ exports[`lazy render 1`] = `
 exports[`lazy render 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane">Text</div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane">Text</div>
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       Text
     </div>
-    <div class="van-tab__pane" style="display: none;">Text</div>
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">Text</div>
   </div>
 </div>
 `;
@@ -154,19 +154,19 @@ exports[`lazy render 2`] = `
 exports[`render nav-left & nav-right slot 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">Nav Left<div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab"><span class="van-ellipsis"></span></div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>Nav Right
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">Nav Left<div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-ellipsis"></span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>Nav Right
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane">Text</div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane">Text</div>
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
       <div><span>title2</span></div>
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -176,21 +176,21 @@ exports[`render nav-left & nav-right slot 1`] = `
 exports[`swipe to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane">Text</div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane">Text</div>
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -200,21 +200,21 @@ exports[`swipe to switch tab 1`] = `
 exports[`swipe to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="display: none;">Text</div>
-    <div class="van-tab__pane" style="">
+    <div role="tabpanel" class="van-tab__pane" aria-hidden="true" style="display: none;">Text</div>
+    <div role="tabpanel" class="van-tab__pane" style="">
       Text
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -224,21 +224,21 @@ exports[`swipe to switch tab 2`] = `
 exports[`swipe to switch tab 3`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="display: none;">Text</div>
-    <div class="van-tab__pane" style="">
+    <div role="tabpanel" class="van-tab__pane" aria-hidden="true" style="display: none;">Text</div>
+    <div role="tabpanel" class="van-tab__pane" style="">
       Text
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
@@ -248,21 +248,21 @@ exports[`swipe to switch tab 3`] = `
 exports[`swipe to switch tab 4`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
-    <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
-      <div class="van-tab">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div role="tab" class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tab__pane" style="">Text</div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" class="van-tab__pane" style="">Text</div>
+    <div role="tabpanel" class="van-tab__pane" style="display: none;" aria-hidden="true">
       Text
     </div>
-    <div class="van-tab__pane" style="display: none;">
+    <div role="tabpanel" aria-hidden="true" class="van-tab__pane" style="display: none;">
       <!---->
     </div>
   </div>
diff --git a/packages/tabs/index.js b/packages/tabs/index.js
index 3d73607f4..3493b330b 100644
--- a/packages/tabs/index.js
+++ b/packages/tabs/index.js
@@ -413,6 +413,8 @@ export default sfc({
       <div
         ref="tabs"
         refInFor
+        role="tab"
+        aria-selected={index === this.curActive}
         class={tabBem({
           active: index === this.curActive,
           disabled: tab.disabled,
@@ -439,7 +441,7 @@ export default sfc({
             { 'van-hairline--top-bottom': type === 'line' && this.border }
           ]}
         >
-          <div ref="nav" class={bem('nav', [type])} style={this.navStyle}>
+          <div ref="nav" role="tablist" class={bem('nav', [type])} style={this.navStyle}>
             {this.slots('nav-left')}
             {type === 'line' && <div class={bem('line')} style={this.lineStyle} />}
             {Nav}