Merge branch 'master' of http://192.168.0.115:3000/shaogen1995/ShouBo into master

web/src/utils.js

@@ -17,6 +17,16 @@ function mapTags(tag) {
 }
 
 function extractTextForMagnify(e) {
+  if (e.type === 'focusin') {
+    const ariaLabel = e.path[0].getAttribute('aria-label')
+    if (ariaLabel) {
+      return {
+        elemDisc: '',
+        elemContent: ariaLabel
+      }
+    }
+  }
+  
   // console.log(e)
   if (e.path[0].nodeName === 'HTML') {
     return
@@ -65,7 +75,7 @@ function isSameObject(object1, object2) {
   return true
 }
 
-function getAndFocusNextNodeWithClassName(className) {
+function getAndFocusNextNodeWithCustomAttribute(attriName) {
   const startNode = (document.activeElement || document.body)
 
   const treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT)
@@ -80,14 +90,14 @@ function getAndFocusNextNodeWithClassName(className) {
       console.log('往下没找到')
       break
     }
-    if (nextNode.classList && [...nextNode.classList].some(item => item === className)) {
+    if (nextNode.dataset[attriName] !== undefined) {
       console.log('往下找到了')
       targetNode = nextNode
       break
     }
   }
 
-  if (!targetNode && startNode !== document.body) {
+  if (!targetNode && (startNode !== document.body)) {
     treeWalker.currentNode = document.body
     // eslint-disable-next-line
     while(true) {
@@ -96,8 +106,8 @@ function getAndFocusNextNodeWithClassName(className) {
         console.log('往上也没找到')
         break
       }
-      if (nextNode.classList && [...nextNode.classList].some(item => item === className)) {
-        console.log('网上找到了')
+      if (nextNode.dataset[attriName] !== undefined) {
+        console.log('往上找到了')
         targetNode = nextNode
         break
       }
@@ -106,6 +116,10 @@ function getAndFocusNextNodeWithClassName(className) {
 
   if (targetNode) {
     targetNode.focus()
+    if (document.activeElement !== targetNode) {
+      targetNode.setAttribute('tabindex', '0')
+      targetNode.focus()
+    }
   }
 
   return targetNode
@@ -197,5 +211,5 @@ export default {
   isSameObject,
   iterateOnFocusableNode,
   debounce,
-  getAndFocusNextNodeWithClassName,
+  getAndFocusNextNodeWithCustomAttribute,
 }

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/Home/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="Home">
     <!-- 轮播组件 -->
-    <el-carousel>
+    <el-carousel
+      data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the slider section. This section has four image URLs. To browse the content, please use the tab key."
+    >
       <el-carousel-item v-for="item in 4" :key="item">
         <img
           :src="require(`@/assets/images/swiper${item}.jpg`)"
@@ -11,7 +14,10 @@
       </el-carousel-item>
     </el-carousel>
     <!-- 底部 -->
-    <div class="bottomNav">
+    <div
+      class="bottomNav" data-aria-viewport-area tabindex="0"
+      aria-label="You've reached the pop-up window section; this section contains four URLs; please use the tab key to go through the content."
+    >
       <div class="t1" @click="$router.push('/Layout/Visit/2')">
         <div class="title">
           <span>Reservation</span>

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/accessibility.vue

@@ -669,11 +669,11 @@ export default {
           this.onClickMagnifier()
         }
       } else if (e.key === "1" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithClassName('aria-navigation-area')
+        utils.getAndFocusNextNodeWithCustomAttribute('ariaNavigationArea')
       } else if (e.key === "2" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithClassName('aria-viewport-area')
+        utils.getAndFocusNextNodeWithCustomAttribute('ariaViewportArea')
       } else if (e.key === "3" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithClassName('aria-interactive-area')
+        utils.getAndFocusNextNodeWithCustomAttribute('ariaInteractiveArea')
       }
     },
     loadStoredSettings() {

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>

web/src/views/layout/index.vue

@@ -8,7 +8,10 @@
           <h1 class="logo">
             <img src="@/assets/images/logo.png" alt="" />
           </h1>
-          <ul class="mainbav">
+          <ul
+            class="mainbav" tabindex="0" data-aria-navigation-area
+            aria-label="You have reached the horizontal menu at the top of the website. There are eight dropdown menus and 34 options in this section. To browse the content, please use the tab key."
+          >
             <li
               @click="skipOne(item.url)"
               :class="{ active: $route.meta.myName === item.name }"
@@ -39,7 +42,12 @@
           </ul>
         </div>
         <!-- 右侧的输入框 -->
-        <div class="search" @keyup.enter="search" v-if="!menaInd.includes('Search')">
+        <div
+          class="search" @keyup.enter="search" v-if="!menaInd.includes('Search')"
+          data-aria-interactive-area
+          aria-label="You've reached the seach field, please use the tab key to browse the content."
+          tabindex="0"
+        >
           <el-input
             placeholder="search..."
             suffix-icon="el-icon-search"
@@ -49,25 +57,13 @@
           <div class="btnn" @click="search"></div>
         </div>
       </div>
-      <!-- 固定的二维码和游戏 -->
-      <div class="rightNav">
-        <ul class="rightIco">
-          <li title="game">
-            <img src="@/assets/images/game.png" alt="" />
-          </li>
-          <li>
-            <img src="@/assets/images/code.png" alt="" />
-            <div>
-              <img src="@/assets/images/index_ewm1.png" alt="" />
-              <img src="@/assets/images/index_ewm.jpg" alt="" />
-            </div>
-          </li>
-        </ul>
-      </div>
       <!-- 嵌套路由 -->
       <Router-view />
       <!-- 底部固定栏 -->
-      <div class="footer">
+      <div
+        class="footer" data-aria-viewport-area tabindex="0"
+        aria-label="You've reached footer section at the bottom of the website. This section contains five URLs. To browse the content, please use the tab key."
+      >
         <div>
           <span
             @click="footTo(item.path)"
@@ -81,6 +77,24 @@
           100045, P.R.China.
         </p>
       </div>
+      <!-- 固定的二维码和游戏 -->
+      <div
+        class="rightNav" data-aria-viewport-area tabindex="0"
+        aria-label="You've reached the pop-up window section, which has one URL and one image. Please use the tab key to go through the information."
+      >
+        <ul class="rightIco">
+          <li title="game">
+            <img src="@/assets/images/game.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/images/code.png" alt="" />
+            <div>
+              <img src="@/assets/images/index_ewm1.png" alt="" />
+              <img src="@/assets/images/index_ewm.jpg" alt="" />
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -210,6 +224,7 @@ export default {
       font-size: 14px;
       color: #fff;
       line-height: 60px;
+      overflow: hidden;
       & > li {
         cursor: pointer;
         float: left;