无障碍：其他页面结构读屏

web/src/views/About/Director.vue

@@ -1,13 +1,19 @@
 <!--  -->
 <template>
   <div class="Director">
-    <div class="ban"></div>
-    <div class="pos">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the banner area of the From the Director page; this area has one image; please use the tab key to go through the content."
+    ></div>
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/About">About></Router-link>
     </div>
-    <div class="conten">
+    <div class="conten" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the content area of the From the Director page, please use the tab key to navigate through the content."
+    >
       <h1 class="webTitle">From the Director</h1>
       <div class="peopleBox">
         <h2>——<span>Leadership</span>——</h2>

web/src/views/About/index.vue

@@ -1,13 +1,19 @@
 <!--  -->
 <template>
   <div class="About">
-    <div class="ban"></div>
-    <div class="pos">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the banner area of the About page; this page has one image; please use the tab key to go through the content."
+    ></div>
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/About">About></Router-link>
     </div>
-    <div class="director">
+    <div class="director" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the From the Director section, please use the tab key to navigate through the content."
+    >
       <div>
         <p>Welcome to the website of the Capital Museum of China.</p>
         <p>
@@ -32,7 +38,9 @@
         Read More
       </p>
     </div>
-    <div class="history">
+    <div class="history" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the History section, please use the tab key to go through the content."
+    >
       <div>
         <p>
           <span
@@ -69,7 +77,9 @@
         </p>
       </div>
     </div>
-    <div class="partner">
+    <div class="partner" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the Patrners & Connections section, please use the tab key to go through the information."
+    >
       <ul>
         <li v-for="(item, index) in link" :key="index">
           <a :href="item.name" target="_blank" :title="item.pop">
@@ -87,7 +97,9 @@
         @click="$router.push('/Layout/About/link')"
       />
     </div>
-    <div class="contact">
+    <div class="contact" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the Contact section, please use the tab key to go through the information."
+    >
       <p>Official website of Capital Museum: <a :href="$homePageUrl">{{$homePageUrl}}</a></p>
       <p>
         Telephone reservation (individual visitors):

web/src/views/About/link.vue

@@ -1,26 +1,36 @@
 <!--  -->
 <template>
   <div class="AboutLink">
-    <div class="ban"></div>
-    <div class="pos">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the banner area of the Partners & Connections page; this page has one image; please use the tab key to go through the content."
+    ></div>
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has three URLs; please use the tab key to go through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/About">About></Router-link>
     </div>
-    <div class="lmname"></div>
-    <div class="wrap" :class="{wrap2:item.bac}" v-for="(item,index) in data" :key="index">
-      <div class="box">
-        <h2 :title="item.title">{{item.title}}</h2>
-        <div class="row" v-for="val in item.son" :key="val.img" :title="val.pop">
-          <a :href="val.url" target="_blank">
-            <span
-              :style="`background-image: url(/data/About/link/${val.img}.jpg)`"
-            ></span>
-          </a>
+    <div class="list-area" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the list of Partners & Connections, please use the tab key to navigate through the list."
+    >
+      <div class="lmname"></div>
+      <div class="wrap" :class="{wrap2:item.bac}" v-for="(item,index) in data" :key="index">
+        <div class="box">
+          <h2 :title="item.title">{{item.title}}</h2>
+          <div class="row" v-for="val in item.son" :key="val.img" :title="val.pop">
+            <a :href="val.url" target="_blank">
+              <span
+                :style="`background-image: url(/data/About/link/${val.img}.jpg)`"
+              ></span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-    <div class="join">
+    <div class="join" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the Join us section of the Partners & COnnections page, please use the tab key to navigate through the content."
+    >
       <img src="/data/About/botTxt.gif" alt="">
     </div>
   </div>

web/src/views/Collections/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="Collections">
-    <div class="ban"></div>
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the banner area of the Collections section; this section has one image; please use the tab key to go through the content."
+    ></div>
     <!-- 面包屑 -->
-    <div class="pos">
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has three URLs; use the tab key to go through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/Collections/Bronzes">Collections></Router-link>
@@ -10,7 +14,9 @@
     </div>
     <!-- 内容 -->
     <div class="conten" :class="mbTxt">
-      <ul>
+      <ul data-aria-viewport-area tabindex="0"
+        aria-label="You've reached the collection category menu, please use the tab key to navigate through the menu."
+      >
         <li
           @click="cutTab(item.url)"
           :class="{ active: mbTxt === item.url }"
@@ -24,7 +30,9 @@
         </li>
       </ul>
       <!-- 右侧内容 -->
-      <div class="right">
+      <div class="right" data-aria-viewport-area tabindex="0"
+        aria-label="You've reached the tiles of ${keyword}, please use the tab key to go through the tiles."
+      >
         <div
           class="row"
           v-for="(item, index) in data"

web/src/views/Events/index.vue

@@ -1,13 +1,19 @@
 <!--  -->
 <template>
   <div class="Events">
-    <div class="ban"></div>
-    <div class="pos">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the banner area of the Events page; this area has one image; please use the tab key to go through the content."
+    ></div>
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/Events">Events></Router-link>
     </div>
-    <div class="conten">
+    <div class="conten" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the content area of the Events page, please use the tab key to navigate through the content."
+    >
       <h1 class="cTitle">EVENTS</h1>
       <ul>
         <li v-for="(item, index) in data" :key="index" @click="skip(item.id)">

web/src/views/Events/info.vue

@@ -8,34 +8,42 @@
     <div class="conten">
       <img class="topBan" :src="`/data/About/Events/${imgInd}Ac.jpg`" alt="" />
       <div class="main">
-        <div class="pos">
+        <div class="pos" data-aria-viewport-area tabindex="0"
+          aria-label="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
+        >
           <span>Your Position:&nbsp;</span>
           <Router-link to="/Layout/Home">Home></Router-link>
           <Router-link to="/Layout/Events">Events></Router-link>
         </div>
-        <div class="title">
-          <div class="left">
-            <h3 v-html="info.h3"></h3>
-            <div class="txt">
-              <p
-                @click="skip(val.path)"
-                v-for="(val, index) in info.txt"
-                :key="index"
-              >
-                {{ val.name }}
-              </p>
+        <div class="mainContent" data-aria-viewport-area tabindex="0"
+          aria-label="You've reached the content area of the Events sub-page, please use the tab key to go through the content."
+        >
+          <div class="title">
+            <div class="left">
+              <h3 v-html="info.h3"></h3>
+              <div class="txt">
+                <p
+                  @click="skip(val.path)"
+                  v-for="(val, index) in info.txt"
+                  :key="index"
+                >
+                  {{ val.name }}
+                </p>
+              </div>
+            </div>
+            <div class="right">
+              <div>Date:</div>
+              <p>{{ info.i }}</p>
             </div>
           </div>
-          <div class="right">
-            <div>Date:</div>
-            <p>{{ info.i }}</p>
-          </div>
+          <div class="txtMain" v-html="info.main"></div>
         </div>
-        <div class="txtMain" v-html="info.main"></div>
       </div>
     </div>
     <!-- 底部的更多 -->
-    <div class="other">
+    <div class="other" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the View other events section of the Events sub-page; please use the tab key to go through the content."
+    >
       <h2>View Other Events</h2>
       <ul>
         <li

web/src/views/Exhibitions/component/List.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="ExhibitionsList">
     <div class="conten">
-      <div class="search">
+      <div class="search" data-aria-interactive-area tabindex="0"
+        aria-label="You've reached search box under the Exhibitions page; please use the tab key to go through the content."
+      >
         <div class="left">
           <!-- 点击放大镜 -->
           <div class="clickSearch" @click="search"></div>
@@ -49,7 +51,9 @@
       </div>
       <div class="null" v-if="data.length === 0">no information...</div>
       <!-- 列表详情信息 -->
-      <div class="list" v-if="!cut">
+      <div class="list" v-if="!cut" data-aria-viewport-area tabindex="0"
+        :aria-label="`You've reached the content area of the ${$parent.topLi[$route.params.id].name} page. To browse the content, please use the tab key.`"
+      >
         <div class="row" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
           <img :src="item.cover" alt="" />
           <div class="txt">

web/src/views/Exhibitions/index.vue

@@ -1,8 +1,12 @@
 <!--  -->
 <template>
   <div class="Exhibitions">
-    <div class="ban"></div>
-    <div class="nav_2">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      :aria-label="`You've reached the banner area of the ${topLi[$route.params.id].name} page; this area has one image; please use the tab key to navigate through the content.`"
+    ></div>
+    <div class="nav_2" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the secondary menu under the Exhibition section. This menu contains four options. To browse the content,  please use the tab key."
+    >
       <ul>
         <li
           :class="{ cur: topId === item.id }"
@@ -18,7 +22,9 @@
         </li>
       </ul>
     </div>
-    <div class="pos">
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area contains three URLs; please use the tab key to go through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/Exhibitions/1">Exhibitions></Router-link>
@@ -72,7 +78,8 @@ export default {
     };
   },
   //监听属性 类似于data概念
-  computed: {},
+  computed: {
+  },
   //监控data中的数据变化
   watch: {
     // 监听地址栏参数变化

web/src/views/Exhibitions/info.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="ExhibitionsInfo">
-    <div class="topImg">
+    <div class="topImg" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the banner area of the tertiary exhibition page; this area has one image; please use the tab key to go through the content."
+    >
       <img
         :src="`/data/Exhibitions/${dataUrl}/infoTop${data.topImg}.jpg`"
         alt=""
       />
     </div>
     <!-- 面包屑 -->
-    <div class="pos">
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has three URLs; please use the tab key to go through the content."
+    >
       <div>
         <span class="pos1">Your Position:&nbsp;</span>
         <Router-link to="/Layout/Home">Home></Router-link>
@@ -19,13 +23,19 @@
     <div class="conten">
       <!-- Exhibition Overview -->
       <div class="y_box" ref="Overview">
-        <div class="title_2">{{ data.title }}</div>
-        <div class="info">
-          <span class="info_1">{{ data.date }}</span>
-          <span class="info_2">{{ data.time }}</span>
-          <span class="info_3">{{ data.loc }}</span>
+        <div class="title_area" data-aria-viewport-area tabindex="0"
+          aria-label="You've reached the section of exhibition title, please use the tab key to navigate through the content."
+        >
+          <div class="title_2">{{ data.title }}</div>
+          <div class="info">
+            <span class="info_1">{{ data.date }}</span>
+            <span class="info_2">{{ data.time }}</span>
+            <span class="info_3">{{ data.loc }}</span>
+          </div>
         </div>
-        <div class="content_2">
+        <div class="content_2" data-aria-viewport-area tabindex="0"
+          aria-label="You've reached the section of exhibition overview, please use the tab key to go through the content."
+        >
           <div class="title_3">——<span>Exhibition Overview</span>——</div>
           <div
             v-show="index === pageInd"
@@ -58,7 +68,9 @@
         </div>
       </div>
       <!-- Exhibition Objects -->
-      <div class="picpart" ref="Objects" :class="{ null: data.objects === 0 }">
+      <div class="picpart" ref="Objects" v-if="data.objects !== 0" data-aria-viewport-area tabindex="0"
+        aria-label="You've reached the section of exhibition objects, please use the tab key to go through the content."
+      >
         <div class="title_3">——<span>Exhibition Objects</span>——</div>
         <!-- 图片 -->
         <div class="row" :class="{ show: showObjects }">
@@ -90,7 +102,10 @@
       <div
         class="other"
         ref="Galleries"
-        :class="{ nullG: data.galleries === 0 }"
+        data-aria-viewport-area
+        tabindex="0"
+        aria-label="You've reached the section of exhibition galleries, please use the tab key to go through the content."
+        v-if="data.galleries !== 0"
       >
         <div class="title_3">——<span>Exhibition Galleries</span>——</div>
         <!-- 图片 -->
@@ -219,7 +234,9 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.$eventBus.$emit('request-read', `You've reached the tertiary exhibition page. There is one navigation section, eight window sections, and one interactive section on this page. To choose a section, please hit the shortcut key.`)
+    setTimeout(() => {
+      this.$eventBus.$emit('request-read', `You've reached the tertiary exhibition page. There is one navigation section, ${document.querySelectorAll('*[data-aria-viewport-area]').length} window sections, and one interactive section on this page. To choose a section, please hit the shortcut key.`)
+    }, 100);
     
     let { id, k } = this.$route.query;
     id = Number(id);
@@ -332,6 +349,7 @@ export default {
     .y_box {
       background: #fff;
       border: 1px solid #e0e0e0;
+      margin-bottom: 40px;
       .title_2 {
         font-size: 30px;
         line-height: 44px;
@@ -464,13 +482,6 @@ export default {
         height: auto;
       }
     }
-    .null {
-      height: 0px;
-      overflow: hidden;
-      padding: 0;
-      margin-top: 0;
-      border: none;
-    }
     .other {
       background: #fff;
       border: 1px solid #e0e0e0;
@@ -492,13 +503,6 @@ export default {
         height: auto;
       }
     }
-    .nullG {
-      height: 0px;
-      overflow: hidden;
-      padding: 0;
-      margin-top: 0;
-      border: none;
-    }
   }
   .back_btn {
     height: 38px;

web/src/views/JoinSupport/Give.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="Give">
+  <div class="Give" data-aria-viewport-area tabindex="0"
+    aria-label="You've reached the content area of the Ways to Give page, please use the tab key to go through the content."
+  >
     <div class="row">
       <div class="left">
         <div class="txt" @click="skip(4)">Individuals</div>

web/src/views/JoinSupport/Volunteer.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="Volunteer">
+  <div class="Volunteer" data-aria-viewport-area tabindex="0"
+    aria-label="You've reached the content area of the Ways to Volunteer page, please use the tab key to go through the content."
+  >
     <div
       class="row"
       v-for="(item, index) in data"

web/src/views/JoinSupport/index.vue

@@ -1,8 +1,12 @@
 <!--  -->
 <template>
   <div class="JoinSupport">
-    <div class="ban"></div>
-    <div class="nav_2">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      :aria-label="`You've reached the banner area of the ${$route.meta.nameAll} page; this area has one image; please use the tab key to go through the content.`"
+    ></div>
+    <div class="nav_2" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the secondary menu of the Join & Support section; this menu has two options; please use the tab key to go through the menu."
+    >
       <ul>
         <li
           :class="{ cur: $route.meta.nameAll === item.url }"
@@ -18,7 +22,9 @@
         </li>
       </ul>
     </div>
-    <div class="pos">
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area, this area has three URLs; please use the tab key to navigate through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/JoinSupport/Volunteer">Join & Support ></Router-link>

web/src/views/LearnEngage/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="LearnEngage">
-    <div class="ban"></div>
-    <div class="nav_2">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      :aria-label="`You've reached the banner area of the ${currentTabText} page; this section has one image; please use the tab key to go through the content.`"
+    ></div>
+    <div class="nav_2" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the secondary menu of the Learn & Engage section; this menu has three options; please use the tab key to go through the menu."
+    >
       <ul>
         <li
           :class="{ cur: topId === item.url }"
@@ -15,18 +19,20 @@
       </ul>
     </div>
     <!-- 面包屑 -->
-    <div class="pos">
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area, please use the tab key to navigate through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/LearnEngage/Students"
         >Learn & Engage></Router-link
       >
-      <span
-        >For {{ topId === "Families" ? "Families & Children" : topId }}></span
-      >
+      <span>{{currentTabText}}</span>
     </div>
     <!-- 内容 -->
-    <div class="conten">
+    <div class="conten" data-aria-viewport-area tabindex="0"
+      :aria-label="`You've reached the content area of the ${currentTabText} page, please use the tab key to go through the content.`"
+    >
       <div
         class="row"
         v-for="item in data[pageSize - 1]"
@@ -74,7 +80,11 @@ export default {
       pageSize: 1,
     };
   },
-  computed: {},
+  computed: {
+    currentTabText() {
+      return `For ${this.topId === "Families" ? "Families & Children" : this.topId }`
+    }
+  },
   watch: {
     // 监听地址栏参数变化
     $route() {

web/src/views/LearnEngage/info.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="LearnEngageInfo">
-    <div class="ban"></div>
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the banner area of the tertiary Learn & Engage page; this area has one image; please use the tab key to go through the content."
+    ></div>
     <!-- 面包屑 -->
-    <div class="pos">
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has three URLs; please use the tab key to go through the content."
+    >
       <div>
         <span class="pos1">Your Position:&nbsp;</span>
         <Router-link to="/Layout/Home">Home></Router-link>
@@ -15,7 +19,9 @@
       </div>
     </div>
     <!-- 内容 -->
-    <div class="conten">
+    <div class="conten" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the content area of the tertiary Learn & Engage page, please use the tab key to navigate through the content."
+    >
       <div class="title">{{ dataObj.title }}</div>
       <div class="info">
         <span class="info1">{{ dataObj.time }}</span>

web/src/views/Publications/Publications1.vue

@@ -1,36 +1,44 @@
 <!--  -->
 <template>
   <div class="Publications1">
-    <div class="title">
-      <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
-      <span>{{ $route.meta.nameAll }}</span>
-      <div class="xian"></div>
+    <div class="magzines-wrapper" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the content area of the Magazines page, please use the tab key to go through the content."
+    >
+      <div class="title">
+        <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
+        <span>{{ $route.meta.nameAll }}</span>
+        <div class="xian"></div>
+      </div>
+      <div class="conten">
+        <!-- 左侧 -->
+        <div class="menu">
+          <p
+            :class="{ cur: txtInd === index }"
+            v-for="(item, index) in txtData"
+            @click="txtInd = index"
+            :key="index"
+          >
+            {{ item.name }}<span v-show="txtInd === index"></span>
+          </p>
+        </div>
+        <!-- 右侧 -->
+        <div class="rightTxt" v-html="txtData[txtInd].conten"></div>
+      </div>
     </div>
-    <div class="conten">
-      <!-- 左侧 -->
-      <div class="menu">
-        <p
-          :class="{ cur: txtInd === index }"
-          v-for="(item, index) in txtData"
-          @click="txtInd = index"
-          :key="index"
+    <div class="our-magzines-wrapper" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the Our Magazines section, please use the tab key to go through the content."
+    >
+      <div class="title_2">Our Magazines</div>
+      <!-- 下面书籍 -->
+      <div class="tabTimeBox">
+        <span
+          @mouseenter="dateInd = i"
+          :class="{ cur: i === dateInd }"
+          v-for="i in dateData"
+          :key="i"
+          >{{ i }}</span
         >
-          {{ item.name }}<span v-show="txtInd === index"></span>
-        </p>
       </div>
-      <!-- 右侧 -->
-      <div class="rightTxt" v-html="txtData[txtInd].conten"></div>
-    </div>
-    <div class="title_2">Our Magazines</div>
-    <!-- 下面书籍 -->
-    <div class="tabTimeBox">
-      <span
-        @mouseenter="dateInd = i"
-        :class="{ cur: i === dateInd }"
-        v-for="i in dateData"
-        :key="i"
-        >{{ i }}</span
-      >
     </div>
     <ul class="imgList">
       <li v-for="item in imgList" :key="item.id" @click="jump(item.id)">

web/src/views/Publications/Publications2.vue

@@ -1,6 +1,8 @@
 <!--  -->
 <template>
-  <div class="Publications2">
+  <div class="Publications2" data-aria-viewport-area tabindex="0"
+    aria-label="You've reached the content area of the Exhibition Catalogues page, please use the tab key to go through the content."
+  >
     <div class="title">
       <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
       <span>{{ $route.meta.nameAll }}</span>

web/src/views/Publications/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="Publications">
-    <div class="ban" :class="banImg"></div>
-    <div class="nav_2">
+    <div class="ban" :class="banImg" data-aria-viewport-area tabindex="0"
+      :aria-label="`You've reached the banner area of the ${$route.meta.nameAll} page; this area has one image; please use the tab key to go through the content.`"
+    ></div>
+    <div class="nav_2" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the secondary menu of the Publications section; this menu has three options; please use the tab key to go through the menu."
+    >
       <ul>
         <li
           :class="{ cur: $route.meta.nameAll === item.name }"
@@ -15,7 +19,9 @@
       </ul>
     </div>
     <!-- 面包屑 -->
-    <div class="pos">
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area, this area has three URLs; please use the tab key to navigate through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/Publications/1">Publications></Router-link>

web/src/views/Search/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="Search">
-    <div class="pos">
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has three URLs; please use the tab key to go through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <span>Search></span>
@@ -10,12 +12,16 @@
       Search
       <span> {{num}} results</span>
     </div>
-    <div class="searchForm">
+    <div class="searchForm" data-aria-interactive-area tabindex="0"
+      aria-label="You've reached the Search interactive section, please use the tab key to go through the content."
+    >
       <input class="searchWord" type="text" v-model="txt" />
       <div class="searchBtn" @click="searchBtn">Search</div>
     </div>
     <!-- 切换tab动态路由 -->
-    <div class="searchMenu">
+    <div class="searchMenu" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the content area of the Search results page, please use the tab key to navigate through the content."
+    >
       <div v-for="item in tabData" :key="item.id">
         <span
           :class="{ active: cut === item.cut }"
@@ -31,7 +37,9 @@
       </div>
     </div>
     <!-- 动态组件 -->
-    <div class="comm">
+    <div class="comm" data-aria-viewport-area tabindex="0"
+      :aria-label="`You've reached the content area of ${cut} list, please use the tab key to navigate through the content.`"
+    >
       <component ref="comSon" :is="cut" :txt='txt' :num.sync='num'></component>
     </div>
   </div>

web/src/views/Visit/Visit1.vue

@@ -1,5 +1,7 @@
 <template>
-<div class='Visit1'>
+<div class='Visit1' data-aria-viewport-area tabindex="0"
+  aria-label="You have reached the content area of the Hours, Directions, and Admission page. This area contains one image. To browse the content, please use the tab key."
+>
   <div class="box1">
     <img src="../../assets/images/Visit/Visit1.jpg" alt="">
   </div>

web/src/views/Visit/Visit2.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="Visit2">
+  <div class="Visit2" data-aria-viewport-area tabindex="0"
+    aria-label="You've reached the content area for the Reservation page. This area contains three parts of content. Please press the tab key to browse the information."
+  >
     <div
       class="public"
       :class="{ hintShow: hintShow }"

web/src/views/Visit/Visit3.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="Visit3">
+  <div class="Visit3" data-aria-viewport-area tabindex="0"
+    aria-label="You've reached the content area for the Floor Plans page; this area has seven images; please use the tab key to navigate through the content."
+  >
     <div class="conten">
       <div class="box5">
         <ul>

web/src/views/Visit/Visit4.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="Visit4">
+  <div class="Visit4" data-aria-viewport-area tabindex="0"
+    aria-label="You have reached the content area under the Audio Guide & Tour page. To browse the content, use the tab key."
+  >
     <div class="conten">
       <div class="row">
         <div>

web/src/views/Visit/Visit5.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="Visit5">
+  <div class="Visit5" data-aria-viewport-area tabindex="0"
+    aria-label="You have reached the content area under the Accessibility page. To browse the content, please use the tab key."
+  >
     <div class="conten">
       <div class="row">
         <div>

web/src/views/Visit/Visit6.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="Visit6">
+  <div class="Visit6" data-aria-viewport-area tabindex="0"
+    aria-label="You have reached the content area of the Café & Shop page. To browse the content, please use the tab key."
+  >
     <div class="conten">
       <div class="row">
         <div>

web/src/views/Visit/Visit7.vue

@@ -1,5 +1,7 @@
 <template>
-<div class='Visit7'>
+<div class='Visit7' data-aria-viewport-area tabindex="0"
+  aria-label=" You have reached the content area of the Visitor Guidelines page. To browse the content, please use the tab key."
+>
   <div class="conten">
     <div class="top">
       <img src="../../assets/images/Visit/last1.jpg" alt="">

web/src/views/Visit/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="Visit">
-    <div class="ban"></div>
-    <div class="nav_2">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      :aria-label="`You've reached the banner area of the ${$route.meta.nameAll} page; this area has one image; please use the tab key to navigate through the content.`"
+    ></div>
+    <div class="nav_2" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the secondary menu under the Visit section. This menu contains seven options. To browse the content, please use the tab key."
+    >
       <ul>
         <li
           :class="{ cur: $route.meta.nameAll === item.name }"
@@ -14,7 +18,9 @@
         </li>
       </ul>
     </div>
-    <div class="pos">
+    <div class="pos" data-aria-viewport-area tabindex="0"
+       aria-label="You've reached the path area; this area contains three URLs; please use the tab key to go through the content."
+    >
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
       <Router-link to="/Layout/Visit">Visit></Router-link>

web/src/views/bottom/Employment.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="bottomEmployment">
-    <div class="ban"></div>
-    <div class="pos">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the banner area of the Employment page; this area has one image; please use the tab key to go through the content."
+    ></div>
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has one link; please use the tab key to go through the content."
+    >
       <div>
         <span class="pos1">Your Position:&nbsp;</span>
         <Router-link to="/Layout/Home">Home></Router-link>
       </div>
     </div>
-    <div class="conten">
+    <div class="conten" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the content area of the Employment page, please use the tab key to navigate through the content."
+    >
       <!-- Exhibition Overview -->
       <div class="y_box">
         <div class="title_2">

web/src/views/bottom/Index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="bottomIndex">
+  <div class="bottomIndex" data-aria-viewport-area tabindex="0"
+    aria-label="You've reached the content area of the Site Index, please use the tab key to navigate through the content."
+  >
     <img src="/data/Index/1.jpg" alt="" />
     <div class="home" title="Home">
       <img src="/data/Index/home.jpg" alt="" @click="skip('/')" />

web/src/views/bottom/Use.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="bottomUse">
-    <div class="ban"></div>
-    <div class="pos">
+    <div class="ban" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the banner area of the Term of use page; this area has one image; please use the tab key to go through the content."
+    ></div>
+    <div class="pos" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the path area; this area has one link; please use the tab key to go through the content."
+    >
       <div>
         <span class="pos1">Your Position:&nbsp;</span>
         <Router-link to="/Layout/Home">Home></Router-link>
       </div>
     </div>
-    <div class="conten">
+    <div class="conten" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the content area of the Terms of Use page, please use the tab key to navigate through the content."
+    >
       <!-- Exhibition Overview -->
       <div class="y_box">
         <div class="title_2">Terms of Use</div>