无障碍：visit-reservation键盘访问

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/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 />