Visit栏剩下页面的键盘访问功能

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>