无障碍：自测bug修复

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

@@ -62,6 +62,7 @@
         <div class="right">
           <img
             @click="cut = false"
+            @keydown.enter.passive="cut = false"
             :src="
               require(`@/assets/images/Exhibitions/${
                 cut ? 'cut1' : 'cut1Ac'
@@ -74,6 +75,7 @@
           />
           <img
             @click="cut = true"
+            @keydown.enter.passive="cut = true"
             :src="
               require(`@/assets/images/Exhibitions/${
                 cut ? 'cut2Ac' : 'cut2'
@@ -100,11 +102,20 @@
           >
             <img :src="item.cover" :alt="item.h3"
               tabindex="0"
+              aria-label="Image link"
               :aria-description="item.h3"
             />
             <div class="txt">
-              <h3 tabindex="0">{{ item.h3 }}</h3>
-              <p tabindex="0">{{ item.p }}</p>
+              <h3 tabindex="0"
+                aria-label="Link"
+              >
+                {{ item.h3 }}
+              </h3>
+              <p tabindex="0"
+                aria-label="Link"
+              >
+                {{ item.p }}
+              </p>
               <span tabindex="0">{{ item.yrahTxt }}</span>
             </div>
           </div>

web/src/views/Exhibitions/info.vue

@@ -262,7 +262,7 @@ export default {
     // 监听滚动
     window.onscroll = () => {
       // console.log(window.scrollY, window.pageYOffset)
-      if (scrollY > 400) this.gunShow = true;
+      if (scrollY > 400 - 105) this.gunShow = true; // 105是无障碍菜单栏的高度
       else this.gunShow = false;
       // 切换固定滚动的高亮状态
       // let Overview = this.$refs.Overview;
@@ -549,7 +549,7 @@ export default {
   }
   .gunShow {
     position: fixed;
-    top: 0;
+    top: 105px;
   }
 }
 </style>

web/src/views/Visit/Visit1.vue

@@ -3,7 +3,10 @@
   aria-label aria-description="You have reached the content area of the Hours, Directions, and Admission page. This area contains one image. To browse the content, please use the tab key."
 >
   <div class="box1">
-    <img src="../../assets/images/Visit/Visit1.jpg" alt="">
+    <img src="../../assets/images/Visit/Visit1.jpg" alt=""
+      aria-label="Image"
+      aria-description="Café & Shop"
+    >
   </div>
 </div>
 </template>

web/src/views/Visit/Visit5.vue

@@ -46,7 +46,7 @@
         </div>
         <div>
           <img src="../../assets/images/Visit/access3.jpg" alt="Lockers"
-            aria-description="Lockers"
+            tabindex="0" aria-description="Lockers"
           >
         </div>
       </div>

web/src/views/layout/index.vue

@@ -39,7 +39,10 @@
               </ul>
             </li>
             <!-- 中文网 -->
-            <li class="language">
+            <li class="language"
+              tabindex="0"
+              aria-description="EN"
+            >
               <a href="http://www.capitalmuseum.org.cn/" target="_blank"
                 tabindex="0"
                 aria-description="中文网站"
@@ -49,8 +52,16 @@
             </li>
             <!-- 爱心模式 -->
             <li class="love">
-              <span>Caring Mode</span>&nbsp;
+              <label for="caring-mode-switch"
+                tabindex="0"
+                aria-label="Button"
+                aria-description="Caring Mode"
+              >
+                Caring Mode
+              </label>
+              &nbsp;
               <el-switch v-model="loveFlag" active-color="#AB3434"
+                id="caring-mode-switch"
                 tabindex="0"
                 aria-label="Button"
                 aria-description="Caring Mode"
@@ -203,6 +214,7 @@ export default {
     },
     // 第二级的跳转
     skipTow(url, about) {
+      document.activeElement.blur()
       // 如果是about页面
       if (about === true) {
         this.$router.push("/Layout/About").catch(() => {});
@@ -303,10 +315,12 @@ export default {
       .language {
         background: url("../../assets/images/dh1.png") no-repeat 0 18px;
         width: 73px;
-        text-indent: 41px;
+        text-indent: 20px;
         & > a {
           color: #fff;
           text-decoration: none;
+          display: inline-block;
+          height: 100%;
           &:hover {
             border-bottom: 2px solid #ca000a;
           }
@@ -314,8 +328,12 @@ export default {
       }
       .love {
         margin-right: 0;
+        cursor: default;
+        label {
+          cursor: pointer;
+        }
         &:hover {
-          & > span {
+          & > label {
             border-bottom: none;
           }
         }