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

web/src/assets/css/ariaGlobalStyle.less

@@ -131,4 +131,12 @@ body.aria-active.aria-magnifying {
 
 html.aria-active {
   scroll-padding-top: @accessibility-menu-height;
+}
+
+// 对于有data-aria-xxx-area attribute的元素，鼠标点击（或者点击其不可focus的子元素）时不应该导致focus到这个元素上，换言之，这种元素只应该能通过tab键focus。
+*[data-aria-navigation-area], *[data-aria-viewport-area], *[data-aria-interaction-area] {
+  pointer-events: none;
+  >* {
+    pointer-events: initial;
+  }
 }

web/src/router/index.js

@@ -260,4 +260,9 @@ router.beforeEach((to, from, next) => {
   next()
 })
 
+// 因为前端路由变化不会导致被复用的组件失焦，而很多原本只是hover到某个区域时显示的跳转链接，为了支持键盘访问，改为了在focus-within时也显示，又不希望跳转完成后这些跳转链接还显示着，所以要给前端路由对象添加全局后置钩子，在其中令focus的元素blur
+router.afterEach(() => {
+  document.activeElement.blur()
+})
+
 export default router

web/src/utils.js

@@ -2,45 +2,80 @@ function mapTags(tag) {
   let ret = ''
   switch (tag) {
   case 'A':
-    ret = 'Link: '
+    ret = 'Link'
     break
   case 'BUTTON':
-    ret = 'Button: '
+    ret = 'Button'
     break
   case 'IMG':
-    ret = 'Image: '
+    ret = 'Image'
     break
   case 'INPUT':
-    ret = 'Textbox: '
+    ret = 'Textbox'
     break
   case 'TEXTAREA':
-    ret = 'Textbox: '
+    ret = 'Textbox'
     break
   default:
-    ret = 'Text: '
+    ret = 'Text'
     break
   }
   return ret
 }
 
-function extractTextForMagnify(e) {
+let lastMeaningfulNode = null
+function extractTextForMagnify(e, allowRepeatd = false) {
   let meaningfulNode = e.path[0]
-  while (!meaningfulNode.getAttribute || !meaningfulNode.getAttribute('tabindex')) {
-    meaningfulNode = meaningfulNode.parentNode
-    if (!meaningfulNode) {
+
+  if (e.type === 'mouseover') {
+    while (!meaningfulNode.getAttribute || !meaningfulNode.getAttribute('tabindex')) {
+      meaningfulNode = meaningfulNode.parentNode
+      if (!meaningfulNode) {
+        return
+      }
+    }
+
+    if (meaningfulNode.getAttribute('tabindex') === '-1') {
       return
     }
-  }
-  
-  if (e.type === 'mouseover' && (
+
+    // mouseover事件冒泡到有data-aria-xxx-area attribute的区域包裹元素时，不应该提取该区域包裹元素的无障碍辅助信息。
+    if (
       meaningfulNode.getAttribute('data-aria-navigation-area') !== null ||
       meaningfulNode.getAttribute('data-aria-viewport-area') !== null ||
       meaningfulNode.getAttribute('data-aria-interaction-area') !== null
-    )
-  ) {
-    return
+    ) {
+      return
+    }
+  } else if (e.type === 'focusin') {
+    // 如果天然能focus，但没有被加上tabindex属性，比如focus到了第三方组件内部的可focus元素，直接返回。
+    if (
+      ['A', 'AREA', 'BUTTON', 'INPUT', 'SELECT', 'IFRAME'].includes(meaningfulNode.tagName) &&
+      !meaningfulNode.getAttribute('tabindex')
+    ) {
+      return
+    }
+
+    while (!meaningfulNode.getAttribute || !meaningfulNode.getAttribute('tabindex')) {
+      meaningfulNode = meaningfulNode.parentNode
+      if (!meaningfulNode) {
+        return
+      }
+    }
+
+    // 约定：tabindex属性值为-1的元素只用于在点击有data-aria-xxx-area attribute的区域包裹元素的子孙元素时，避免focus到区域包裹元素。
+    if (meaningfulNode.getAttribute('tabindex') === '-1') {
+      return
+    }
   }
 
+  if (!allowRepeatd) {
+    if (meaningfulNode === lastMeaningfulNode) {
+      return
+    }
+    lastMeaningfulNode = meaningfulNode
+  }
+  
   let elemType = ''
   const ariaLabel = meaningfulNode.getAttribute('aria-label')
   if (ariaLabel !== null) {
@@ -191,32 +226,99 @@ function iterateOnFocusableNode(startNode, focusedNodeHandler) {
  *
  * fn: 需要被消抖的函数
  * delay: 消抖时长
- * isImmediateCall: 是在第一次调用时立即执行fn，还是在最后一次调用后等delay时长再调用fn
+ * isImmediateCall: 是否在一组操作中的第一次调用时立即执行fn
+ * isRememberLastCall：是否在一组中最后一次调用后等delay时长再执行fn
  */
-function debounce(fn, delay, isImmediateCall = false) {
+function debounce(fn, delay, isImmediateCall = false, isRememberLastCall = true) {
+  console.assert(isImmediateCall || isRememberLastCall, 'isImmediateCall 和 isRememberLastCall 至少应有一个是true，否则没有意义！')
   let timer = null
   // 上次调用的时刻
   let lastCallTime = 0
 
-  if (isImmediateCall) {
+  if (isImmediateCall && !isRememberLastCall) {
     return function (...args) {
-      const context = this
       const currentTime = Date.now()
       if (currentTime - lastCallTime >= delay) {
-        fn.apply(context, args)
+        fn.apply(this, args)
       }
       lastCallTime = currentTime
     }
-  } else {
+  } else if (!isImmediateCall && isRememberLastCall) {
     return function (...args) {
       if (timer) {
         clearTimeout(timer)
       }
-      const context = this
       timer = setTimeout(() => {
-        fn.apply(context, args)
+        fn.apply(this, args)
       }, delay)
     }
+  } else if (isImmediateCall && isRememberLastCall) {
+    return function (...args) {
+      const currentTime = Date.now()
+      if (currentTime - lastCallTime >= delay) { // 一组操作中的第一次
+        fn.apply(this, args) 
+        lastCallTime = currentTime
+        return
+      } else { // 一组中的后续调用
+        if (timer) { // 在此之前存在中间调用
+          lastCallTime = currentTime
+          clearTimeout(timer)
+        }
+        timer = setTimeout(() => {
+          fn.apply(this, args)
+          lastCallTime = 0
+          timer = null
+        }, delay)
+      }
+    }
+  } else {
+    console.error('不应该执行到这里！')
+  }
+}
+
+class DebounceScheduler {
+  constructor(fn, delay, context, isImmediateCall = false) {
+    this.job = fn
+    this.delay = delay
+    this.context = context
+    this.timer = null
+    this.lastCallTime = 0
+    this.isImmediateCall = isImmediateCall
+  }
+  planToDo(...args) {
+    if (!this.isImmediateCall) {
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+      this.timer = setTimeout(() => {
+        this.job.apply(this.context, args)
+      }, this.delay)
+    } else {
+      const currentTime = Date.now()
+      if (currentTime - this.lastCallTime >= this.delay) { // 一组操作中的第一次
+        this.job.apply(this.context, args) 
+        this.lastCallTime = currentTime
+        return
+      } else { // 一组中的后续调用
+        if (this.timer) { // 在此之前存在中间调用
+          this.lastCallTime = currentTime
+          clearTimeout(this.timer)
+          this.timer = null
+        }
+        this.timer = setTimeout(() => {
+          this.job.apply(this.context, args)
+          this.lastCallTime = 0
+          this.timer = null
+        }, this.delay)
+      }
+    }
+  }
+  cancel() {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
   }
 }
 
@@ -224,7 +326,8 @@ export default {
   mapTags,
   extractTextForMagnify,
   isSameObject,
+  getAndFocusNextNodeWithCustomAttribute,
   iterateOnFocusableNode,
   debounce,
-  getAndFocusNextNodeWithCustomAttribute,
+  DebounceScheduler,
 }

web/src/views/About/Director.vue

@@ -1,32 +1,52 @@
 <!--  -->
 <template>
   <div class="Director">
-    <div class="ban" data-aria-viewport-area tabindex="0"
+    <div
+      class="banWrapper" data-aria-viewport-area tabindex="0"
       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="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="From the Director"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link to="/Layout/About"
+        tabindex="0"
+        aria-description="About"
+      >
+        About>
+      </Router-link>
     </div>
     <div class="conten" data-aria-viewport-area tabindex="0"
       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">
-        <h2>——<span>Leadership</span>——</h2>
+      <h1 class="webTitle" tabindex="0">From the Director</h1>
+      <div class="peopleBox" tabindex="-1">
+        <h2 tabindex="0">——<span>Leadership</span>——</h2>
         <ul>
           <li>
-            <img src="/data/About/ren.jpg" />
-            <strong>Han Zhanming</strong>
-            <p>Director of Capital Museum</p>
+            <img src="/data/About/ren.jpg" tabindex="0"
+              aria-description="Han Zhanming"
+            />
+            <strong tabindex="0">Han Zhanming</strong>
+            <p tabindex="0">Director of Capital Museum</p>
           </li>
         </ul>
       </div>
-      <div class="contentBox">
-        <p>
+      <div class="contentBox" tabindex="-1">
+        <p tabindex="0">
           The Capital Museum of China is a comprehensive museum affiliated with
           the municipal government of Beijing. It is committed to displaying
           Beijing's 500,000 years of history of human settlement, 3,000 years of
@@ -37,7 +57,7 @@
           site of cultural exchange between the new Beijing and the larger
           world.
         </p>
-        <p>
+        <p tabindex="0">
           In the Capital Museum's eleven core exhibition rooms lie collections
           of cultural relics comprising more than one million tangible and
           documentary artifacts, including numerous exquisite works of art and
@@ -45,7 +65,7 @@
           collective evidences of the robust creativity and lasting vitality of
           the great and ancient nation of China.
         </p>
-        <p>
+        <p tabindex="0">
           The three temporary exhibition rooms of the Capital Museum are often
           used to house first-class exhibits from around China and the world.
           These exhibitions epitomize the city of Beijing's readiness to embrace
@@ -53,7 +73,7 @@
           time, they reflect both the uniformity and the diversity of humanity's
           historical and cultural development.
         </p>
-        <p>
+        <p tabindex="0">
           Friends from home and abroad, we invite you all to visit the website
           of the Capital Museum and get to know Beijing and China a little
           better. You are also welcome to visit the Capital Museum to see into
@@ -61,7 +81,14 @@
           yourself a little better as well.
         </p>
       </div>
-      <div class="back_btn" @click="$router.push('/Layout/About')">Back</div>
+      <div class="back_btn"
+        @click="$router.push('/Layout/About')"
+        @keydown.enter.passive="$router.push('/Layout/About')"
+        tabindex="0"
+        aria-label="Link"
+      >
+        Back
+      </div>
     </div>
   </div>
 </template>

web/src/views/About/index.vue

@@ -1,22 +1,43 @@
 <!--  -->
 <template>
   <div class="About">
-    <div class="ban" data-aria-viewport-area tabindex="0"
-      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="banWrapper"
+      data-aria-viewport-area
+      tabindex="0"
+      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 class="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="About"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link
+        to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link
+        to="/Layout/About"
+        tabindex="0"
+        aria-description="About"
+      >
+        About>
+      </Router-link>
     </div>
     <div class="director" data-aria-viewport-area tabindex="0"
       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>
-        <p>
+      <div tabindex="-1">
+        <p tabindex="0">Welcome to the website of the Capital Museum of China.</p>
+        <p tabindex="0">
           We are looking forward to your visit. The Capital Museum is a palace
           of Beijing culture. Its collections relate to the long development of
           the capital city, showcasing its magnificent living history of 500,000
@@ -26,7 +47,7 @@
           various ethnic groups at home and abroad. You can feel the breadth of
           both Chinese and world civilizations.
         </p>
-        <p>
+        <p tabindex="0">
           Historical culture is the soul of a city and in the case of Beijing it
           is a great witness to the long history of Chinese civilization. We are
           looking forward to welcoming you to share with us the full
@@ -34,55 +55,68 @@
           in the great wisdom of Beijing.<br />
         </p>
       </div>
-      <p class="more" @click="$router.push('/Layout/About/Director')">
+      <p
+        class="more"
+        @click="$router.push('/Layout/About/Director')"
+        @keydown.enter.passive="$router.push('/Layout/About/Director')"
+        tabindex="0"
+        aria-label="Link"
+      >
         Read More
       </p>
     </div>
     <div class="history" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the History section, please use the tab key to go through the content."
     >
-      <div>
-        <p>
+      <div tabindex="-1">
+        <p tabindex="0">
           <span
             style="font-family: arial, helvetica, sans-serif; font-size: 14px"
-            >The Capital Museum, located in the Confucius Temple, was prepared
-            in 1953 and formally opened in 1981.</span
           >
+            The Capital Museum, located in the Confucius Temple, was prepared
+            in 1953 and formally opened in 1981.
+          </span>
         </p>
         <p><br /></p>
-        <p>
+        <p tabindex="0">
           <span
             style="font-family: arial, helvetica, sans-serif; font-size: 14px"
-            >As a major cultural construction project in Beijing in the "10th
+          >
+            As a major cultural construction project in Beijing in the "10th
             Five-Year Plan", the new complex of the Capital Museum, approved by
             the Beijing Municipal Government in 1999, further approved by the
             State Council after being submitted by the National Development and
             Reform Commission in 2001, commenced its construction in December
-            2001.</span
-          >
+            2001.
+          </span>
         </p>
         <p><br /></p>
-        <p>
+        <p tabindex="0">
           <span
             style="font-family: arial, helvetica, sans-serif; font-size: 14px"
-            >The new Capital Museum had the trial operation in December 2005 and
+          >
+            The new Capital Museum had the trial operation in December 2005 and
             was officially opened on May 18, 2006. With its magnificent
             architecture, abundant exhibitions, advanced technology and complete
             functions, the Capital Museum contributes to Beijing's standing as a
             famous historical and cultural city, a cultural centre and an
             international metropolis and ranks among the first class museums
             both at home and abroad and is regarded as one of the first "State
-            First-class Museums" in 2008.</span
-          >
+            First-class Museums" in 2008.
+          </span>
         </p>
       </div>
     </div>
     <div class="partner" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the Patrners & Connections section, please use the tab key to go through the information."
     >
-      <ul>
+      <ul tabindex="-1">
         <li v-for="(item, index) in link" :key="index">
-          <a :href="item.name" target="_blank" :title="item.pop">
+          <a :href="item.name" target="_blank" :title="item.pop"
+            tabindex="0"
+            aria-label="Image link"
+            :aria-description="item.pop"
+          >
             <span
               :style="`background-image: url(/data/About/link${index + 1}.jpg)`"
             ></span>
@@ -95,24 +129,31 @@
         src="/data/About/a7.gif"
         alt=""
         @click="$router.push('/Layout/About/link')"
+        @keydown.enter.passive="$router.push('/Layout/About/link')"
+        tabindex="0"
+        aria-label="Link"
+        aria-description="See More"
       />
     </div>
     <div class="contact" data-aria-viewport-area tabindex="0"
       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>
+      <p tabindex="0">Official website of Capital Museum: <a :href="$homePageUrl" tabindex="0">{{$homePageUrl}}</a></p>
+      <p tabindex="0">
         Telephone reservation (individual visitors):
-        <span>+86 (10) 63393339</span>
+        <span tabindex="0">+86 (10) 63393339</span>
       </p>
-      <p>
-        Telephone reservation (group visitors): <span>+86 (10) 63370458</span>
+      <p tabindex="0">
+        Telephone reservation (group visitors): <span tabindex="0">+86 (10) 63370458</span>
       </p>
-      <p>Inquiry Hotline: <span>+86 (10) 63370491</span></p>
-      <p>
+      <p tabindex="0">Inquiry Hotline: <span tabindex="0">+86 (10) 63370491</span></p>
+      <p tabindex="-1">
         <a href="mailto:ICD@capitalmuseum.org.cn"
-          ><img src="/data/About/youxiang.jpg"
-        /></a>
+          tabindex="0"
+          aria-description="Email Us"
+        >
+          <img src="/data/About/youxiang.jpg"/>
+        </a>
       </p>
     </div>
   </div>
@@ -249,6 +290,7 @@ export default {
         position: relative;
         background: url("/data/About/a2.gif") no-repeat 0 0;
         a {
+          height: 100%;
           display: block;
         }
         span {

web/src/views/About/link.vue

@@ -1,25 +1,54 @@
 <!--  -->
 <template>
   <div class="AboutLink">
-    <div class="ban" data-aria-viewport-area tabindex="0"
+    <div class="banWrapper" data-aria-viewport-area tabindex="0"
       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="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="Partners & Connections"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link
+        to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link
+        to="/Layout/About"
+        tabindex="0"
+        aria-description="About"
+      >
+        About>
+      </Router-link>
     </div>
     <div class="list-area" data-aria-viewport-area tabindex="0"
       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">
+      <div
+        class="lmname"
+        tabindex="0"
+        aria-label="Text"
+        aria-description="Partners & Connections"
+      ></div>
+      <div class="wrap" :class="{wrap2:item.bac}" v-for="(item,index) in data" :key="index" tabindex="-1">
         <div class="box">
-          <h2 :title="item.title">{{item.title}}</h2>
+          <h2 :title="item.title" tabindex="0">{{item.title}}</h2>
           <div class="row" v-for="val in item.son" :key="val.img" :title="val.pop">
-            <a :href="val.url" target="_blank">
+            <a 
+              :href="val.url"
+              target="_blank" 
+              tabindex="0"
+              aria-label="Image link"
+              :aria-description="val.pop"
+            >
               <span
                 :style="`background-image: url(/data/About/link/${val.img}.jpg)`"
               ></span>
@@ -31,7 +60,11 @@
     <div class="join" data-aria-viewport-area tabindex="0"
       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="">
+      <img src="/data/About/botTxt.gif" alt=""
+        tabindex="0"
+        aria-label="Text"
+        aria-description="Join US Telephone +86(10)63393339 E-mail ICD@capitalmuseum.org.cn"
+      >
     </div>
   </div>
 </template>
@@ -165,6 +198,7 @@ export default {
         margin: 0 10px 20px 0;
         position: relative;
         a {
+          height: 100%;
           display: block;
         }
         span {

web/src/views/Collections/component/info.vue

@@ -1,26 +1,55 @@
 <template>
-  <div class="CollectionsInfo">
+  <div class="CollectionsInfo" tabindex="0">
     <div class="pic">
-      <h3 v-html="infoObj.h3"></h3>
-      <div class="mark" ref="markBox" @click="lookBig">
-        <img :src="`/data/Collections/${infoObj.url}/big${infoObj.id}.png`" alt="" />
+      <h3 v-html="infoObj.h3" tabindex="0"
+        :aria-description="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
+      ></h3>
+      <div class="mark" ref="markBox" @click="lookBig"
+        @keydown.enter.passive="lookBig"
+      >
+        <img :src="`/data/Collections/${infoObj.url}/big${infoObj.id}.png`"
+          :alt="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
+          tabindex="0"
+          aria-label="Image"
+          :aria-description="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
+        />
         <span :style="{ opacity: num, left: numLeft, top: numTop }"></span>
       </div>
       <!-- 看大图 -->
-      <div class="look" @click="lookBig">Enlarge</div>
+      <div class="look" @click="lookBig" @keydown.enter.passive="lookBig"
+        tabindex="0" aria-label="Button"
+      >
+        Enlarge
+      </div>
     </div>
     <!-- 文本 -->
-    <div class="txt" v-html="infoObj.info"></div>
+    <div class="txt" v-html="infoObj.info"
+      tabindex="0"
+      :aria-description="infoObj.info.replace(/(<([^>]+)>)/ig, '')"
+    ></div>
     <!-- 关闭按钮 -->
-    <div class="cls" @click="closeInfo">&nbsp;</div>
+    <div class="cls" @click="closeInfo" @keydown.enter.passive="closeInfo"
+      tabindex="0"
+      aria-label="Button"
+      aria-description="Close"
+    >
+      &nbsp;
+    </div>
     <!-- 看大图的遮造盒子 -->
-    <div class="cover" v-show="bigShow" @click="bigimgHide">
+    <div ref="cover" class="cover" v-show="bigShow" tabindex="0"
+      @click="bigimgHide" @keydown.enter.passive="bigimgHide"
+    >
       <div
         class="lookBox"
         ref="lookBox"
         title="Click here to return to the previous page"
       >
-        <img :src="`/data/Collections/${infoObj.url}/big${infoObj.id}.png`" alt="" />
+        <img :src="`/data/Collections/${infoObj.url}/big${infoObj.id}.png`"
+          alt=""
+          tabindex="0"
+          aria-label="Big image"
+          :aria-description="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
+        />
         <span
           :style="{ opacity: num, left: bigNumLeft, top: bigNumTop }"
         ></span>
@@ -75,6 +104,7 @@ export default {
     lookBig() {
       this.bigShow = true;
       this.$nextTick(() => {
+        this.$refs.cover.focus()
         setTimeout(() => {
           // -----------------大图的logo随机
           let bDom = this.$refs.lookBox;
@@ -93,12 +123,14 @@ export default {
     bigimgHide() {
       this.bigShow = false;
       clearInterval(this.timeIdBig);
+      this.$el.focus()
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    this.$el.focus()
     // 获取图片盒子的宽高
     this.$nextTick(() => {
       setTimeout(() => {

web/src/views/Collections/index.vue

@@ -1,16 +1,40 @@
 <template>
   <div class="Collections">
-    <div class="ban" data-aria-viewport-area tabindex="0"
+    <div class="banWrapper"
+      data-aria-viewport-area
+      tabindex="0"
       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="ban" tabindex="0" aria-label="Image"
+        aria-description="Colections"
+      ></div>
+    </div>
     <!-- 面包屑 -->
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
-      <Router-link to="/Layout/Collections/Bronzes">Collections></Router-link>
-      <span>{{ mbTxt }}></span>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link
+        to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link
+        to="/Layout/Collections/Bronzes"
+        tabindex="0"
+        aria-description="Collections"
+      >
+        Collections>
+      </Router-link>
+      <Router-link
+        to=""
+        tabindex="0"
+        :aria-description="mbTxt"
+      >
+        {{ mbTxt }}>
+      </Router-link>
     </div>
     <!-- 内容 -->
     <div class="conten" :class="mbTxt">
@@ -19,12 +43,15 @@
       >
         <li
           @click="cutTab(item.url)"
+          @keydown.enter.passive="cutTab(item.url)"
           :class="{ active: mbTxt === item.url }"
           v-for="(item, index) in tabData"
           :key="item.name"
           :style="`background-image:url(/data/Collections/tab/${
             index + 1
           }.png)`"
+          tabindex="0"
+          aria-label="Link"
         >
           <div class="bac">{{ item.name }}</div>
         </li>
@@ -38,17 +65,26 @@
           v-for="(item, index) in data"
           :key="item.id"
           @click="lookBig(item)"
+          @keydown.enter.passive="lookBig(item)"
         >
           <img
             class="rowImg"
             :src="`/data/Collections/${mbTxt}/${index + 1}.png`"
-            alt=""
+            :alt="item.h3.replace(/(<([^>]+)>)/ig, '')"
+            tabindex="0"
+            :aria-description="item.h3.replace(/(<([^>]+)>)/ig, '')"
           />
           <div class="info">
             <!-- 箭头 -->
             <img src="/data/Collections/arrow.png" alt="" />
-            <h3 v-html="item.h3"></h3>
-            <p v-html="item.p"></p>
+            <h3 v-html="item.h3"
+              tabindex="0"
+              :aria-description="item.h3.replace(/(<([^>]+)>)/ig, '')"
+            ></h3>
+            <p v-html="item.p"
+              tabindex="0"
+              :aria-description="item.p.replace(/(<([^>]+)>)/ig, '')"
+            ></p>
           </div>
         </div>
       </div>

web/src/views/Events/index.vue

@@ -1,29 +1,62 @@
 <!--  -->
 <template>
   <div class="Events">
-    <div class="ban" data-aria-viewport-area tabindex="0"
+    <div class="banWrapper" data-aria-viewport-area tabindex="0"
       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="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="Events"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link to="/Layout/Events"
+        tabindex="0"
+        aria-description="Events"
+      >
+        Events>
+      </Router-link>
     </div>
     <div class="conten" data-aria-viewport-area tabindex="0"
       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>
+      <h1 class="cTitle" tabindex="0">EVENTS</h1>
       <ul>
-        <li v-for="(item, index) in data" :key="index" @click="skip(item.id)">
-          <img :src="`/data/About/Events/${index + 1}.jpg`" alt="" />
+        <li
+          v-for="(item, index) in data"
+          :key="index"
+          @click="skip(item.id)"
+          @keydown.enter.passive="skip(item.id)"
+        >
+          <img :src="`/data/About/Events/${index + 1}.jpg`" :alt="item.h3"
+            tabindex="0"
+            aria-label="Image link"
+            :aria-description="item.h3"
+          />
           <div class="item">
-            <h2 v-html="item.h3"></h2>
+            <h2 v-html="item.h3" tabindex="0"></h2>
             <div class="s">
-              <p @click.stop="skip(val.path)"  v-for="(val,index) in item.txt" :key="index">{{val.name}}</p>
+              <p
+                v-for="(val,index) in item.txt" :key="index"
+                @click.stop="skip(val.path)"
+                @keydown.enter.passive.stop="skip(val.path)"
+                tabindex="0"
+                aria-label="Link"
+              >
+                {{val.name}}
+              </p>
             </div>
-            <i class="d">Date:{{ item.i }}</i>
+            <i class="d" tabindex="0">Date:{{ item.i }}</i>
           </div>
         </li>
       </ul>
@@ -61,6 +94,7 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.$eventBus.$emit('request-read', `You've reached the Events page. This page contains one navigation section, five window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

web/src/views/Events/info.vue

@@ -1,12 +1,12 @@
 <!--  -->
 <template>
   <div class="EventsInfo">
-    <!-- 回到顶部 -->
-    <div class="topBtn" @click="toTop">
-      <img src="/data/About/Events/toTop.jpg" alt="" />
-    </div>
     <div class="conten">
-      <img class="topBan" :src="`/data/About/Events/${imgInd}Ac.jpg`" alt="" />
+      <img class="topBan" :src="`/data/About/Events/${imgInd}Ac.jpg`"
+        :alt="info.h3"
+        tabindex="0"
+        :aria-description="info.h3"
+      />
       <div class="main">
         <div
           class="pos"
@@ -14,9 +14,21 @@
           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>
+          <span tabindex="0">Your Position:&nbsp;</span>
+          <Router-link
+            to="/Layout/Home"
+            tabindex="0"
+            aria-description="Home"
+          >
+            Home>
+          </Router-link>
+          <Router-link
+            to="/Layout/Events"
+            tabindex="0"
+            aria-description="Events"
+          >
+            Events>
+          </Router-link>
         </div>
         <div
           class="mainContent"
@@ -24,39 +36,47 @@
           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="title" tabindex="-1">
             <div class="left">
-              <h3 v-html="info.h3"></h3>
+              <h3 v-html="info.h3" tabindex="0"></h3>
               <div class="txt">
                 <p
                   @click="skip(val.path)"
+                  @keydown.enter.passive="skip(val.path)"
                   v-for="(val, index) in info.txt"
                   :key="index"
+                  tabindex="0"
+                  aria-label="Link"
                 >
                   {{ val.name }}
                 </p>
               </div>
             </div>
             <div class="right">
-              <div>Date:</div>
-              <p>{{ info.i }}</p>
+              <div tabindex="0">Date:</div>
+              <p tabindex="0">{{ info.i }}</p>
             </div>
           </div>
-          <div class="txtMain" v-html="info.main" v-if="info.main"></div>
+          <div class="txtMain" v-html="info.main" v-if="info.main" tabindex="-1"></div>
           <div
             class="txtMain"
             v-if="info.mainArr"
             v-html="info.mainArr[mainArr]"
+            tabindex="-1"
           ></div>
           <!-- 分页 -->
-          <div class="page" v-if="info.mainArr">
+          <div class="page" v-if="info.mainArr" tabindex="-1">
             <span
               @click="pageCut(i-1)"
+              @keydown.enter.passive="pageCut(i-1)"
               v-for="i in 5"
               :key="i"
               :class="{ active: i === mainArr + 1 }"
-              >{{ i }}</span
+              tabindex="0"
+              aria-label="Link"
             >
+              {{ i }}
+            </span>
           </div>
         </div>
       </div>
@@ -76,6 +96,10 @@
         </li>
       </ul>
     </div>
+    <!-- 回到顶部 -->
+    <div class="topBtn" @click="toTop">
+      <img src="/data/About/Events/toTop.jpg" alt="" />
+    </div>
   </div>
 </template>
 
@@ -162,6 +186,10 @@ export default {
       "request-read",
       `You've reached the sub-page of the Events page.This page contains one navigation section, four window sections, and one interactive section. To choose an section, please hit the shortcut key.`
     );
+    const txtMainList = document.getElementsByClassName('txtMain')
+    for (const iterator of txtMainList) {
+      this.$eventBus.$emit('request-process-text-element', iterator)
+    }
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

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

@@ -5,19 +5,32 @@
         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">
-          <!-- 点击放大镜 -->
-          <div class="clickSearch" @click="search"></div>
           <el-input
             style="margin-right: 30px"
             suffix-icon="el-icon-search"
             v-model="txt"
+            tabindex="0"
+            aria-description="Input search keyword"
           >
           </el-input>
-          <el-select
+          <!-- 点击放大镜 -->
+          <div
+            class="clickSearch"
+            @click="search"
+            @keydown.enter.passive="search"
+            tabindex="0"
+            aria-label="Button"
+            aria-description="Search"
+          ></div>
+          <!-- 使用这个组件无法在选择年份过程中得到选项的无障碍信息，所以改用原生元素 -->
+          <!-- <el-select
             v-model="year"
             clearable
             placeholder="Select Year"
-            @change="selectChange"
+            @change="elSelectChange"
+            tabindex="0"
+            aria-label="Select"
+            aria-description="Select Year"
           >
             <el-option value="2021" label="2021"></el-option>
             <el-option value="2020" label="2020"></el-option>
@@ -26,7 +39,25 @@
             <el-option value="2017" label="2017"></el-option>
             <el-option value="2016" label="2016"></el-option>
             <el-option value="2015" label="2015"></el-option>
-          </el-select>
+          </el-select> -->
+          <select
+            id="year-selector"
+            v-model="year"
+            @change="onSelectorChange"
+            tabindex="0"
+            class="yearSelector"
+            aria-label="Select"
+            aria-description="Select Year"
+          >
+            <option value="">Select Year</option>
+            <option value="2021">2021</option>
+            <option value="2020">2020</option>
+            <option value="2019">2019</option>
+            <option value="2018">2018</option>
+            <option value="2017">2017</option>
+            <option value="2016">2016</option>
+            <option value="2015">2015</option>
+          </select>
         </div>
         <div class="right">
           <img
@@ -36,7 +67,10 @@
                 cut ? 'cut1' : 'cut1Ac'
               }.png`)
             "
-            alt=""
+            alt="Button: List mode"
+            tabindex="0"
+            aria-label="Button"
+            aria-description="List mode"
           />
           <img
             @click="cut = true"
@@ -45,39 +79,56 @@
                 cut ? 'cut2Ac' : 'cut2'
               }.png`)
             "
-            alt=""
+            alt="Button: Big image mode"
+            tabindex="0"
+            aria-label="Button"
+            aria-description="Big image mode"
           />
         </div>
       </div>
       <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 :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="" />
-          <div class="txt">
-            <h3>{{ item.h3 }}</h3>
-            <p>{{ item.p }}</p>
-            <span>{{ item.yrahTxt }}</span>
+      <div class="listAreaWrapper" data-aria-viewport-area tabindex="0"
+        aria-label :aria-description="`You've reached the content area of the ${$parent.topLi[$route.params.id - 1].name} page. To browse the content, please use the tab key.`">
+        <div class="list" v-if="!cut">
+          <div
+            class="row"
+            v-for="item in dataShow"
+            :key="item.id"
+            @click="toInfo(item.id)"
+            @keydown.enter.passive="toInfo(item.id)"
+          >
+            <img :src="item.cover" :alt="item.h3"
+              tabindex="0"
+              :aria-description="item.h3"
+            />
+            <div class="txt">
+              <h3 tabindex="0">{{ item.h3 }}</h3>
+              <p tabindex="0">{{ item.p }}</p>
+              <span tabindex="0">{{ item.yrahTxt }}</span>
+            </div>
           </div>
         </div>
-      </div>
-      <!-- 列表图片信息 -->
-      <div class="listImg" v-else>
-        <div class="rowImg" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
-          <img :src="item.cover" alt="" />
-          <p>{{ item.h3 }}</p>
+        <!-- 列表图片信息 -->
+        <div class="listImg" v-else>
+          <div class="rowImg" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
+            <img :src="item.cover" alt="" 
+              tabindex="0"
+              :aria-description="item.h3"
+            />
+            <p tabindex="0">{{ item.h3 }}</p>
+          </div>
         </div>
+        <!-- 点击显示更多 -->
+        <div class="more" v-show="data.length>9&&dataShow.length<data.length" @click="dataShowArr(dataShow.length+9)">Show More</div>
       </div>
-      <!-- 点击显示更多 -->
-      <div class="more" v-show="data.length>9&&dataShow.length<data.length" @click="dataShowArr(dataShow.length+9)">Show More</div>
     </div>
   </div>
 </template>
 
 <script>
 import { dataAll } from "@/views/dataAll.js";
+
 export default {
   name: "ExhibitionsList",
   components: {},
@@ -119,7 +170,24 @@ export default {
       })
     },
     // 选择年份
-    selectChange(val) {
+    onSelectorChange() {
+      this.$eventBus.$emit('request-magnify', {
+        elemType: 'Text',
+        elemDisc: this.year,
+      })
+      if (!this.year) {
+        this.getIdChangeData();
+        this.dataShowArr(9);
+        return;
+      }
+      this.getIdChangeData();
+      this.txt = "";
+      this.data = this.data.filter((v) => {
+        return v.year.includes(this.year) || v.year === "";
+      });
+      this.dataShowArr(9);
+    },
+    elSelectChange(val) {
       if (!val) {
         this.getIdChangeData();
         this.dataShowArr(9);
@@ -213,9 +281,22 @@ export default {
           width: 48px;
           height: 48px;
           border-radius: 50%;
-          right: 196px;
+          right: 174px;
           top: 0;
         }
+        .yearSelector {
+          border-radius: 10px;
+          border-color: #c0c4cc;
+          width: 180px;
+          padding-left: 10px;
+          cursor: pointer;
+          font-size: 18px;
+          option {
+            cursor: pointer;
+            color: #606266;
+            font-size: 18px;
+          }
+        }
       }
       .right {
         & > img {

web/src/views/Exhibitions/index.vue

@@ -1,9 +1,11 @@
 <!--  -->
 <template>
   <div class="Exhibitions">
-    <div class="ban" data-aria-viewport-area tabindex="0"
-      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="ban_wrapper" data-aria-viewport-area tabindex="0"
+      aria-label :aria-description="`You've reached the banner area of the ${topLi[$route.params.id - 1].name} page; this area has one image; please use the tab key to navigate through the content.`"
+    >
+      <div class="ban" tabindex="0" aria-label="Image" :aria-description="topLi[$route.params.id - 1].name"></div>
+    </div>
     <div class="nav_2" data-aria-viewport-area tabindex="0"
       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."
     >
@@ -13,6 +15,10 @@
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.path)"
+          @keydown.enter.passive="skip(item.path)"
+          tabindex="0"
+          aria-label="Link"
+          :aria-description="item.name"
         >
           <img
             :src="require(`@/assets/images/Exhibitions/${item.img}`)"
@@ -25,14 +31,26 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
-      <Router-link to="/Layout/Exhibitions/1">Exhibitions></Router-link>
-      <span>{{ topLi[topId - 1].name }}></span>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link
+        to="/Layout/Home" tabindex="0" aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link
+        to="/Layout/Exhibitions/1" tabindex="0" aria-description="Exhibition"
+      >
+        Exhibitions>
+      </Router-link>
+      <Router-link
+        to="" tabindex="0" :aria-description="topLi[topId - 1].name"
+      >
+        {{ topLi[topId - 1].name }}>
+      </Router-link>
     </div>
     <div class="title">
       <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
-      <span>{{ topLi[topId - 1].name }}</span>
+      <span tabindex="0">{{ topLi[topId - 1].name }}</span>
       <div class="xian"></div>
     </div>
     <!-- 列表页面 -->

web/src/views/Home/index.vue

@@ -5,12 +5,53 @@
       data-aria-viewport-area tabindex="0"
       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
-          :src="require(`@/assets/images/swiper${item}.jpg`)"
-          alt=""
-          @click="skip(item)"
-        />
+      <el-carousel-item key="1">
+        <router-link to="/Layout/ExhibitionsInfo?id=1&k=1"
+          tabindex="0"
+          aria-label="Image link"
+          aria-description="The Great Journey: the 100th Anniversary of the Founding of the Communist Party of China."
+        >
+          <img
+            :src="require(`@/assets/images/swiper1.jpg`)"
+            alt="The Great Journey: the 100th Anniversary of the Founding of the Communist Party of China."
+          />
+        </router-link>
+      </el-carousel-item>
+      <el-carousel-item key="2">
+        <router-link to="/Layout/Collections/Bronzes"
+          tabindex="0"
+          aria-label="Image link"
+          aria-description="What's new? More arts just added to our online collections."
+        >
+          <img
+            :src="require(`@/assets/images/swiper2.jpg`)"
+            alt="What's new? More arts just added to our online collections."
+          />
+        </router-link>
+      </el-carousel-item>
+      <el-carousel-item key="3">
+        <router-link to="/Layout/ExhibitionsInfo?id=10&k=2"
+          tabindex="0"
+          aria-label="Image link"
+          aria-description="Folk Customs in old beijing."
+        >
+          <img
+            :src="require(`@/assets/images/swiper3.jpg`)"
+            alt="Folk Customs in old beijing."
+          />
+        </router-link>
+      </el-carousel-item>
+      <el-carousel-item key="4">
+        <router-link to="/Layout/Publications/2"
+          tabindex="0"
+          aria-label="Image link"
+          aria-description="Exhibition catalogues newly added to our website."
+        >
+          <img
+            :src="require(`@/assets/images/swiper4.jpg`)"
+            alt="Exhibition catalogues newly added to our website."
+          />
+        </router-link>
       </el-carousel-item>
     </el-carousel>
     <!-- 底部 -->
@@ -18,62 +59,95 @@
       class="bottomNav" data-aria-viewport-area tabindex="0"
       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="t1" @click="$router.push('/Layout/Visit/2')"
+        tabindex="0"
+        aria-label="Link"
+        aria-description="Reservation"
+      >
         <div class="title">
           <span>Reservation</span>
         </div>
         <div class="info">
-          <div class="p">
-            <img src="../../assets/images/bott1.jpg" alt="" />
-          </div>
+          <router-link class="p" to="/Layout/Visit/2"
+            tabindex="0"
+            aria-label="Image link"
+            aria-description="Reservation"
+          >
+            <img src="../../assets/images/bott1.jpg" alt="Reservation"/>
+          </router-link>
           <div class="d">
-            <p class="n1">Online Reservation</p>
-            <p class="n2">Telephone Reservation</p>
-            <p class="n3">Individual <span>+86 (10) 63393339</span></p>
-            <p class="n3">Group <span>+86 (10) 63370458</span></p>
+            <p class="n1" tabindex="0">Online Reservation</p>
+            <p class="n2" tabindex="0">Telephone Reservation</p>
+            <p class="n3" tabindex="0">Individual <span>+86 (10) 63393339</span></p>
+            <p class="n3" tabindex="0">Group <span>+86 (10) 63370458</span></p>
           </div>
         </div>
       </div>
-      <div class="t2" @click="$router.push('/Layout/Visit/1')">
+      <div class="t2" @click="$router.push('/Layout/Visit/1')"
+        tabindex="0"
+        aria-label="Link"
+        aria-description="Visit Info"
+      >
         <div class="title">
           <span>Visit Info</span>
         </div>
         <div class="info">
-          <div class="p">
-            <img src="../../assets/images/bott2.jpg" alt="" />
-          </div>
+          <router-link class="p" to="/Layout/Visit/1"
+            tabindex="0"
+            aria-label="Image link"
+            aria-description="Hours, Direction & Admission"
+          >
+            <img src="../../assets/images/bott2.jpg" alt="Hours, Direction & Admission"/>
+          </router-link>
           <div class="d">
-            <p class="n4">Opening Hours 09:00-17:00</p>
-            <p class="n5">No admission after 16:00</p>
-            <p class="n5">Closed on Monday</p>
-            <p class="n6">Phone</p>
-            <p>+86 (10) 63370491</p>
+            <p class="n4" tabindex="0">Opening Hours 09:00-17:00</p>
+            <p class="n5" tabindex="0">No admission after 16:00</p>
+            <p class="n5" tabindex="0">Closed on Monday</p>
+            <p class="n6" tabindex="0">Phone</p>
+            <p tabindex="0">+86 (10) 63370491</p>
           </div>
         </div>
       </div>
-      <div class="t3" @click="botskip()">
+      <div class="t3" @click="botskip()"
+        tabindex="0"
+        aria-label="Link"
+        aria-description="Partners & Connections"
+      >
         <div class="title">
           <span>Partners & Connections</span>
         </div>
         <div class="info">
-          <div class="p">
-            <img src="../../assets/images/bott3.jpg" alt="" />
-          </div>
+          <router-link class="p" to="/Layout/About"
+            tabindex="0"
+            aria-label="Image link"
+            aria-description="Partners & Connections"
+          >
+            <img src="../../assets/images/bott3.jpg" alt="Partners & Connections"/>
+          </router-link>
           <div class="d">
-            <p class="n7">Partners & Connections</p>
+            <p class="n7" tabindex="0">Partners & Connections</p>
           </div>
         </div>
       </div>
-      <div class="t4" @click="$router.push('/Layout/Events')">
+      <div class="t4" @click="$router.push('/Layout/Events')"
+        tabindex="0"
+        aria-label="Link"
+        aria-description="Events"
+      >
         <div class="title">
           <span>Events</span>
         </div>
         <div class="info">
-          <div class="p">
-            <img src="../../assets/images/bott4.jpg" alt="" />
-          </div>
+          <router-link class="p" to="/Layout/Events"
+            tabindex="0"
+            aria-label="Image link"
+            aria-description="Events"
+          >
+            <img src="../../assets/images/bott4.jpg" alt="Events"/>
+          </router-link>
           <div class="d">
-            <p class="n8">Partners & Connections</p>
+            <p class="n8" tabindex="0">Events</p>
           </div>
         </div>
       </div>
@@ -95,14 +169,6 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    skip(val) {
-      let temp = "";
-      if (val === 1) temp = "/Layout/ExhibitionsInfo?id=1&k=1";
-      else if (val === 2) temp = "/Layout/Collections/Bronzes";
-      else if (val === 3) temp = "/Layout/ExhibitionsInfo?id=10&k=2";
-      else if (val === 4) temp = "/Layout/Publications/2";
-      this.$router.push(temp);
-    },
     // 底部的跳转
     botskip() {
       this.$router.push("/Layout/About").catch(() => {});
@@ -147,9 +213,10 @@ export default {
     position: absolute;
     left: 0;
     bottom: 0;
-    z-index: 999;
+    z-index: 4;
     display: flex;
     & > div {
+      display: block;
       cursor: pointer;
       width: 25%;
       height: 58px;
@@ -181,6 +248,7 @@ export default {
           padding: 20px;
         }
         .p {
+          display: block;
           img {
             vertical-align: bottom;
           }
@@ -199,6 +267,18 @@ export default {
     .t4:hover .info {
       height: 270px;
     }
+    .t1:focus-within .info {
+      height: 320px;
+    }
+    .t2:focus-within .info {
+      height: 320px;
+    }
+    .t3:focus-within .info {
+      height: 270px;
+    }
+    .t4:focus-within .info {
+      height: 270px;
+    }
     .t1 {
       .title {
         span {

web/src/views/JoinSupport/Give.vue

@@ -4,9 +4,23 @@
   >
     <div class="row">
       <div class="left">
-        <div class="txt" @click="skip(4)">Individuals</div>
+        <div
+          class="txt"
+          @click="skip(4)"
+          @keydown.enter.passive="skip(4)"
+          tabindex="0"
+          aria-label="Link"
+        >
+          Individuals
+        </div>
       </div>
-      <div class="right" @click="skip(4)">
+      <div
+        class="right"
+        @click="skip(4)"
+        @keydown.enter.passive="skip(4)"
+        tabindex="0"
+        aria-label="Link"
+      >
         <div class="txtShow">
           Since the establishment of Capital Museum, we have got sufficient
           supports from people from all walks of life. Due to the limited space,
@@ -17,7 +31,12 @@
       </div>
     </div>
     <div class="row">
-      <div class="right right2" @click="skip(5)">
+      <div class="right right2" 
+        @click="skip(5)"
+        @keydown.enter.passive="skip(5)"
+        tabindex="0"
+        aria-label="Link"
+      >
         <div class="txtShow">
           The century-old Beijing Match Factory donated to Capital Museum a
           large number of files and real objects which record the development of
@@ -27,7 +46,15 @@
         </div>
       </div>
       <div class="left left2">
-        <div class="txt" @click="skip(5)">Corporations & Institutions</div>
+        <div
+          class="txt"
+          @click="skip(5)"
+          @keydown.enter.passive="skip(5)"
+          tabindex="0"
+          aria-label="Link"
+        >
+          Corporations & Institutions
+        </div>
       </div>
     </div>
   </div>

web/src/views/JoinSupport/GiveInfo.vue

@@ -40,7 +40,9 @@ export default {
     });
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-process-text-element', this.$el)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/JoinSupport/Volunteer.vue

@@ -7,6 +7,10 @@
       v-for="(item, index) in data"
       :key="item.id"
       @click="skip(item.id)"
+      @keydown.enter.passive="skip(item.id)"
+      tabindex="0"
+      aria-label="Image link"
+      :aria-description="item.h3"
     >
       <img :src="`/data/JoinSupport/v${index + 1}.jpg`" alt="" />
       <h1>{{ item.h3 }}</h1>
@@ -123,7 +127,7 @@ export default {
       z-index: 2;
       margin: -114px 0 0 -114px;
     }
-    &:hover {
+    &:hover, &:focus-within {
       & > img {
         opacity: 1;
       }

web/src/views/JoinSupport/VolunteerInfo.vue

@@ -42,7 +42,9 @@ export default {
     });
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$eventBus.$emit('request-process-text-element', this.$el)
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/JoinSupport/index.vue

@@ -1,18 +1,32 @@
 <!--  -->
 <template>
   <div class="JoinSupport">
-    <div class="ban" data-aria-viewport-area tabindex="0"
-      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="banWrapper"
+      data-aria-viewport-area
+      tabindex="0"
+      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
+        class="ban"
+        tabindex="0"
+        aria-label="Image"
+        :aria-description="$route.meta.nameAll"
+      ></div>
+    </div>
     <div class="nav_2" data-aria-viewport-area tabindex="0"
       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>
+      <ul tabindex="-1">
         <li
           :class="{ cur: $route.meta.nameAll === item.url }"
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.url)"
+          @keydown.enter.passive="skip(item.url)"
+          tabindex="0"
+          aria-label="Link"
+          :aria-description="item.name"
         >
           <img
             :src="`/data/JoinSupport/${item.img}`"
@@ -25,10 +39,28 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
-      <Router-link to="/Layout/JoinSupport/Volunteer">Join & Support ></Router-link>
-      <Router-link :to="`/Layout/JoinSupport/${$route.meta.nameAll}`">{{'Ways to '+$route.meta.nameAll}} ></Router-link>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link
+        to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link
+        to="/Layout/JoinSupport/Volunteer"
+        tabindex="0"
+        aria-description="Join & Support"
+      >
+        Join & Support>
+      </Router-link>
+      <Router-link
+        :to="`/Layout/JoinSupport/${$route.meta.nameAll}`"
+        tabindex="0"
+        :aria-description="'Ways to '+$route.meta.nameAll"
+      >
+        {{'Ways to '+$route.meta.nameAll}}>
+      </Router-link>
     </div>
     <!-- 二级嵌套路由 -->
     <Router-view />

web/src/views/LearnEngage/index.vue

@@ -1,8 +1,17 @@
 <template>
   <div class="LearnEngage">
-    <div class="ban" data-aria-viewport-area tabindex="0"
-      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="banWrapper"
+      tabindex="0"
+      data-aria-viewport-area
+      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 class="ban"
+        tabindex="0"
+        aria-label="Image"
+        :aria-description="currentTabText"
+      ></div>
+    </div>
     <div class="nav_2" data-aria-viewport-area tabindex="0"
       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."
     >
@@ -12,6 +21,10 @@
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.url)"
+          @keydown.enter.passive="skip(item.url)"
+          tabindex="0"
+          aria-label="Link"
+          :aria-description="item.name"
         >
           <img :src="`/data/LearnEngage/${index + 1}.png`" alt="" />
           <p>{{ item.name }}</p>
@@ -22,12 +35,28 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
-      <Router-link to="/Layout/LearnEngage/Students"
-        >Learn & Engage></Router-link
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link
+        to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link
+        to="/Layout/LearnEngage/Students"
+        tabindex="0"
+        aria-description="Learn & Engage"
+      >
+        Learn & Engage>
+      </Router-link>
+      <Router-link
+        to=""
+        tabindex="0"
+        :aria-description="currentTabText"
       >
-      <span>{{currentTabText}}</span>
+        {{currentTabText}}
+      </Router-link>
     </div>
     <!-- 内容 -->
     <div class="conten" data-aria-viewport-area tabindex="0"
@@ -38,14 +67,19 @@
         v-for="item in data[pageSize - 1]"
         :key="item.id"
         @click="toInfo(item.id)"
+        @keydown.enter.passive="toInfo(item.id)"
       >
         <div class="left">
-          <h3>{{ item.h3 }}</h3>
-          <p>{{ item.p }}</p>
-          <h4 v-html="item.h4"></h4>
+          <h3 tabindex="0">{{ item.h3 }}</h3>
+          <p tabindex="0">{{ item.p }}</p>
+          <h4 v-html="item.h4" tabindex="0"></h4>
         </div>
         <div class="right">
-          <img :src="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
+          <img :src="`/data/LearnEngage/sm/${item.id}.png`"
+            :alt="item.h3" 
+            tabindex="0"
+            :aria-description="item.h3"
+          />
         </div>
       </div>
       <!-- 分页 -->
@@ -55,8 +89,13 @@
           v-for="i in pageNum"
           :key="i"
           @click="pageChange(i)"
-          >{{ i }}</span
+          @keydown.enter.passive="pageChange(i)"
+          tabindex="0"
+          aria-label="Link"
+          :aria-description="`page ${i}`"
         >
+          {{ i }}
+        </span>
       </div>
     </div>
   </div>

web/src/views/LearnEngage/info.vue

@@ -1,47 +1,85 @@
 <template>
   <div class="LearnEngageInfo">
-    <div class="ban" data-aria-viewport-area tabindex="0"
-      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="banWrapper"
+      data-aria-viewport-area
+      tabindex="0"
+      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 class="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="tertiary Learn & Engage"
+      ></div>
+    </div>
     <!-- 面包屑 -->
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
-        <Router-link to="/Layout/Home">Home></Router-link>
+      <div tabindex="-1">
+        <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+        <Router-link to="/Layout/Home"
+          tabindex="0"
+          aria-description="Home"
+        >
+          Home>
+        </Router-link>
         <Router-link to="/Layout/LearnEngage/Students"
-          >Learn & Engage></Router-link
+          tabindex="0"
+          aria-description="Learn & Engage"
         >
+          Learn & Engage>
+        </Router-link>
         <Router-link :to="`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`"
-          >{{ mbTxt }}></Router-link
+          tabindex="0"
+          :aria-description="mbTxt"
         >
+          {{ mbTxt }}>
+        </Router-link>
       </div>
     </div>
     <!-- 内容 -->
     <div class="conten" data-aria-viewport-area tabindex="0"
       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">
-        <span class="info1">{{ dataObj.time }}</span>
-        <span class="info2">{{ dataObj.loc }}</span>
-        <span class="info3">{{ dataObj.ren }}</span>
+      <div class="title" tabindex="0">{{ dataObj.title }}</div>
+      <div class="info" tabindex="-1">
+        <span class="info1" tabindex="0">{{ dataObj.time }}</span>
+        <span class="info2" tabindex="0">{{ dataObj.loc }}</span>
+        <span class="info3" tabindex="0">{{ dataObj.ren }}</span>
       </div>
-      <div class="main">
-        <p v-html="dataObj.top" v-if="dataObj.top"></p>
-        <img :src="`/data/LearnEngage/in/${id}.jpg`" alt="" v-if="dataObj.imgShow!==0"/>
-        <div v-html="dataObj.txt"></div>
+      <div class="main" tabindex="-1">
+        <p v-html="dataObj.top" v-if="dataObj.top"
+          tabindex="0"
+          :aria-description="dataObj.top.replace(/(<([^>]+)>)/ig, '')"
+        ></p>
+        <img :src="`/data/LearnEngage/in/${id}.jpg`"
+          :alt="dataObj.title"
+          v-if="dataObj.imgShow!==0"
+          tabindex="0"
+          :aria-description="dataObj.title"
+        />
+        <div v-html="dataObj.txt"
+          tabindex="0"
+          :aria-description="dataObj.txt.replace(/(<([^>]+)>)/ig, '')"
+        ></div>
       </div>
-      <div class="main bottom">
-        <div class="top">{{ dataObj.tipTime }}</div>
+      <div class="main bottom" tabindex="-1">
+        <div class="top" tabindex="0">{{ dataObj.tipTime }}</div>
         <div class="m2">
-          <img src="/data/LearnEngage/m-27.jpg" alt="" />
-          <p v-html="dataObj.tip"></p>
+          <img src="/data/LearnEngage/m-27.jpg" alt="tip" 
+            tabindex="0"
+            aria-description="Tip"
+          />
+          <p v-html="dataObj.tip" tabindex="0" ></p>
         </div>
         <div
           class="back"
           @click="$router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)"
+          @keydown.enter.passive="$router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)"
+          tabindex="0"
+          aria-label="Button"
         >
           Back
         </div>

web/src/views/Publications/Publications1.vue

@@ -4,49 +4,61 @@
     <div class="magzines-wrapper" data-aria-viewport-area tabindex="0"
       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">
+      <div class="title" tabindex="-1">
         <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
-        <span>{{ $route.meta.nameAll }}</span>
+        <span tabindex="0">{{ $route.meta.nameAll }}</span>
         <div class="xian"></div>
       </div>
-      <div class="conten">
+      <div class="conten" tabindex="-1">
         <!-- 左侧 -->
         <div class="menu">
           <p
             :class="{ cur: txtInd === index }"
             v-for="(item, index) in txtData"
             @click="txtInd = index"
+            @keydown.enter.passive="txtInd = index"
             :key="index"
+            tabindex="0"
+            aria-label="Link"
           >
             {{ item.name }}<span v-show="txtInd === index"></span>
           </p>
         </div>
         <!-- 右侧 -->
-        <div class="rightTxt" v-html="txtData[txtInd].conten"></div>
+        <div class="rightTxt" v-html="txtData[txtInd].conten" tabindex="0"></div>
       </div>
     </div>
     <div class="our-magzines-wrapper" data-aria-viewport-area tabindex="0"
       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>
+      <div class="title_2" tabindex="0">Our Magazines</div>
       <!-- 下面书籍 -->
-      <div class="tabTimeBox">
+      <div class="tabTimeBox" tabindex="-1">
         <span
           @mouseenter="dateInd = i"
+          @focus="dateInd = i"
           :class="{ cur: i === dateInd }"
           v-for="i in dateData"
           :key="i"
-          >{{ i }}</span
+          tabindex="0"
+          aria-label="Link"
         >
+          {{ i }}
+        </span>
       </div>
+      <ul class="imgList" tabindex="-1">
+        <li v-for="item in imgList" :key="item.id"
+          @click="jump(item.id)"
+          @keydown.enter.passive="jump(item.id)"
+          tabindex="0"
+          aria-label="Image link"
+        >
+          <div></div>
+          <img :src="item.imgUrl" alt="" />
+          <p v-html="item.p"></p>
+        </li>
+      </ul>
     </div>
-    <ul class="imgList">
-      <li v-for="item in imgList" :key="item.id" @click="jump(item.id)">
-        <div></div>
-        <img :src="item.imgUrl" alt="" />
-        <p v-html="item.p"></p>
-      </li>
-    </ul>
   </div>
 </template>
 

web/src/views/Publications/Publications2.vue

@@ -3,18 +3,18 @@
   <div class="Publications2" data-aria-viewport-area tabindex="0"
     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">
+    <div class="title" tabindex="-1">
       <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
-      <span>{{ $route.meta.nameAll }}</span>
+      <span tabindex="0">{{ $route.meta.nameAll }}</span>
       <div class="xian"></div>
     </div>
-    <div class="conten">
+    <div class="conten" tabindex="-1">
       <img src="/data/Publications/heng.png" alt="" />
       <ul>
         <li v-for="(item, index) in list" :key="index">
           <img :src="`/data/Publications/Exhibition/${index + 1}.jpg`" alt="" />
-          <div class="show">
-            <a :href="item" target="_blank">
+          <div class="show" tabindex="0">
+            <a :href="item" target="_blank" tabindex="0">
               <img src="/data/Publications/Exhibition/href.png" />
               <p>Click here to open the catalogue</p>
             </a>
@@ -137,7 +137,7 @@ export default {
             }
           }
         }
-        &:hover {
+        &:hover, &:focus-within {
           .show {
             height: 50%;
             opacity: 1;

web/src/views/Publications/PublicationsInfo.vue

@@ -2,13 +2,15 @@
   <div class="PublicationsInfo">
     <div class="top">
       <div class="main">
-        <div v-html="info.p"></div>
-        <img :src="info.imgUrl" alt="" />
+        <div v-html="info.p" tabindex="0"></div>
+        <img :src="info.imgUrl" alt="" tabindex="0"
+          :aria-description="info.p.replace(/(<([^>]+)>)/ig, '')"
+        />
       </div>
     </div>
     <div class="conten">
-      <div class="haed">Contents</div>
-      <div class="txt" v-html="info.txt"></div>
+      <div class="haed" tabindex="0">Contents</div>
+      <div ref="txt" class="txt" v-html="info.txt"></div>
     </div>
   </div>
 </template>
@@ -42,7 +44,11 @@ export default {
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.$eventBus.$emit('request-process-text-element', this.$refs.txt)
+    })
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前

web/src/views/Publications/index.vue

@@ -1,17 +1,26 @@
 <template>
   <div class="Publications">
-    <div class="ban" :class="banImg" data-aria-viewport-area tabindex="0"
-      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="banWrapper"
+      data-aria-viewport-area tabindex="0"
+      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 class="ban" :class="banImg" tabindex="0" aria-label="Image" :aria-description="$route.meta.nameAll"></div>
+    </div>
     <div class="nav_2" data-aria-viewport-area tabindex="0"
       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>
+      <ul tabindex="-1">
         <li
           :class="{ cur: $route.meta.nameAll === item.name }"
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.path)"
+          @keydown.enter.passive="skip(item.path)"
+          tabindex="0"
+          aria-label="Link"
+          :aria-description="item.name"
         >
           <img :src="`/data/Publications/${index + 1}.png`" alt="" />
           <p>{{ item.name }}</p>
@@ -22,10 +31,18 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
-      <Router-link to="/Layout/Publications/1">Publications></Router-link>
-      <span class="jump" @click="backUrl">{{ $route.meta.nameAll }}></span>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home" tabindex="0" aria-description="Home">Home></Router-link>
+      <Router-link to="/Layout/Publications/1" tabindex="0" aria-description="Publications">Publications></Router-link>
+      <span class="jump"
+        @click="backUrl"
+        @keydown.enter.passive="backUrl"
+        tabindex="0"
+        aria-label="Link"
+        :aria-description="$route.meta.nameAll"
+      >
+        {{ $route.meta.nameAll }}>
+      </span>
     </div>
     <!-- 二级嵌套路由 -->
     <Router-view />

web/src/views/Search/About.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchAbout" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
-      <h3 v-html="item.h3"></h3>
-      <p v-html="item.p"></p>
+      <h3 v-html="item.h3" tabindex="0"></h3>
+      <p v-html="item.p" tabindex="0"></p>
     </div>
   </div>
 </template>

web/src/views/Search/All.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchAll" v-else>
     <div
       class="row"
       v-for="(item, index) in data[pageSize - 1]"
       :key="index"
       @click="skip(item)"
+      @keydown.enter.passive="skip(item)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right" :class="{ rightAC: !item.p }">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
     <!-- 查看详情组件 -->
     <CollectionsInfo v-if="isShow" :isShow.sync="isShow" :infoObj="infoObj" />

web/src/views/Search/Collections.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchCollections" v-else>
     <div
       class="row"
       v-for="(item, index) in data[pageSize - 1]"
       :key="index"
       @click="lookBig(item)"
+      @keydown.enter.passive="lookBig(item)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
     <!-- 查看详情组件 -->
     <CollectionsInfo v-if="isShow" :isShow.sync="isShow" :infoObj="infoObj" />

web/src/views/Search/Employment.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchEmployment" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Events.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchEvents" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" alt="item.h3"
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right" :class="{rightAC:!item.p}">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Exhibitions.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchExhibitions" v-else>
     <div
       class="row"
       v-for="item in data[pageSize - 1]"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" alt="item.h3"
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
   </div>
 </template>

web/src/views/Search/Join.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchJoin" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" alt="item.h3"
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right" :class="{rightAC:!item.p}">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Learn.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchLearn" v-else>
     <div
       class="row"
       v-for="item in data[pageSize - 1]"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
   </div>
 </template>

web/src/views/Search/Research.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchResearch" v-else>
     <div
       class="row"
       v-for="item in data[pageSize - 1]"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right" :class="{rightAC:!item.p}">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
     <!-- 分页 -->
@@ -22,8 +29,11 @@
         v-for="i in data.length"
         :key="i"
         @click="pageChange(i)"
-        >{{ i }}</span
+        @keydown.enter.passive="pageChange(i)"
+        aria-label="Link"
       >
+        {{ i }}
+      </span>
     </div>
   </div>
 </template>

web/src/views/Search/Terms.vue

@@ -1,18 +1,25 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchTerms" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
       <div class="left" v-if="item.cover">
-        <img :src="item.cover" alt="" />
+        <img :src="item.cover" :alt="item.h3" 
+          tabindex="0"
+          :aria-description="item.h3"
+        />
       </div>
       <div class="right">
-        <h3 v-html="item.h3"></h3>
-        <p v-html="item.p"></p>
+        <h3 v-html="item.h3" tabindex="0"></h3>
+        <p v-html="item.p" tabindex="0"></p>
       </div>
     </div>
   </div>

web/src/views/Search/Visit.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="null" v-if="data.length === 0">no information...</div>
+  <div class="null" v-if="data.length === 0" tabindex="0">no information...</div>
   <div class="SearchVisit" v-else>
     <div
       class="row"
       v-for="item in data"
       :key="item.id"
       @click="skip(item.path)"
+      @keydown.enter.passive="skip(item.path)"
+      tabindex="0"
+      aria-label="Link"
+      :aria-description="item.h3"
     >
-      <h3 v-html="item.h3"></h3>
-      <p v-html="item.p"></p>
+      <h3 v-html="item.h3" tabindex="0"></h3>
+      <p v-html="item.p" tabindex="0"></p>
     </div>
   </div>
 </template>

web/src/views/Search/index.vue

@@ -3,35 +3,73 @@
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
-      <span>Search></span>
-      <span>List></span>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <span
+        tabindex="0"
+        aria-label="Link"
+        aria-description="Search"
+      >
+        Search>
+      </span>
+      <span
+        tabindex="0"
+        aria-label="Link"
+        aria-description="List"
+      >
+        List>
+      </span>
     </div>
-    <div class="titleBox">
+    <div class="titleBox" tabindex="0">
       Search
       <span> {{num}} results</span>
     </div>
     <div class="searchForm" data-aria-interaction-area tabindex="0"
       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>
+      <input class="searchWord" type="text" v-model="txt" 
+        tabindex="0"
+        aria-description="Input keyword"
+      />
+      <div class="searchBtn"
+        @click="searchBtn"
+        @keydown.enter.passive="searchBtn"
+        tabindex="0"
+        aria-label="Button"
+      >
+        Search
+      </div>
     </div>
     <!-- 切换tab动态路由 -->
     <div class="searchMenu" data-aria-viewport-area tabindex="0"
       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">
+      <div v-for="item in tabData" :key="item.id" tabindex="-1">
         <span
           :class="{ active: cut === item.cut }"
           class="txt"
           @click="cutCom(item.cut)"
-          >{{ item.name }}</span
+          @keydown.enter.passive="cutCom(item.cut)"
+          tabindex="0"
+          aria-label="Link"
         >
+          {{ item.name }}
+        </span>
         <span v-if="item.id !== 11"> | </span>
       </div>
-      <div class="more" @click="more" v-if="moreShow">
+      <div class="more"
+        v-if="moreShow"
+        @click="more"
+        @keydown.enter.passive="more"
+        tabindex="0"
+        aria-label="Button"
+        aria-description="More"
+      >
         <span>More</span>
         <span class="el-icon-caret-bottom"></span>
       </div>
@@ -40,7 +78,7 @@
     <div class="comm" data-aria-viewport-area tabindex="0"
       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>
+      <component ref="comSon" :is="cut" :txt='txt' :num.sync='num' tabindex="-1"></component>
     </div>
   </div>
 </template>

web/src/views/Visit/Visit2.vue

@@ -7,7 +7,10 @@
       :class="{ hintShow: hintShow }"
       @click="hintShow = true"
     >
-      <div>
+      <div tabindex="0"
+        aria-description="The reservation service is now under maintenance. Please go to Capital
+        Museum's WeChat account for reservation."
+      >
         The reservation service is now under maintenance. Please go to Capital
         Museum's WeChat account for reservation.<span>X</span>
       </div>
@@ -16,99 +19,112 @@
       <div class="mm1l">
         <p>
           <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
-          <span>&nbsp;<strong>How to Make a Reservation?</strong></span>
+          <span>&nbsp;<strong tabindex="0">How to Make a Reservation?</strong></span>
         </p>
         <p><br /></p>
-        <p>Telephone Reservation:</p>
-        <p>•&nbsp; Individual visitors:&nbsp;<span style="color: rgb(255, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 14px;">+86 (10) 63393339</span></p>
-        <p>•&nbsp; Group visitors:&nbsp;<span style="font-size: 14px; color: rgb(255, 0, 0);">+86 (10) 63370458</span></p>
-        <p>From 9:00 to 17:00 every day.</p>
+        <p tabindex="0">Telephone Reservation:</p>
+        <p tabindex="0">•&nbsp; Individual visitors:&nbsp;<span style="color: rgb(255, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 14px;">+86 (10) 63393339</span></p>
+        <p tabindex="0">•&nbsp; Group visitors:&nbsp;<span style="font-size: 14px; color: rgb(255, 0, 0);">+86 (10) 63370458</span></p>
+        <p tabindex="0">From 9:00 to 17:00 every day.</p>
         <p><br /></p>
       </div>
       <div class="mm1r">
-        <p>
+        <p tabindex="0">
           Either system will issue a confirmation number. Visitors will be
           required to show the number and valid ID in order to receive free
           entrance tickets on the day of their visit.
         </p>
-        <h2>Online Reservation</h2>
+        <h2 tabindex="0">Online Reservation</h2>
       </div>
     </div>
     <div class="sidebar">
       <ul>
         <!-- 第一个内容 -->
         <li class="title">
-          <span>Guidelines for Reservations</span>
+          <span tabindex="0">Guidelines for Reservations</span>
           <span
             class="arrow"
             :class="{ 'arrow-up': flag === 'one' }"
             @click="cutFlag('one')"
+            @keydown.enter.passive="cutFlag('one')"
+            tabindex="0"
+            aria-label="Button"
+            aria-description="Show / hide detail"
           ></span>
           <div class="in-sidebar" :class="{ inSidebarOne: flag === 'one' }">
             <p style="text-align: center"><br /></p>
-            <p><img src="../../assets/images/Visit/pp1.jpg" alt="" /></p>
-            <p><br /></p>
             <p>
-              <span><strong>Ways of Reservation</strong></span>
+              <img src="../../assets/images/Visit/pp1.jpg" alt=""
+                tabindex="0" aria-describedat="Ways of Reservation"
+              />
             </p>
             <p><br /></p>
             <p>
+              <span tabindex="0"><strong>Ways of Reservation</strong></span>
+            </p>
+            <p><br /></p>
+            <p tabindex="0"
+              aria-description=""
+            >
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
                   font-size: 14px;
                 "
-                >There are 3,600 daily personal booking places, available
-                through website (3000 places) and telephone (600 places). The
-                website</span
               >
-              <span
+                There are 3,600 daily personal booking places, available
+                through website (3000 places) and telephone (600 places). The
+                website
+              </span>
+              <a
                 style="
                   font-family: arial, helvetica, sans-serif;
                   font-size: 14px;
                   text-decoration: none;
+                  color: rgb(255, 0, 0)
                 "
-                ><a
-                  :href="$homePageUrl"
-                  style="color: rgb(255, 0, 0)"
-                  >{{$homePageUrl}}</a
-                ></span
+                :href="$homePageUrl"
+                tabindex="0"
               >
+                {{$homePageUrl}}
+              </a>
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
                   font-size: 14px;
                 "
-                >offers&nbsp;24-hour&nbsp;</span
               >
-            </p>
-            <p>
+                offers&nbsp;24-hour&nbsp;
+              </span>
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
                   font-size: 14px;
                 "
-                >service, and the&nbsp;telephone</span
               >
+                service, and the&nbsp;telephone
+              </span>
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
                   font-size: 14px;
                   color: rgb(255, 0, 0);
                 "
-                >+86 (10) 63393339</span
               >
+                +86 (10) 63393339
+              </span>
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
                   font-size: 14px;
                 "
-                >service is available from 09:00 to 17:00. One person is only
-                allowed to book one ticket.</span
               >
+                service is available from 09:00 to 17:00. One person is only
+                allowed to book one ticket.
+              </span>
             </p>
             <p><br /></p>
-            <p>
+            <p tabindex="0">
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
@@ -127,7 +143,7 @@
               >
             </p>
             <p><br /></p>
-            <p>
+            <p tabindex="0">
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
@@ -145,7 +161,6 @@
                     valign="top"
                     colspan="2"
                     rowspan="1"
-                    style="word-break: break-all"
                   >
                     <p style="text-align: center; height: 1px">
                       <img
@@ -156,21 +171,23 @@
                   </td>
                 </tr>
                 <tr>
-                  <td width="420" valign="top" style="word-break: break-all">
+                  <td width="420" valign="top">
                     <p style="text-align: center">
                       <img
                         src="../../assets/images/Visit/pp2.jpg"
                         style="max-width: 100%"
+                        tabindex="0"
+                        aria-description="Way to Get Ticket"
                       />
                     </p>
                   </td>
-                  <td width="420" valign="top" style="word-break: break-all">
+                  <td width="420" valign="top">
                     <p>
                       <span style="font-family: arial, helvetica, sans-serif"
                         ><strong>&nbsp; &nbsp;&nbsp;</strong></span
                       >
                     </p>
-                    <p>
+                    <p tabindex="0">
                       <strong style="font-family: arial, helvetica, sans-serif"
                         ><span style="font-size: 18px"
                           >Way to Get Ticket</span
@@ -178,45 +195,28 @@
                       >
                     </p>
                     <p><br /></p>
-                    <p>
+                    <p tabindex="0">
                       <span
                         style="
                           font-size: 14px;
                           font-family: arial, helvetica, sans-serif;
                         "
-                        >For personal visitors, please obtain the ticket at the
-                        service center at the north door by&nbsp;</span
-                      >
-                    </p>
-                    <p>
-                      <span
-                        style="
-                          font-size: 14px;
-                          font-family: arial, helvetica, sans-serif;
-                        "
-                        >showing your booking number and the ID card used when
-                        the booking was made.</span
                       >
+                        For personal visitors, please obtain the ticket at the
+                        service center at the north door by showing your booking number and the ID card used when
+                        the booking was made.
+                      </span>
                     </p>
                     <p><br /></p>
-                    <p>
-                      <span
-                        style="
-                          font-size: 14px;
-                          font-family: arial, helvetica, sans-serif;
-                        "
-                        >For group visitors, the leader can obtain the ticket at
-                        the east door of the ground floor&nbsp;</span
-                      >
-                    </p>
-                    <p>
+                    <p tabindex="0">
                       <span
                         style="
                           font-size: 14px;
                           font-family: arial, helvetica, sans-serif;
                         "
-                        >with valid documents and introductory letters.</span
                       >
+                        For group visitors, the leader can obtain the ticket at the east door of the ground floor with valid documents and introductory letters.
+                      </span>
                     </p>
                     <p><br /></p>
                   </td>
@@ -230,7 +230,6 @@
                     valign="top"
                     colspan="2"
                     rowspan="1"
-                    style="word-break: break-all"
                   >
                     <p style="text-align: center; height: 1px">
                       <img
@@ -241,7 +240,7 @@
                   </td>
                 </tr>
                 <tr>
-                  <td width="420" valign="top" style="word-break: break-all">
+                  <td width="420" valign="top">
                     <p>
                       <strong
                         style="
@@ -251,7 +250,7 @@
                         ><br
                       /></strong>
                     </p>
-                    <p>
+                    <p tabindex="0">
                       <strong
                         style="
                           font-family: arial, helvetica, sans-serif;
@@ -261,7 +260,7 @@
                       ><br />
                     </p>
                     <p><br /></p>
-                    <p>
+                    <p tabindex="0">
                       <span
                         style="
                           font-family: arial, helvetica, sans-serif;
@@ -270,7 +269,7 @@
                         >From 09:00-16:00, Tuesday to Sunday.&nbsp;</span
                       >
                     </p>
-                    <p>
+                    <p tabindex="0">
                       <span
                         style="
                           font-family: arial, helvetica, sans-serif;
@@ -280,7 +279,7 @@
                         holidays.&nbsp;</span
                       >
                     </p>
-                    <p>
+                    <p tabindex="0">
                       <span
                         style="
                           font-family: arial, helvetica, sans-serif;
@@ -290,18 +289,20 @@
                       >
                     </p>
                   </td>
-                  <td width="420" valign="top" style="word-break: break-all">
+                  <td width="420" valign="top">
                     <p style="text-align: center">
                       <img
                         src="../../assets/images/Visit/pp3.jpg"
                         style="max-width: 100%"
+                        tabindex="0"
+                        aria-description="Entrance Time"
                       />
                     </p>
                   </td>
                 </tr>
               </tbody>
             </table>
-            <p>
+            <p tabindex="0">
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
@@ -311,7 +312,7 @@
               >
             </p>
             <p><br /></p>
-            <p>
+            <p tabindex="0">
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
@@ -322,7 +323,7 @@
                 at the entrance.</span
               >
             </p>
-            <p>
+            <p tabindex="0">
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
@@ -333,7 +334,9 @@
                 Please ask museum personnel for help.</span
               ><br />
             </p>
-            <p>
+            <p tabindex="0"
+              aria-description="3. Space in the exhibition is limited, so museum may control the visitor numbers at any time to ensure orderly and pleasant viewing. Thanks for your understanding and cooperation."
+            >
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
@@ -353,7 +356,7 @@
                 >&nbsp; &nbsp; cooperation.</span
               ><br />
             </p>
-            <p>
+            <p tabindex="0">
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
@@ -368,11 +371,15 @@
         </li>
         <!-- 第二个内容 -->
         <li class="title title2">
-          <span>Group Visit</span>
+          <span tabindex="0">Group Visit</span>
           <span
             class="arrow"
             :class="{ 'arrow-up': flag === 'tow' }"
             @click="cutFlag('tow')"
+            @keydown.enter.passive="cutFlag('tow')"
+            tabindex="0"
+            aria-label="Button"
+            aria-description="Show / hide detail"
           ></span>
           <div class="in-sidebar" :class="{ inSidebarTow: flag === 'tow' }">
             <table data-sort="sortDisabled">
@@ -382,7 +389,6 @@
                     valign="top"
                     colspan="2"
                     rowspan="1"
-                    style="word-break: break-all"
                   >
                     <p style="text-align: center">
                       <img
@@ -393,9 +399,9 @@
                   </td>
                 </tr>
                 <tr>
-                  <td width="430" valign="top" style="word-break: break-all">
+                  <td width="430" valign="top">
                     <p><br /></p>
-                    <p>
+                    <p tabindex="0">
                       <span
                         style="
                           font-family: arial, helvetica, sans-serif;
@@ -406,34 +412,30 @@
                       >
                     </p>
                     <p><br /></p>
-                    <p>
-                      <span
-                        style="
-                          font-family: arial, helvetica, sans-serif;
-                          font-size: 14px;
-                        "
-                        >Requirements: Name of the tour group, full name of the
-                        person making the reservation,&nbsp;</span
-                      >
-                    </p>
-                    <p>
+                    <p tabindex="0">
                       <span
                         style="
                           font-family: arial, helvetica, sans-serif;
                           font-size: 14px;
+                          
                         "
-                        >contact information and number of group members.</span
                       >
+                        Requirements: Name of the tour group,
+                        full name of the person making the reservation,
+                        contact information and number of group members.
+                      </span>
                     </p>
                     <p><br /></p>
                     <p>
                       <span
+                        tabindex="0"
                         style="
                           font-family: arial, helvetica, sans-serif;
                           font-size: 14px;
                         "
                         >Telephone reservation (group visitors):
                         <span
+                          tabindex="0"
                           style="
                             font-size: 14px;
                             font-family: arial, helvetica, sans-serif;
@@ -461,7 +463,7 @@
                       />
                     </p>
                   </td>
-                  <td width="430" valign="top" style="word-break: break-all">
+                  <td width="430" valign="top">
                     <p style="text-align: center"><br /></p>
                     <p>
                       <img
@@ -478,60 +480,71 @@
         </li>
         <!-- 第三个内容 -->
         <li class="title title3">
-          <span>Relevant Information</span>
+          <span tabindex="0">Relevant Information</span>
           <span
             class="arrow"
             :class="{ 'arrow-up': flag === 'three' }"
             @click="cutFlag('three')"
+            @keydown.enter.passive="cutFlag('three')"
+            tabindex="0"
+            aria-label="Button"
+            aria-description="Show / hide detail"
           ></span>
           <div class="in-sidebar" :class="{ inSidebarThree: flag === 'three' }">
             <p><br /></p>
-            <p>
+            <p tabindex="0">
               <span
                 style="
                   font-family: arial, helvetica, sans-serif;
                   font-size: 14px;
                 "
-                >Ticket-reservation is subject to change when there is a large
-                museum event or a special opening ceremony for a new exhibition.
-                The Capital Museum will make a public&nbsp;</span
               >
+                Ticket-reservation is subject to change when there is a large
+                museum event or a special opening ceremony for a new exhibition.
+                The Capital Museum will make a public announcement in advance. Please visit the official website or
+                inquire by telephone for detailed information.
+              </span>
             </p>
+            <p><br /></p>
             <p>
               <span
+                tabindex="0"
                 style="
                   font-family: arial, helvetica, sans-serif;
                   font-size: 14px;
                 "
-                >announcement in advance. Please visit the official website or
-                inquire by telephone for detailed information.</span
               >
-            </p>
-            <p><br /></p>
-            <p>
+                Official website:
+              </span>
+              <a
+                tabindex="0"
+                style="
+                  font-size: 14px;
+                  font-family: arial, helvetica, sans-serif;
+                  color: rgb(255, 0, 0);
+                "
+              >
+                {{$homePageUrl}}
+              </a>
               <span
+                tabindex="0"
                 style="
                   font-family: arial, helvetica, sans-serif;
                   font-size: 14px;
+                " 
+              >
+                &nbsp; &nbsp; &nbsp; &nbsp;Phone:
+              </span>
+              <span
+                tabindex="0"
+                style="
+                  font-size: 14px;
+                  font-family: arial, helvetica, sans-serif;
+                  color: rgb(255, 0, 0);
                 "
-                >Official website:
-                <span
-                  style="
-                    font-size: 14px;
-                    font-family: arial, helvetica, sans-serif;
-                    color: rgb(255, 0, 0);
-                  "
-                  >{{$homePageUrl}}</span
-                >&nbsp; &nbsp; &nbsp; &nbsp;Phone:
-                <span
-                  style="
-                    font-size: 14px;
-                    font-family: arial, helvetica, sans-serif;
-                    color: rgb(255, 0, 0);
-                  "
-                  >+86 (10) 63370491</span
-                ></span
               >
+                +86 (10) 63370491
+              </span>
             </p>
           </div>
         </li>

web/src/views/Visit/Visit3.vue

@@ -5,7 +5,15 @@
     <div class="conten">
       <div class="box5">
         <ul>
-          <li class="titleon" v-for="(item,index) in topData" :key="index" :class="{titleoff:index===topInd}" @mouseenter='topInd=index'>
+          <li class="titleon"
+            v-for="(item,index) in topData"
+            :key="index" :class="{titleoff:index===topInd}"
+            @mouseenter='topInd=index'
+            @focus="topInd=index"
+            tabindex="0"
+            aria-label="Image link"
+            :aria-description="`Floor Plans ${item}`"
+          >
             {{item}}&nbsp;&nbsp;&nbsp;
           </li>
         </ul>

web/src/views/Visit/Visit4.vue

@@ -5,33 +5,48 @@
     <div class="conten">
       <div class="row">
         <div>
-          <h3>Audio Guide</h3>
-          <p>The museum offers free audio guide. Visitors can get the devices from the audio guide</p>
-          <p>cabinets with 200 RMB refundable deposit. The cabinets can be found at several locations</p>
-          <p>in the museum, such as the east of the main entrance. The service is available in Chinese</p>
-          <p>and English. For further questions, please visit the information desk for help.</p>
+          <h3 tabindex="0">Audio Guide</h3>
+          <p tabindex="0">
+            The museum offers free audio guide.</p>
+            <p tabindex="0">Visitors can get the devices from the audio guide cabinets with 200 RMB refundable deposit.</p>
+            <p tabindex="0">The cabinets can be found at several locations in the museum, such as the east of the main entrance.</p>
+            <p tabindex="0">The service is available in Chinese and English.</p>
+            <p tabindex="0">For further questions, please visit the information desk for help.</p>
+          </p>
         </div>
         <div>
-          <img src="../../assets/images/Visit/Audio1.jpg" alt="">
+          <img src="../../assets/images/Visit/Audio1.jpg" alt="Audio Guide"
+            tabindex="0"
+            aria-description="Audio Guide"
+          >
         </div>
       </div>
       <div class="row">
         <div>
-          <img src="../../assets/images/Visit/Audio2.jpg" alt="">
+          <img src="../../assets/images/Visit/Audio2.jpg" alt="Free Commentary Service"
+            tabindex="0"
+            aria-description="Free Commentary Service"
+          >
         </div>
         <div class="blank">
-          <h3>Free Commentary Service</h3>
-          <p>Commentators provide free services on each open day (Tuesday to Sunday). Please check </p>
-          <p>the specific time and exhibition location in the museum on the day of your visit.</p>
+          <h3 tabindex="0">Free Commentary Service</h3>
+          <p tabindex="0">
+            Commentators provide free services on each open day (Tuesday to Sunday).
+          </p>
+          <p tabindex="0">
+            Please check the specific time and exhibition location in the museum on the day of your visit.
+          </p>
         </div>
       </div>
       <div class="row">
         <div>
-          <h3>Volunteer Guide</h3>
-          <p>Our museum volunteers offer free explanations and help. </p>
+          <h3 tabindex="0">Volunteer Guide</h3>
+          <p tabindex="0">Our museum volunteers offer free explanations and help. </p>
         </div>
         <div>
-          <img src="../../assets/images/Visit/Audio3.jpg" alt="">
+          <img src="../../assets/images/Visit/Audio3.jpg" alt="Volunteer Guide"
+            aria-description="Volunteer Guide"
+          >
         </div>
       </div>
     </div>

web/src/views/Visit/Visit5.vue

@@ -5,38 +5,49 @@
     <div class="conten">
       <div class="row">
         <div>
-          <h3>Facilities for the Handicapped</h3>
-          <p>Wheelchairs are available for visitors with special needs. Professional consultants and guides </p>
-          <p>are on hand to help. </p>
+          <h3 tabindex="0">Facilities for the Handicapped</h3>
+          <p tabindex="0">Wheelchairs are available for visitors with special needs. Professional consultants and guides are on hand to help.</p>
           <br />
-          <p>In addition to professional commentators in the exhibition halls, 15 advanced self-service </p>
-          <p>screens and six special ones for people in wheelchairs have been installed in the exhibit </p>
-          <p>areas. Visitors can read and download data, or carry out interactive operations via these</p>
-          <p>screens. A total of 18 card-operated telephones, including six for those in wheelchairs,</p>
-          <p>have also been installed.</p>
+          <p tabindex="0">
+            In addition to professional commentators in the exhibition halls, 15 advanced self-service 
+            screens and six special ones for people in wheelchairs have been installed in the exhibit 
+            areas. Visitors can read and download data, or carry out interactive operations via these
+            screens. A total of 18 card-operated telephones, including six for those in wheelchairs,
+            have also been installed.
+          </p>
         </div>
         <div>
-          <img src="../../assets/images/Visit/access1.jpg" alt="">
+          <img src="../../assets/images/Visit/access1.jpg" alt="Facilities for the Handicapped"
+            tabindex="0" aria-description="Facilities for the Handicapped"
+          >
         </div>
       </div>
       <div class="row">
         <div>
-          <img src="../../assets/images/Visit/access2.jpg" alt="">
+          <img src="../../assets/images/Visit/access2.jpg" alt="Nursery Room"
+            tabindex="0" aria-description="Nursery Room"
+          >
         </div>
         <div class="blank">
-          <h3>Nursery Room</h3>
-          <p>Nursery room is available on the 5th floor of the museum. Professional consultants</p>
-          <p>and guides are on hand to help. </p>
+          <h3 tabindex="0">Nursery Room</h3>
+          <p tabindex="0">
+            Nursery room is available on the 5th floor of the museum. Professional consultants
+            and guides are on hand to help.
+          </p>
         </div>
       </div>
       <div class="row">
         <div>
-          <h3>Lockers</h3>
-          <p>Lockers are available on the 1st floor, the right-hand side of the north entrance. Professional </p>
-          <p>consultants and guides are on hand to help. </p>
+          <h3 tabindex="0">Lockers</h3>
+          <p tabindex="0">
+            Lockers are available on the 1st floor, the right-hand side of the north entrance. Professional
+            consultants and guides are on hand to help.
+          </p>
         </div>
         <div>
-          <img src="../../assets/images/Visit/access3.jpg" alt="">
+          <img src="../../assets/images/Visit/access3.jpg" alt="Lockers"
+            aria-description="Lockers"
+          >
         </div>
       </div>
     </div>

web/src/views/Visit/Visit6.vue

@@ -5,26 +5,32 @@
     <div class="conten">
       <div class="row">
         <div>
-          <h3>Cafeteria</h3>
-          <p>he cafeteria is located on the northeast corner of the round exhibition room at basement level. Covering about 200 square meters, it offers coffee, soft drinks and low alcohol beverages.</p>
+          <h3 tabindex="0">Cafeteria</h3>
+          <p tabindex="0">
+            The cafeteria is located on the northeast corner of the round exhibition room at basement level. Covering about 200 square meters, it offers coffee, soft drinks and low alcohol beverages.
+          </p>
         </div>
         <div>
-          <img src="../../assets/images/Visit/cafe1.jpg" alt="">
+          <img src="../../assets/images/Visit/cafe1.jpg" alt="Cafeteria"
+            aria-description="Cafeteria"
+          >
         </div>
       </div>
       <div class="row">
         <div>
-          <img src="../../assets/images/Visit/cafe2.jpg" alt="">
+          <img src="../../assets/images/Visit/cafe2.jpg" alt="Shop">
         </div>
         <div class="blank">
-          <h3>Shop</h3>
-          <p> Located in the southwest of the museum's basement and with a floor space of about </p>
-          <p>550 square meters, the souvenir shop offers a wide variety of souvenirs including special</p>
-          <p>souvenirs from the museum, books, and audio-visual products. Also on sale here are </p>
-          <p>various arts and crafts with local characteristics, gold and jade ornaments, collotype </p>
-          <p>calligraphic works and paintings of great collecting value, and other arts and crafts with </p>
-          <p>unique features. The thousands of books on sale here mainly have a "Beijing taste" or </p>
-          <p>are books on collecting and connoisseurship.</p>
+          <h3 tabindex="0">Shop</h3>
+          <p tabindex="0">
+            Located in the southwest of the museum's basement and with a floor space of about
+            550 square meters, the souvenir shop offers a wide variety of souvenirs including special
+            souvenirs from the museum, books, and audio-visual products. Also on sale here are
+            various arts and crafts with local characteristics, gold and jade ornaments, collotype
+            calligraphic works and paintings of great collecting value, and other arts and crafts with
+            unique features. The thousands of books on sale here mainly have a "Beijing taste" or
+            are books on collecting and connoisseurship.
+          </p>
         </div>
       </div>
       <div class="buy">

web/src/views/Visit/Visit7.vue

@@ -3,29 +3,31 @@
   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">
+    <div class="top" tabindex="0"
+      aria-label="Text" aria-description="Visitor Guidelines"
+    >
       <img src="../../assets/images/Visit/last1.jpg" alt="">
     </div>
     <div class="txt">
       <div>
-        <p><span>01</span>All exhibitions in the museum are free.</p>
-        <p><span>02</span>The museum opens from Tuesday to Sunday, 9:00 - 17:00 (no admission after 16:00), but is closed on Mondays (except for holidays).</p>
-        <p><span>03</span>Please make ticket reservations at least one day before the desired visit and obtain your free ticket with your reservation number.</p>
-        <p><span>04</span>Please keep your valid ID (passport) available for inspection.</p>
+        <p tabindex="0"><span>01</span>All exhibitions in the museum are free.</p>
+        <p tabindex="0"><span>02</span>The museum opens from Tuesday to Sunday, 9:00 - 17:00 (no admission after 16:00), but is closed on Mondays (except for holidays).</p>
+        <p tabindex="0"><span>03</span>Please make ticket reservations at least one day before the desired visit and obtain your free ticket with your reservation number.</p>
+        <p tabindex="0"><span>04</span>Please keep your valid ID (passport) available for inspection.</p>
       </div>
       <div>
-        <p><span>05</span>Inebriated and improperly-dressed persons will be refused entry.</p>
-        <p><span>06</span>Inflammable and explosive materials, knives subject to control and dangerous articles cannot be brought into the museum.</p>
-        <p><span>07</span>Photography is permitted, but flash and tripod is not allowed.</p>
-        <p><span>08</span>In case of an emergency, please follow the directions of our museum staff.</p>
+        <p tabindex="0"><span>05</span>Inebriated and improperly-dressed persons will be refused entry.</p>
+        <p tabindex="0"><span>06</span>Inflammable and explosive materials, knives subject to control and dangerous articles cannot be brought into the museum.</p>
+        <p tabindex="0"><span>07</span>Photography is permitted, but flash and tripod is not allowed.</p>
+        <p tabindex="0"><span>08</span>In case of an emergency, please follow the directions of our museum staff.</p>
       </div>
     </div>
-    <div class="thank">Thank you for your cooperation.</div>
+    <div class="thank" tabindex="0">Thank you for your cooperation.</div>
     <div class="bottom">
-      <p>Official website of Capital Museum <a :href="$homePageUrl">{{$homePageUrl}}</a></p>
-      <p>Telephone reservation (individual visitors) <span>+86 (10) 63393339</span></p>
-      <p>Telephone reservation (group visitors) <span>+86 (10) 63370458</span></p>
-      <p>Inquiry Hotline <span>+86 (10) 63370491</span></p>
+      <p tabindex="0">Official website of Capital Museum <a :href="$homePageUrl" tabindex="0">{{$homePageUrl}}</a></p>
+      <p tabindex="0">Telephone reservation (individual visitors) <span>+86 (10) 63393339</span></p>
+      <p tabindex="0">Telephone reservation (group visitors) <span>+86 (10) 63370458</span></p>
+      <p tabindex="0">Inquiry Hotline <span>+86 (10) 63370491</span></p>
     </div>
   </div>
 </div>

web/src/views/Visit/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="Visit">
-    <div class="ban" data-aria-viewport-area tabindex="0"
+    <div class="ban_wrapper" data-aria-viewport-area tabindex="0"
       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="ban" tabindex="0" aria-label="Image" 
+        :aria-description="`${$route.meta.nameAll} banner`"
+      />
+    </div>
     <div class="nav_2" data-aria-viewport-area tabindex="0"
       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."
     >
@@ -12,6 +16,10 @@
           v-for="(item, index) in topLi"
           :key="index"
           @click="skip(item.path)"
+          @keydown.enter.passive="skip(item.path)"
+          tabindex="0"
+          aria-label="Link"
+          :aria-description="item.name"
         >
           <img :src="require(`@/assets/images/Visit/${item.img}`)" alt="" />
           <p>{{ item.name }}</p>
@@ -22,9 +30,24 @@
        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>
-      <Router-link to="/Layout/Visit">Visit></Router-link>
-      <span>{{$route.meta.nameAll}}></span>
+      <Router-link to="/Layout/Home"
+        tabindex="0"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link to="/Layout/Visit"
+        tabindex="0"
+        aria-description="Visit"
+      >
+        Visit>
+      </Router-link>
+      <Router-link to=""
+        tabindex="0"
+        :aria-description="$route.meta.nameAll"
+      >
+        {{$route.meta.nameAll}}>
+      </Router-link>
     </div>
     <!-- 二级嵌套路由 -->
     <Router-view />

web/src/views/accessibility.vue

@@ -21,7 +21,7 @@
     >
       <div class="text-wrapper">
         <p>
-          {{ elemType + elemDisc }}
+          {{ elemType + (elemType ? ': ' : '') + elemDisc }}
         </p>
       </div>
       <button
@@ -616,10 +616,31 @@ export default {
 
     this.$eventBus.$on('request-read', (text) => {
       console.log('无障碍组件收到request-read消息：', text);
-      if (this.isCompActive) {
+      if (this.ariaSettings.isCompActive) {
         this.planToPlayAudio('', text)
       }
     })
+    this.$eventBus.$on('request-magnify', (textObj) => {
+      console.log('无障碍组件收到request-magnify消息：', textObj);
+      if (this.ariaSettings.isCompActive) {
+        this.elemType = textObj.elemType
+        this.elemDisc = textObj.elemDisc
+      }
+    })
+    this.$eventBus.$on('request-process-text-element', (rootElement) => {
+      console.log('无障碍组件收到request-process-text-element消息：', rootElement);
+      const tagNameList = [
+        'span', 'em', 'i', 'small', 'b', 'strong', 'del', 'q', 'sub',
+        'div', 'pre', 'p', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'td', 'th',
+      ]
+      for (const tagName of tagNameList) {
+        const elemList = rootElement.getElementsByTagName(tagName)
+        for (const elemItem of elemList) {
+          elemItem.setAttribute('tabindex', '0')
+        }
+      }
+    })
   },
   destroyed() {
     window.removeEventListener('storage', this.loadStoredSettings, {
@@ -633,6 +654,8 @@ export default {
     })
 
     this.$eventBus.$off('request-read')
+    this.$eventBus.$off('request-magnify')
+    this.$eventBus.$off('request-process-text-element')
 
     document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
       passive: true,
@@ -642,7 +665,7 @@ export default {
     })
   },
   methods: {
-    planToPlayAudio: utils.debounce(function(taskId, text = '') {
+    planToPlayAudio(taskId, text = '') {
       let XHR = new XMLHttpRequest()
       const that = this
       XHR.onreadystatechange = function() {
@@ -672,9 +695,9 @@ 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.elemType + this.elemDisc
+        content: text || this.elemType + (this.elemType ? ': ' : '') + this.elemDisc
       }))
-    }, 500),
+    },
     keyEventHandler(e) {
       if (e.repeat) {
         return
@@ -793,7 +816,7 @@ export default {
       this.crosshairPosition.x = e.clientX
       this.crosshairPosition.y = e.clientY
     },
-    onMouseOverForPointRead(e) {
+    onMouseOverForPointRead: utils.debounce(function(e) {
       if (!this.ariaSettings.isCompActive) {
         return
       }
@@ -804,7 +827,7 @@ export default {
 
         this.planToPlayAudio()
       }
-    },
+    }, 500),
     onMouseOverForContinueRead(e) {
       if (!this.ariaSettings.isCompActive) {
         return
@@ -848,7 +871,7 @@ export default {
       if (!this.ariaSettings.isCompActive) {
         return
       }
-      const extractedText = utils.extractTextForMagnify(e)
+      const extractedText = utils.extractTextForMagnify(e, true)
       if (extractedText) {
         this.elemType = extractedText.elemType
         this.elemDisc = extractedText.elemDisc
@@ -988,7 +1011,7 @@ a {
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 999;
+  z-index: 1000;
   .crosshair-h {
     position: fixed;
     width: 100%;

web/src/views/bottom/Employment.vue

@@ -1,32 +1,43 @@
 <template>
   <div class="bottomEmployment">
-    <div class="ban" data-aria-viewport-area tabindex="0"
+    <div class="banWrapper" data-aria-viewport-area tabindex="0"
       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="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="Employment"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
-        <Router-link to="/Layout/Home">Home></Router-link>
+      <div tabindex="-1">
+        <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+        <Router-link to="/Layout/Home" tabindex="0"
+          aria-description="Home"
+        >
+          Home>
+        </Router-link>
       </div>
     </div>
     <div class="conten" data-aria-viewport-area tabindex="0"
       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">
-        <div class="title_2">
+      <div class="y_box" tabindex="-1">
+        <div class="title_2" tabindex="0">
           2017 Second-Half Public Recruitment Notice of the Capital Museum
         </div>
         <div class="info">
-          <span class="info_1">2018</span>
-          <span class="info_3">Capital Museum</span>
+          <span class="info_1" tabindex="0">2018</span>
+          <span class="info_3" tabindex="0">Capital Museum</span>
         </div>
         <div class="content_2">
-          <div class="title_3">——<span>Exhibition Overview</span>——</div>
+          <div class="title_3">——<span tabindex="0">Exhibition Overview</span>——</div>
           <div>
-            <p>
+            <p tabindex="0">
               In accordance with the regulations covering open recruitment of
               public institutions issued by the Beijing Municipal Human
               Resources and Social Security Bureau and the Beijing Municipal
@@ -34,7 +45,7 @@
               work demands of the Museum, 12 job vacancies have now become
               available. The details are as follows:
             </p>
-            <p>
+            <p tabindex="0">
               <span>ⅠRequirements: </span>
               1. Chinese nationality; support the leadership of the Communist
               Party of China <br />
@@ -47,14 +58,14 @@
               5. “35 and under” refers to people born after October 13, 1981;
               “40 and under” refers to people born after October 13, 1976.
             </p>
-            <p>
+            <p tabindex="0">
               <span>ⅡApplication and Eligibility Assessment </span>
               All applicants will have to undergo a through eligibility
               assessment on the spot. Please fill out and print the application
               form (Attachment 2) beforehand and take it with you to the
               assessment.
             </p>
-            <p>
+            <p tabindex="0">
               1. Time and Location of Assessment <br />
               September 26 to 27 <br />
               A.M. : 9:30—11:30 P.M. : 13:30—16:30 <br />
@@ -62,7 +73,7 @@
               (No. 171 Funei Street, Xicheng District. Please show your
               application form when entering.)
             </p>
-            <p>
+            <p tabindex="0">
               2. Materials to Be Submitted <br />
               1). Application form, ID card, details of household registration
               <br />
@@ -73,7 +84,7 @@
               <br />
               All materials above should be presented in the original.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅲ Admission Card</span>
               For candidates who pass the initial eligibility assessment, please
               collect your admission card at the Management Office of the White
@@ -81,7 +92,7 @@
               with assessment card, original ID card and a recent one-inch
               certified personal photo.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅳ Written Examination </span>
               The written examination will be conducted in the form of a
               comprehensive capacity test and organized by the Beijing Talent
@@ -89,25 +100,25 @@
               Cultural Heritage. <br />Time: 9:00—11:30 A.M. on October 14<br />Location：please
               refer to the admission card
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅴ Interview</span>
               One-fifth of candidates scoring over 60 will be interviewed. The
               list of interviewees will be uploaded onto the website of the
               Beijing Municipal Administration of Cultural Heritage 20 days
               after the written test.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅵ Total Score</span>The pass mark for the interview is 60.
               The total score will comprise of the written test (60%) and the
               interview score (40%).
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅶ Physical Examination </span>All the candidates who sored
               over 60 at the final stage will be subjected to a physical
               examination. This will be organized and conducted by the
               recruiting organization.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅷ Completion of Employment Formalities </span>Personnel to
               be recruited will be chosen from candidates who emerged as the
               best in the written exam and interview and qualified through the
@@ -116,7 +127,7 @@
               working days, after which we will inform chosen personnel to
               complete employment formalities.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅸ Notes </span>Eligibility assessment will be conducted
               throughout the entire recruitment process. At any stage, any
               candidates believed to have violated the recruitment regulations,
@@ -132,7 +143,13 @@
         </div>
       </div>
     </div>
-    <div class="back_btn" @click="$router.go(-1)">Back to top</div>
+    <a
+      class="back_btn"
+      href="#"
+      tabindex="0"
+    >
+      Back to top
+    </a>
   </div>
 </template>
 

web/src/views/bottom/Index.vue

@@ -2,11 +2,21 @@
   <div class="bottomIndex" data-aria-viewport-area tabindex="0"
     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">
-      <img src="/data/Index/home.jpg" alt="" @click="skip('/')" />
+    <img src="/data/Index/1.jpg" alt="" 
+      tabindex="0"
+      aria-label="Text"
+      aria-description="Site Index"
+    />
+    <div class="home" title="Home" tabindex="-1">
+      <img src="/data/Index/home.jpg" alt=""
+        @click="skip('/')"
+        @keydown.enter.passive="skip('/')"
+        tabindex="0"
+        aria-label="Text"
+        aria-description="Home"
+      />
     </div>
-    <div class="main">
+    <div class="main" tabindex="-1">
       <img src="/data/Index/main.jpg" alt="" />
       <!-- 定位的盒子 -->
       <div class="loc">
@@ -14,36 +24,48 @@
           <div
             :class="{ active: item.path !== '' }"
             @click="skip(item.path, item.sroll)"
+            @keydown.enter.passive="skip(item.path, item.sroll)"
             :title="item.title"
             v-for="(item, index) in data1"
             :key="index"
             :style="`width:${item.width};top:${item.top * 45}px;left:${
               item.left
             }`"
+            tabindex="0"
+            aria-label="Link"
+            aria-description="item.title"
           ></div>
         </div>
         <div class="tow">
           <div
             :class="{ active: item.path !== '' }"
             @click="skip(item.path, item.sroll)"
+            @keydown.enter.passive="skip(item.path, item.sroll)"
             :title="item.title"
             v-for="(item, index) in data2"
             :key="index"
             :style="`width:${item.width};top:${item.top * 45}px;left:${
               item.left
             }`"
+            tabindex="0"
+            aria-label="Link"
+            aria-description="item.title"
           ></div>
         </div>
         <div class="three">
           <div
             :class="{ active: item.path !== '' }"
             @click="skip(item.path, item.sroll)"
+            @keydown.enter.passive="skip(item.path, item.sroll)"
             :title="item.title"
             v-for="(item, index) in data3"
             :key="index"
             :style="`width:${item.width};top:${item.top * 45}px;left:${
               item.left
             }`"
+            tabindex="0"
+            aria-label="Link"
+            aria-description="item.title"
           ></div>
         </div>
       </div>

web/src/views/bottom/Use.vue

@@ -1,36 +1,46 @@
 <template>
   <div class="bottomUse">
-    <div class="ban" data-aria-viewport-area tabindex="0"
+    <div class="banWrapper" data-aria-viewport-area tabindex="0"
       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="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="Term of use"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       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>
-        <Router-link to="/Layout/Home">Home></Router-link>
+      <div tabindex="-1">
+        <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+        <Router-link to="/Layout/Home"
+          aria-description="Home"
+        >
+          Home>
+        </Router-link>
       </div>
     </div>
     <div class="conten" data-aria-viewport-area tabindex="0"
       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">
-        <div class="title_2">Terms of Use</div>
+      <div class="y_box" tabindex="-1">
+        <div class="title_2" tabindex="0">Terms of Use</div>
         <div class="info">
-          <span class="info_1">2018</span>
-          <span class="info_3">Capital Museum</span>
+          <span class="info_1" tabindex="0">2018</span>
+          <span class="info_3" tabindex="0">Capital Museum</span>
         </div>
         <div class="content_2">
-          <div class="title_3">——<span>Exhibition Overview</span>——</div>
+          <div class="title_3">——<span tabindex="0">Exhibition Overview</span>——</div>
           <div>
-            <p>Legal Notice</p>
-            <p>
+            <p tabindex="0">Legal Notice</p>
+            <p tabindex="0">
               Welcome to www.capitalmuseum.org.cn (hereinafter referred to as
               "this website"). You are expected to comply with following terms
               while using this website:
             </p>
-            <p>
+            <p tabindex="0">
               Copyright of all contents on this website, including but not
               limited to the website design, texts, pictures, audio and video
               works, etc., belong to the Capital Museum and all the parties
@@ -41,32 +51,32 @@
               unauthorized use of this website and its contents for commercial
               purposes is also prohibited.
             </p>
-            <p>
+            <p tabindex="0">
               If you download materials you consider you need from this website
               for non-commercial use (except for information with copyrights and
               proprietary rights), please contact us for permission.
             </p>
-            <p>
+            <p tabindex="0">
               Any reprints and quotes of any copyrighted articles on this
               website should conform to following requirements:
             </p>
-            <p>
+            <p tabindex="0">
               (1) For non-commercial, non-profit and non-advertising uses,
               author's name and source of the used article or picture,
               "首都博物馆网站" or "{{$homePageUrl}}", should be attached.
             </p>
-            <p>
+            <p tabindex="0">
               (2) For business, profit-making and advertising use, you should
               obtain consent of the original author, and attach the name of that
               author, limits of authority and the source, "首都博物馆网站"or
               "{{$homePageUrl}}".
             </p>
-            <p>
+            <p tabindex="0">
               (3) Any modification and cancellation of any articles or pictures
               should be approved by the author, with the limits of authority
               attached.
             </p>
-            <p>
+            <p tabindex="0">
               This website and the Capital Museum are not liable for any direct
               or indirect incidental damage resulting from the use or inability
               to use the information on this website. This website also does not
@@ -74,18 +84,18 @@
               of the provisions of this website or the laws of the People's
               Republic of China.
             </p>
-            <p>
+            <p tabindex="0">
               This website will make announcement in advance if services are to
               be suspended due to system maintenance or upgrading. The website
               and the Capital Museum are not be liable for any inconvenience or
               losses caused by the suspension of services due to hardware
               failure or force majeure.
             </p>
-            <p>
+            <p tabindex="0">
               The right of final interpretation of all contents of this website
               is owned by the Capital Museum.
             </p>
-            <p>
+            <p tabindex="0">
               To safeguard rights and interests of this website and respect for
               the authors' copyrights, we entrust Lyu Xiaojing of the Beijing
               Realizer Law Firm as the legal adviser to this website. Anyone
@@ -94,12 +104,18 @@
               website violate your copyrights, please contact our lawyer within
               two weeks.
             </p>
-            <p>The Capital Museum</p>
+            <p tabindex="0">The Capital Museum</p>
           </div>
         </div>
       </div>
     </div>
-    <div class="back_btn" @click="$router.go(-1)">Back to top</div>
+    <a
+      class="back_btn"
+      href="#"
+      tabindex="0"
+    >
+      Back to top
+    </a>
   </div>
 </template>
 

web/src/views/layout/index.vue

@@ -4,40 +4,57 @@
     <div class="aria-control-target">
       <!-- 公共头部 -->
       <div class="topNav">
-        <div class="mainbav_wrap">
+        <div class="main_nav_wrap">
           <h1 class="logo">
             <img src="@/assets/images/logo.png" alt="" />
           </h1>
           <ul
-            class="mainbav" tabindex="0" data-aria-navigation-area
+            class="main_nav" tabindex="0" data-aria-navigation-area
             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)"
+              @keydown.enter.passive="skipOne(item.url)"
               :class="{ active: $route.meta.myName === item.name }"
               v-for="item in topData"
               :key="item.id"
+              tabindex="0"
+              aria-label="Link"
+              :aria-description="item.name"
             >
               <span>{{ item.name }}</span>
-              <ul class="mainbav_sub">
+              <ul class="main_nav_sub">
                 <li
                   :class="{ active2: menaInd === val.url }"
                   v-for="(val, index) in item.children"
                   :key="index"
                   @click.stop="skipTow(val.url, item.about)"
+                  @keydown.enter.passive.stop="skipTow(val.url, item.about)"
+                  tabindex="0"
+                  aria-label="Link"
+                  :aria-description="val.name"
                 >
-                  {{ val.name }}
+                  <span>{{ val.name}}</span>
                 </li>
               </ul>
             </li>
             <!-- 中文网 -->
             <li class="language">
-              <a href="http://www.capitalmuseum.org.cn/" target="_blank">中文</a>
+              <a href="http://www.capitalmuseum.org.cn/" target="_blank"
+                tabindex="0"
+                aria-description="中文网站"
+              >
+                中文
+              </a>
             </li>
             <!-- 爱心模式 -->
             <li class="love">
               <span>Caring Mode</span>&nbsp;
-              <el-switch v-model="loveFlag" active-color="#AB3434"> </el-switch>
+              <el-switch v-model="loveFlag" active-color="#AB3434"
+                tabindex="0"
+                aria-label="Button"
+                aria-description="Caring Mode"
+              />
             </li>
           </ul>
         </div>
@@ -52,6 +69,8 @@
             placeholder="search..."
             suffix-icon="el-icon-search"
             v-model="searchTxt"
+            tabindex="0"
+            aria-description="search"
           >
           </el-input>
           <div class="btnn" @click="search"></div>
@@ -64,15 +83,20 @@
         class="footer" data-aria-viewport-area tabindex="0"
         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
-            @click="footTo(item.path)"
-            v-for="item in footerData"
-            :key="item.name"
-            v-html="item.name"
-          ></span>
+        <div tabindex="-1">
+          <template v-for="item in footerData">
+            |
+            <router-link
+              class="router-link"
+              :to="item.path"
+              :key="item.name"
+              v-html="item.name"
+              tabindex="0"
+              :aria-describedat="item.name"
+            />
+          </template>
         </div>
-        <p>
+        <p tabindex="0">
           Capital Museum. China 16 Fuxingmenwai Street, Xicheng District, Beijing
           100045, P.R.China.
         </p>
@@ -82,15 +106,27 @@
         class="rightNav" data-aria-viewport-area tabindex="0"
         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">
+        <ul class="rightIco" tabindex="-1">
           <li title="game">
-            <img src="@/assets/images/game.png" alt="" />
+            <a
+              href=""
+              tabindex="0"
+              aria-description="shadow art game"
+            >
+              <img src="@/assets/images/game.png" alt="" />
+            </a>
           </li>
           <li>
-            <img src="@/assets/images/code.png" alt="" />
+            <img src="@/assets/images/code.png" alt="" tabindex="0"/>
             <div>
-              <img src="@/assets/images/index_ewm1.png" alt="" />
-              <img src="@/assets/images/index_ewm.jpg" alt="" />
+              <img src="@/assets/images/index_ewm1.png" alt="" 
+                tabindex="0"
+                aria-description=""
+              />
+              <img src="@/assets/images/index_ewm.jpg" alt=""
+                tabindex="0"
+                aria-description=""
+              />
             </div>
           </li>
         </ul>
@@ -115,10 +151,10 @@ export default {
       loveFlag: false,
       searchTxt: "",
       footerData: [
-        { name: "|&emsp; Site Index", path: "/Layout/Index" },
-        { name: "|&emsp; Terms of Use", path: "/Layout/Use" },
-        { name: "|&emsp; Events", path: "/Layout/Events" },
-        { name: "|&emsp; Employment", path: "/Layout/Employment" },
+        { name: "Site Index", path: "/Layout/Index" },
+        { name: "Terms of Use", path: "/Layout/Use" },
+        { name: "Events", path: "/Layout/Events" },
+        { name: "Employment", path: "/Layout/Employment" },
       ],
       // 控制二级菜单的高亮
       menaInd: null,
@@ -161,10 +197,6 @@ export default {
         params: {txt:this.searchTxt},
       });
     },
-    // 底部的跳转
-    footTo(path) {
-      this.$router.push(path).catch(() => {});
-    },
     // 第一级的跳转
     skipOne(url) {
       this.$router.push("/Layout/" + url).catch(() => {});
@@ -207,8 +239,8 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 990;
-  .mainbav_wrap {
+  z-index: 4;
+  .main_nav_wrap {
     width: 1300px;
     margin: 0 auto;
     & > h1 {
@@ -220,7 +252,7 @@ export default {
         vertical-align: top;
       }
     }
-    .mainbav {
+    .main_nav {
       font-size: 14px;
       color: #fff;
       line-height: 60px;
@@ -235,19 +267,18 @@ export default {
         display: inline;
         margin-right: 25px;
         position: relative;
-        &:hover {
+        &:hover, &:focus-within {
           & > span {
             border-bottom: 2px solid #ca000a;
           }
-          .mainbav_sub {
+          .main_nav_sub {
             display: block;
           }
         }
-        .mainbav_sub {
+        .main_nav_sub {
           display: none;
           position: absolute;
-
-          & > li {
+          span {
             border-left: 2px solid #660005;
             font-size: 14px;
             color: #fff;
@@ -350,7 +381,7 @@ export default {
           float: left;
         }
       }
-      &:hover {
+      &:hover, &:focus-within {
         background-color: #c20e11;
         & > div {
           display: block;
@@ -369,10 +400,11 @@ export default {
   color: #fff;
   line-height: 45px;
   background: url(../../assets/images/footer_bg.png) center top;
-  & > div {
-    & > span {
-      cursor: pointer;
-      margin-right: 15px;
+  div {
+    .router-link {
+      color: inherit;
+      margin-right: 10px;
+      margin-left: 10px;
     }
   }
 }