无障碍：调整提取无障碍解说文字规则

web/README.md

@@ -37,6 +37,9 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 * data-aria-navigation-area: 手动添加到导航区。
 * data-aria-viewport-area: 手动添加到视窗区。
 * data-aria-interactive-area: 手动添加到交互区。
+* tabindex: 手动添加，表示这个元素需要在被聚焦、鼠标hover时提取出无障碍信息来朗读、显示。
+* aria-label: 手动添加，可选，表示元素在无障碍信息中显示的类型，不写的话会根据元素标签得到其在无障碍信息中显示的类型。
+* aria-description: 手动添加，可选，表示元素在无障碍信息中显示的详细描述，不写的话会拿元素的innerText作为描述。
 
 ## 特殊node（自动添加）
 * `<style id="aria-big-cursor-style-node"></style>`: 大号光标样式代码。

web/src/utils.js

@@ -2,49 +2,65 @@ function mapTags(tag) {
   let ret = ''
   switch (tag) {
   case 'A':
-    ret = 'link: '
+    ret = 'Link: '
+    break
+  case 'BUTTON':
+    ret = 'Link: '
     break
   case 'IMG':
-    ret = 'image: '
+    ret = 'Image: '
     break
-  case 'BUTTON':
-    ret = 'button: '
+  case 'INPUT':
+    ret = 'Textbox: '
+    break
+  case 'TEXTAREA':
+    ret = 'Textbox: '
     break
   default:
+    ret = 'Text: '
     break
   }
   return ret
 }
 
 function extractTextForMagnify(e) {
-  if (e.type === 'focusin') {
-    const ariaLabel = e.path[0].getAttribute('aria-label')
-    if (ariaLabel) {
-      return {
-        elemDisc: '',
-        elemContent: ariaLabel
-      }
+  let meaningfulNode = e.path[0]
+  console.log(meaningfulNode);
+  while (!meaningfulNode.getAttribute || !meaningfulNode.getAttribute('tabindex')) {
+    meaningfulNode = meaningfulNode.parentNode
+    if (!meaningfulNode) {
+      return
     }
   }
   
-  // console.log(e)
-  if (e.path[0].nodeName === 'HTML') {
+  if (e.type === 'mouseover' && (
+      meaningfulNode.getAttribute('data-aria-navigation-area') !== null ||
+      meaningfulNode.getAttribute('data-aria-viewport-area') !== null ||
+      meaningfulNode.getAttribute('data-aria-interactive-area') !== null
+    )
+  ) {
     return
   }
-  // console.log(e.path[0].tagName)
-  if (e.path[0].children.length === 0) {
-    return {
-      elemDisc: mapTags(e.path[0].tagName),
-      elemContent: e.path[0].innerText,
-    }
+
+  let elemType = ''
+  const ariaLabel = meaningfulNode.getAttribute('aria-label')
+  if (ariaLabel !== null) {
+    elemType = ariaLabel
   } else {
-    const eventTargetChildNodes = Array(...e.path[0].childNodes)
-    if (eventTargetChildNodes.some(item => (item.nodeType === 3) || (item.nodeType === 1))) {
-      return {
-        elemDisc: mapTags(e.path[0].tagName),
-        elemContent: e.path[0].innerText,
-      }
-    }
+    elemType = mapTags(meaningfulNode.tagName)
+  }
+
+  let elemDisc = ''
+  const ariaDescription = meaningfulNode.getAttribute('aria-description')
+  if (ariaDescription !== null) {
+    elemDisc = ariaDescription
+  } else {
+    elemDisc = meaningfulNode.innerText
+  }
+
+  return {
+    elemType,
+    elemDisc
   }
 }
 

web/src/views/About/Director.vue

@@ -2,17 +2,17 @@
 <template>
   <div class="Director">
     <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."
+      aria-label aria-description="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."
+      aria-label aria-description="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" 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."
+      aria-label aria-description="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">

web/src/views/About/index.vue

@@ -2,17 +2,17 @@
 <template>
   <div class="About">
     <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."
+      aria-label aria-description="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."
+      aria-label aria-description="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" 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."
+      aria-label aria-description="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>
@@ -39,7 +39,7 @@
       </p>
     </div>
     <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."
+      aria-label aria-description="You've reached the History section, please use the tab key to go through the content."
     >
       <div>
         <p>
@@ -78,7 +78,7 @@
       </div>
     </div>
     <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."
+      aria-label aria-description="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">
@@ -98,7 +98,7 @@
       />
     </div>
     <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."
+      aria-label aria-description="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>

web/src/views/About/link.vue

@@ -2,17 +2,17 @@
 <template>
   <div class="AboutLink">
     <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."
+      aria-label aria-description="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."
+      aria-label aria-description="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="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."
+      aria-label aria-description="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">
@@ -29,7 +29,7 @@
       </div>
     </div>
     <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."
+      aria-label aria-description="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>

web/src/views/Collections/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="Collections">
     <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."
+      aria-label aria-description="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" 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."
+      aria-label aria-description="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>
@@ -15,7 +15,7 @@
     <!-- 内容 -->
     <div class="conten" :class="mbTxt">
       <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."
+        aria-label aria-description="You've reached the collection category menu, please use the tab key to navigate through the menu."
       >
         <li
           @click="cutTab(item.url)"
@@ -31,7 +31,7 @@
       </ul>
       <!-- 右侧内容 -->
       <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."
+        aria-label aria-description="You've reached the tiles of ${keyword}, please use the tab key to go through the tiles."
       >
         <div
           class="row"

web/src/views/Events/index.vue

@@ -2,17 +2,17 @@
 <template>
   <div class="Events">
     <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."
+      aria-label aria-description="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."
+      aria-label aria-description="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" 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."
+      aria-label aria-description="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>

web/src/views/Events/info.vue

@@ -9,14 +9,14 @@
       <img class="topBan" :src="`/data/About/Events/${imgInd}Ac.jpg`" alt="" />
       <div class="main">
         <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."
+          aria-label aria-description="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="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."
+          aria-label aria-description="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">
@@ -42,7 +42,7 @@
     </div>
     <!-- 底部的更多 -->
     <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."
+      aria-label aria-description="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>

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

@@ -2,7 +2,7 @@
   <div class="ExhibitionsList">
     <div class="conten">
       <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."
+        aria-label aria-description="You've reached search box under the Exhibitions page; please use the tab key to go through the content."
       >
         <div class="left">
           <!-- 点击放大镜 -->
@@ -52,7 +52,7 @@
       <div class="null" v-if="data.length === 0">no information...</div>
       <!-- 列表详情信息 -->
       <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.`"
+        aria-label :aria-description="`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="" />

web/src/views/Exhibitions/index.vue

@@ -2,10 +2,10 @@
 <template>
   <div class="Exhibitions">
     <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.`"
+      aria-label :aria-description="`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."
+      aria-label aria-description="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
@@ -23,7 +23,7 @@
       </ul>
     </div>
     <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."
+      aria-label aria-description="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>

web/src/views/Exhibitions/info.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ExhibitionsInfo">
     <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."
+      aria-label aria-description="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`"
@@ -10,7 +10,7 @@
     </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."
+      aria-label aria-description="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>
@@ -24,7 +24,7 @@
       <!-- Exhibition Overview -->
       <div class="y_box" ref="Overview">
         <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."
+          aria-label aria-description="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">
@@ -34,7 +34,7 @@
           </div>
         </div>
         <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."
+          aria-label aria-description="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
@@ -69,7 +69,7 @@
       </div>
       <!-- Exhibition Objects -->
       <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."
+        aria-label aria-description="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>
         <!-- 图片 -->
@@ -104,7 +104,7 @@
         ref="Galleries"
         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."
+        aria-label aria-description="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>

web/src/views/Home/index.vue

@@ -3,7 +3,7 @@
     <!-- 轮播组件 -->
     <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."
+      aria-label aria-description="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
@@ -16,7 +16,7 @@
     <!-- 底部 -->
     <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."
+      aria-label aria-description="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">

web/src/views/JoinSupport/Give.vue

@@ -1,6 +1,6 @@
 <template>
   <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."
+    aria-label aria-description="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">

web/src/views/JoinSupport/Volunteer.vue

@@ -1,6 +1,6 @@
 <template>
   <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."
+    aria-label aria-description="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"

web/src/views/JoinSupport/index.vue

@@ -2,10 +2,10 @@
 <template>
   <div class="JoinSupport">
     <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.`"
+      aria-label :aria-description="`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."
+      aria-label aria-description="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
@@ -23,7 +23,7 @@
       </ul>
     </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 navigate through the content."
+      aria-label aria-description="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>

web/src/views/LearnEngage/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="LearnEngage">
     <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.`"
+      aria-label :aria-description="`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."
+      aria-label aria-description="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
@@ -20,7 +20,7 @@
     </div>
     <!-- 面包屑 -->
     <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."
+      aria-label aria-description="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>
@@ -31,7 +31,7 @@
     </div>
     <!-- 内容 -->
     <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.`"
+      aria-label :aria-description="`You've reached the content area of the ${currentTabText} page, please use the tab key to go through the content.`"
     >
       <div
         class="row"

web/src/views/LearnEngage/info.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="LearnEngageInfo">
     <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."
+      aria-label aria-description="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" 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."
+      aria-label aria-description="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>
@@ -20,7 +20,7 @@
     </div>
     <!-- 内容 -->
     <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."
+      aria-label aria-description="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">

web/src/views/Publications/Publications1.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="Publications1">
     <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."
+      aria-label aria-description="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="" />
@@ -26,7 +26,7 @@
       </div>
     </div>
     <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."
+      aria-label aria-description="You've reached the Our Magazines section, please use the tab key to go through the content."
     >
       <div class="title_2">Our Magazines</div>
       <!-- 下面书籍 -->

web/src/views/Publications/Publications2.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <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."
+    aria-label aria-description="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="" />

web/src/views/Publications/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="Publications">
     <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.`"
+      aria-label :aria-description="`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."
+      aria-label aria-description="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
@@ -20,7 +20,7 @@
     </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 navigate through the content."
+      aria-label aria-description="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>

web/src/views/Search/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="Search">
     <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."
+      aria-label aria-description="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>
@@ -13,14 +13,14 @@
       <span> {{num}} results</span>
     </div>
     <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."
+      aria-label aria-description="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" 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."
+      aria-label aria-description="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
@@ -38,7 +38,7 @@
     </div>
     <!-- 动态组件 -->
     <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.`"
+      aria-label :aria-description="`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>

web/src/views/Visit/Visit1.vue

@@ -1,6 +1,6 @@
 <template>
 <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."
+  aria-label aria-description="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="">

web/src/views/Visit/Visit2.vue

@@ -1,6 +1,6 @@
 <template>
   <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."
+    aria-label aria-description="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"

web/src/views/Visit/Visit3.vue

@@ -1,6 +1,6 @@
 <template>
   <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."
+    aria-label aria-description="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">

web/src/views/Visit/Visit4.vue

@@ -1,6 +1,6 @@
 <template>
   <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."
+    aria-label aria-description="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">

web/src/views/Visit/Visit5.vue

@@ -1,6 +1,6 @@
 <template>
   <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."
+    aria-label aria-description="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">

web/src/views/Visit/Visit6.vue

@@ -1,6 +1,6 @@
 <template>
   <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."
+    aria-label aria-description="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">

web/src/views/Visit/Visit7.vue

@@ -1,6 +1,6 @@
 <template>
 <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."
+  aria-label aria-description=" 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">

web/src/views/Visit/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="Visit">
     <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.`"
+      aria-label :aria-description="`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."
+      aria-label aria-description="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
@@ -19,7 +19,7 @@
       </ul>
     </div>
     <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."
+       aria-label aria-description="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>

web/src/views/accessibility.vue

@@ -21,7 +21,7 @@
     >
       <div class="text-wrapper">
         <p>
-          {{ hoverElemDisc + hoverElemContent }}
+          {{ elemType + elemDisc }}
         </p>
       </div>
       <button
@@ -398,8 +398,8 @@ export default {
         y: -100,
       },
 
-      hoverElemDisc: '',
-      hoverElemContent: '',
+      elemType: '',
+      elemDisc: '',
 
       continueReadTimeoutId: null,
       continueReadTaskId: null,
@@ -549,9 +549,10 @@ export default {
 
     this.$eventBus.$on('request-read', (text) => {
       console.log('无障碍组件收到request-read消息：', text);
-      this.planToPlayAudio('', text)
+      if (this.isCompActive) {
+        this.planToPlayAudio('', text)
+      }
     })
-    
   },
   destroyed() {
     window.removeEventListener('storage', this.loadStoredSettings, {
@@ -601,7 +602,7 @@ export default {
       XHR.open("POST", "http://192.168.0.245:8008/api/tts/toMp3")
       XHR.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
       XHR.send(JSON.stringify({
-        content: text || this.hoverElemDisc + this.hoverElemContent
+        content: text || this.elemType + this.elemDisc
       }))
     }, 500),
     keyEventHandler(e) {
@@ -724,8 +725,8 @@ export default {
       }
       const extractedText = utils.extractTextForMagnify(e)
       if (extractedText) {
-        this.hoverElemDisc = extractedText.elemDisc
-        this.hoverElemContent = extractedText.elemContent
+        this.elemType = extractedText.elemType
+        this.elemDisc = extractedText.elemDisc
 
         this.planToPlayAudio()
       }
@@ -736,8 +737,8 @@ export default {
       }
       const extractedText = utils.extractTextForMagnify(e)
       if (extractedText) {
-        this.hoverElemDisc = extractedText.elemDisc
-        this.hoverElemContent = extractedText.elemContent
+        this.elemType = extractedText.elemType
+        this.elemDisc = extractedText.elemDisc
         clearTimeout(this.continueReadTimeoutId)
         this.continueReadTimeoutId = setTimeout(() => {
           this.continueReadIteratorStoper && this.continueReadIteratorStoper()
@@ -775,8 +776,8 @@ export default {
       }
       const extractedText = utils.extractTextForMagnify(e)
       if (extractedText) {
-        this.hoverElemDisc = extractedText.elemDisc
-        this.hoverElemContent = extractedText.elemContent
+        this.elemType = extractedText.elemType
+        this.elemDisc = extractedText.elemDisc
         this.planToPlayAudio(this.continueReadTaskId)
       }
     },

web/src/views/bottom/Employment.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="bottomEmployment">
     <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."
+      aria-label aria-description="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."
+      aria-label aria-description="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>
@@ -12,7 +12,7 @@
       </div>
     </div>
     <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."
+      aria-label aria-description="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">

web/src/views/bottom/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <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."
+    aria-label aria-description="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">

web/src/views/bottom/Use.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="bottomUse">
     <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."
+      aria-label aria-description="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."
+      aria-label aria-description="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>
@@ -12,7 +12,7 @@
       </div>
     </div>
     <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."
+      aria-label aria-description="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">

web/src/views/layout/index.vue

@@ -10,7 +10,7 @@
           </h1>
           <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."
+            aria-label aria-description="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)"
@@ -45,7 +45,7 @@
         <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."
+          aria-label aria-description="You've reached the seach field, please use the tab key to browse the content."
           tabindex="0"
         >
           <el-input
@@ -62,7 +62,7 @@
       <!-- 底部固定栏 -->
       <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."
+        aria-label aria-description="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
@@ -80,7 +80,7 @@
       <!-- 固定的二维码和游戏 -->
       <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."
+        aria-label aria-description="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">