无障碍：Collections页键盘访问

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(() => {
@@ -135,7 +167,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .CollectionsInfo {
-  z-index: 991;
+  z-index: 4;
   position: fixed;
   top: 0;
   left: 0;

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

@@ -2,7 +2,7 @@
 <template>
   <div class="Exhibitions">
     <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.`"
+      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>
@@ -32,9 +32,21 @@
       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" tabindex="0">Your Position:&nbsp;</span>
-      <Router-link to="/Layout/Home" tabindex="0">Home></Router-link>
-      <Router-link to="/Layout/Exhibitions/1" tabindex="0">Exhibitions></Router-link>
-      <Router-link to="">{{ topLi[topId - 1].name }}></Router-link>
+      <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="" />