无障碍：查缺补漏

web/src/views/Exhibitions/info.vue

@@ -1,22 +1,68 @@
 <template>
   <div class="ExhibitionsInfo">
+    <!-- 滚动 -->
+    <ul class="navBarItem" :class="{ gunShow: gunShow }">
+      <li :class="{ cur: gunInd === 1 }"
+        @click="cutGun(1)"
+        @keydown.enter.passive="cutGun(1)"
+        tabindex="0"
+        aria-label="Link"
+      >
+        <span></span> Exhibition Overview
+      </li>
+      <li :class="{ cur: gunInd === 2 }"
+        @click="cutGun(2)"
+        @keydown.enter.passive="cutGun(2)"
+        tabindex="0"
+        aria-label="Link"
+      >
+        <span></span> Exhibition Objects
+      </li>
+      <li :class="{ cur: gunInd === 3 }"
+        @click="cutGun(3)"
+        @keydown.enter.passive="cutGun(3)"
+        tabindex="0"
+        aria-label="Link"
+      >
+        <span></span> Exhibition Galleries
+      </li>
+    </ul>
     <div class="topImg" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the banner area of the tertiary exhibition page; this area has one image; please use the tab key to go through the content."
     >
       <img
         :src="`/data/Exhibitions/${dataUrl}/infoTop${data.topImg}.jpg`"
-        alt=""
+        alt="tertiary exhibition"
+        tabindex="0"
+        aria-description="tertiary exhibition"
       />
     </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>
-        <Router-link to="/Layout/Exhibitions/1">Exhibitions></Router-link>
-        <i @click="backExh(topTxt)">{{ topTxt }} Exhibitions></i>
+      <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/Exhibitions/1"
+          tabindex="0"
+          aria-description="Exhibitions"
+        >
+          Exhibitions>
+        </Router-link>
+        <i
+          @click="backExh(topTxt)"
+          @keydown.enter.passive="backExh(topTxt)"
+          tabindex="0"
+          :aria-description="`${topTxt} Exhibitions`"
+        >
+          {{ topTxt }} Exhibitions>
+        </i>
       </div>
     </div>
     <!-- 内容-->
@@ -26,28 +72,34 @@
         <div class="title_area" data-aria-viewport-area tabindex="0"
           aria-label aria-description="You've reached the section of exhibition title, please use the tab key to navigate through the content."
         >
-          <div class="title_2">{{ data.title }}</div>
-          <div class="info">
-            <span class="info_1">{{ data.date }}</span>
-            <span class="info_2">{{ data.time }}</span>
-            <span class="info_3">{{ data.loc }}</span>
+          <div class="title_2" tabindex="0">{{ data.title }}</div>
+          <div class="info" tabindex="-1">
+            <span class="info_1" tabindex="0">{{ data.date }}</span>
+            <span class="info_2" tabindex="0">{{ data.time }}</span>
+            <span class="info_3" tabindex="0">{{ data.loc }}</span>
           </div>
         </div>
         <div class="content_2" data-aria-viewport-area tabindex="0"
           aria-label aria-description="You've reached the section of exhibition overview, please use the tab key to go through the content."
         >
-          <div class="title_3">——<span>Exhibition Overview</span>——</div>
+          <div class="title_3" tabindex="0">——<span>Exhibition Overview</span>——</div>
           <div
             v-show="index === pageInd"
             v-for="(item, index) in data.page"
             :key="index"
+            tabindex="-1"
           >
-            <p class="one" v-html="item.tit"></p>
-            <div class="fuTxt" v-html="item.article"></div>
+            <p class="one" v-html="item.tit" tabindex="0"></p>
+            <div class="fuTxt" v-html="item.article" tabindex="0"></div>
           </div>
           <!-- 分页 -->
-          <div class="paging">
-            <span v-show="pageInd !== 0" @click="pageCut(pageInd - 1)">
+          <div class="paging" tabindex="-1">
+            <span v-show="pageInd !== 0"
+              @click="pageCut(pageInd - 1)"
+              @keydown.enter.passive="pageCut(pageInd - 1)"
+              aria-label="Link"
+              aria-description="Previous page"
+            >
               &lt;
             </span>
             <span
@@ -55,12 +107,18 @@
               v-for="(item, index) in data.page"
               :key="index"
               @click="pageCut(index)"
-              >{{ index + 1 }}</span
+              @keydown.enter.passive="pageCut(index)"
+              aria-label="Link"
             >
+              {{ index + 1 }}
+            </span>
             <span
               v-if="data.page"
               v-show="pageInd !== data.page.length - 1"
               @click="pageCut(pageInd + 1)"
+              @keydown.enter.passive="pageCut(pageInd + 1)"
+              aria-label="Link"
+              aria-description="Next page"
             >
               &gt;
             </span>
@@ -71,10 +129,12 @@
       <div class="picpart" ref="Objects" v-if="data.objects !== 0" data-aria-viewport-area tabindex="0"
         aria-label aria-description="You've reached the section of exhibition objects, please use the tab key to go through the content."
       >
-        <div class="title_3">——<span>Exhibition Objects</span>——</div>
+        <div class="title_3" tabindex="0">——<span>Exhibition Objects</span>——</div>
         <!-- 图片 -->
-        <div class="row" :class="{ show: showObjects }">
-          <div class="rowOne" :title="i" v-for="i in data.objects" :key="i">
+        <div class="row" :class="{ show: showObjects }" tabindex="-1">
+          <div class="rowOne" :title="i" v-for="i in data.objects" :key="i"
+            tabindex="0" aria-label="" aria-description=""
+          >
             <img
               :src="`/data/Exhibitions/${dataUrl}/objects${data.topImg}/objects${i}${data.imgLast}`"
             />
@@ -84,18 +144,32 @@
                 class="el-icon-download"
                 :href="`/data/Exhibitions/${dataUrl}/objects${data.topImg}/big${i}.png`"
                 download
-                ><i> Download</i></a
+                tabindex="0"
               >
-              <span class="el-icon-search" @click="imgBig(i)"
-                ><i> Enlarge</i></span
+                <i> Download</i>
+              </a>
+              <span class="el-icon-search"
+                @click="imgBig(i)"
+                @keydown.enter.passive="imgBig(i)"
+                tabindex="0"
+                aria-label="Button"
               >
+                <i>
+                  Enlarge
+                </i>
+              </span>
             </div>
           </div>
         </div>
-        <div class="more">
-          <span @click="showObjects = !showObjects">{{
-            showObjects ? "Hide" : "See More"
-          }}</span>
+        <div class="more" tabindex="-1">
+          <span
+            @click="showObjects = !showObjects"
+            @keydown.enter.passive="showObjects = !showObjects"
+            tabindex="0"
+            aria-label="Button"
+          >
+            {{showObjects ? "Hide" : "See More"}}
+          </span>
         </div>
       </div>
       <!-- Exhibition Galleries -->
@@ -107,44 +181,45 @@
         aria-label aria-description="You've reached the section of exhibition galleries, please use the tab key to go through the content."
         v-if="data.galleries !== 0"
       >
-        <div class="title_3">——<span>Exhibition Galleries</span>——</div>
+        <div class="title_3" tabindex="0">——<span>Exhibition Galleries</span>——</div>
         <!-- 图片 -->
-        <div class="box" :class="{ show: showGalleries }">
+        <div class="box" :class="{ show: showGalleries }" tabindex="-1">
           <img
             :title="i"
             :src="`/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`"
             alt=""
             v-for="i in data.galleries"
             :key="i"
+            tabindex="0"
+            aria-description=""
           />
         </div>
-        <div class="more" v-show="data.galleries>3">
-          <span @click="showGalleries = !showGalleries">{{
-            showGalleries ? "Hide" : "See More"
-          }}</span>
+        <div class="more" v-show="data.galleries>3" tabindex="-1">
+          <span
+            @click="showGalleries = !showGalleries"
+            @keydown.enter.passive="showGalleries = !showGalleries"
+            tabindex="0"
+            aria-label="Button"
+          >
+            {{showGalleries ? "Hide" : "See More"}}
+          </span>
         </div>
       </div>
     </div>
     <!-- 回到顶部 -->
-    <div class="back_btn" @click="backExh(topTxt)">Back to top</div>
+    <button class="back_btn"
+      @click="backTop"
+      @keydown.enter.passive="backTop"
+      tabindex="0"
+    >
+      Back to top
+    </button>
     <!-- 点击预览大图 -->
     <ElImageViewer
       v-if="viewImgDialog"
       :on-close="closeViewer"
       :url-list="srcList"
     />
-    <!-- 滚动 -->
-    <ul class="navBarItem" :class="{ gunShow: gunShow }">
-      <li :class="{ cur: gunInd === 1 }" @click="cutGun(1)">
-        <span></span> Exhibition Overview
-      </li>
-      <li :class="{ cur: gunInd === 2 }" @click="cutGun(2)">
-        <span></span> Exhibition Objects
-      </li>
-      <li :class="{ cur: gunInd === 3 }" @click="cutGun(3)">
-        <span></span> Exhibition Galleries
-      </li>
-    </ul>
   </div>
 </template>
 
@@ -229,6 +304,11 @@ export default {
       let body = document.querySelector("body");
       body.style.overflow = "auto";
     },
+    // 返回顶部
+    backTop() {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      document.activeElement.blur()
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -471,7 +551,7 @@ export default {
               font-size: 18px;
             }
           }
-          &:hover {
+          &:hover, &:focus-within {
             .mask {
               display: block;
             }

web/src/views/bottom/Employment.vue

@@ -143,13 +143,14 @@
         </div>
       </div>
     </div>
-    <a
-      class="back_btn"
-      href="#"
+    <!-- 回到顶部 -->
+    <button class="back_btn"
+      @click="backTop"
+      @keydown.enter.passive="backTop"
       tabindex="0"
     >
       Back to top
-    </a>
+    </button>
   </div>
 </template>
 
@@ -166,7 +167,13 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    // 返回顶部
+    backTop() {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      document.activeElement.blur()
+    }
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）

web/src/views/bottom/Use.vue

@@ -109,13 +109,14 @@
         </div>
       </div>
     </div>
-    <a
-      class="back_btn"
-      href="#"
+    <!-- 回到顶部 -->
+    <button class="back_btn"
+      @click="backTop"
+      @keydown.enter.passive="backTop"
       tabindex="0"
     >
       Back to top
-    </a>
+    </button>
   </div>
 </template>
 
@@ -132,7 +133,13 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    // 返回顶部
+    backTop() {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+      document.activeElement.blur()
+    }
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）