无障碍：About页键盘访问

web/src/views/About/Director.vue

@@ -1,32 +1,52 @@
 <!--  -->
 <template>
   <div class="Director">
-    <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 From the Director page; this area has one image; please use the tab key to go through the content."
-    ></div>
+    >
+      <div
+        class="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="From the Director"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area; this area has two 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/About">About></Router-link>
+      <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/About"
+        tabindex="0"
+        aria-description="About"
+      >
+        About>
+      </Router-link>
     </div>
     <div class="conten" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the content area of the From the Director page, please use the tab key to navigate through the content."
     >
-      <h1 class="webTitle">From the Director</h1>
-      <div class="peopleBox">
-        <h2>——<span>Leadership</span>——</h2>
+      <h1 class="webTitle" tabindex="0">From the Director</h1>
+      <div class="peopleBox" tabindex="-1">
+        <h2 tabindex="0">——<span>Leadership</span>——</h2>
         <ul>
           <li>
-            <img src="/data/About/ren.jpg" />
-            <strong>Han Zhanming</strong>
-            <p>Director of Capital Museum</p>
+            <img src="/data/About/ren.jpg" tabindex="0"
+              aria-description="Han Zhanming"
+            />
+            <strong tabindex="0">Han Zhanming</strong>
+            <p tabindex="0">Director of Capital Museum</p>
           </li>
         </ul>
       </div>
-      <div class="contentBox">
-        <p>
+      <div class="contentBox" tabindex="-1">
+        <p tabindex="0">
           The Capital Museum of China is a comprehensive museum affiliated with
           the municipal government of Beijing. It is committed to displaying
           Beijing's 500,000 years of history of human settlement, 3,000 years of
@@ -37,7 +57,7 @@
           site of cultural exchange between the new Beijing and the larger
           world.
         </p>
-        <p>
+        <p tabindex="0">
           In the Capital Museum's eleven core exhibition rooms lie collections
           of cultural relics comprising more than one million tangible and
           documentary artifacts, including numerous exquisite works of art and
@@ -45,7 +65,7 @@
           collective evidences of the robust creativity and lasting vitality of
           the great and ancient nation of China.
         </p>
-        <p>
+        <p tabindex="0">
           The three temporary exhibition rooms of the Capital Museum are often
           used to house first-class exhibits from around China and the world.
           These exhibitions epitomize the city of Beijing's readiness to embrace
@@ -53,7 +73,7 @@
           time, they reflect both the uniformity and the diversity of humanity's
           historical and cultural development.
         </p>
-        <p>
+        <p tabindex="0">
           Friends from home and abroad, we invite you all to visit the website
           of the Capital Museum and get to know Beijing and China a little
           better. You are also welcome to visit the Capital Museum to see into
@@ -61,7 +81,14 @@
           yourself a little better as well.
         </p>
       </div>
-      <div class="back_btn" @click="$router.push('/Layout/About')">Back</div>
+      <div class="back_btn"
+        @click="$router.push('/Layout/About')"
+        @keydown.enter.passive="$router.push('/Layout/About')"
+        tabindex="0"
+        aria-label="Link"
+      >
+        Back
+      </div>
     </div>
   </div>
 </template>

web/src/views/About/index.vue

@@ -1,22 +1,39 @@
 <!--  -->
 <template>
   <div class="About">
-    <div class="ban" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the banner area of the About page; this page has one image; please use the tab key to go through the content."
-    ></div>
+    <div class="banWrapper"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the banner area of the About page; this page has one image; please use the tab key to go through the content."
+    >
+      <div class="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="About"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area; this area has two 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/About">About></Router-link>
+      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home"
+        aria-description="Home"
+      >
+        Home>
+      </Router-link>
+      <Router-link to="/Layout/About"
+        aria-description="About"
+      >
+        About>
+      </Router-link>
     </div>
     <div class="director" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the From the Director section, please use the tab key to navigate through the content."
     >
-      <div>
-        <p>Welcome to the website of the Capital Museum of China.</p>
-        <p>
+      <div tabindex="-1">
+        <p tabindex="0">Welcome to the website of the Capital Museum of China.</p>
+        <p tabindex="0">
           We are looking forward to your visit. The Capital Museum is a palace
           of Beijing culture. Its collections relate to the long development of
           the capital city, showcasing its magnificent living history of 500,000
@@ -26,7 +43,7 @@
           various ethnic groups at home and abroad. You can feel the breadth of
           both Chinese and world civilizations.
         </p>
-        <p>
+        <p tabindex="0">
           Historical culture is the soul of a city and in the case of Beijing it
           is a great witness to the long history of Chinese civilization. We are
           looking forward to welcoming you to share with us the full
@@ -34,55 +51,68 @@
           in the great wisdom of Beijing.<br />
         </p>
       </div>
-      <p class="more" @click="$router.push('/Layout/About/Director')">
+      <p
+        class="more"
+        @click="$router.push('/Layout/About/Director')"
+        @keydown.enter.passive="$router.push('/Layout/About/Director')"
+        tabindex="0"
+        aria-label="Link"
+      >
         Read More
       </p>
     </div>
     <div class="history" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the History section, please use the tab key to go through the content."
     >
-      <div>
-        <p>
+      <div tabindex="-1">
+        <p tabindex="0">
           <span
             style="font-family: arial, helvetica, sans-serif; font-size: 14px"
-            >The Capital Museum, located in the Confucius Temple, was prepared
-            in 1953 and formally opened in 1981.</span
           >
+            The Capital Museum, located in the Confucius Temple, was prepared
+            in 1953 and formally opened in 1981.
+          </span>
         </p>
         <p><br /></p>
-        <p>
+        <p tabindex="0">
           <span
             style="font-family: arial, helvetica, sans-serif; font-size: 14px"
-            >As a major cultural construction project in Beijing in the "10th
+          >
+            As a major cultural construction project in Beijing in the "10th
             Five-Year Plan", the new complex of the Capital Museum, approved by
             the Beijing Municipal Government in 1999, further approved by the
             State Council after being submitted by the National Development and
             Reform Commission in 2001, commenced its construction in December
-            2001.</span
-          >
+            2001.
+          </span>
         </p>
         <p><br /></p>
-        <p>
+        <p tabindex="0">
           <span
             style="font-family: arial, helvetica, sans-serif; font-size: 14px"
-            >The new Capital Museum had the trial operation in December 2005 and
+          >
+            The new Capital Museum had the trial operation in December 2005 and
             was officially opened on May 18, 2006. With its magnificent
             architecture, abundant exhibitions, advanced technology and complete
             functions, the Capital Museum contributes to Beijing's standing as a
             famous historical and cultural city, a cultural centre and an
             international metropolis and ranks among the first class museums
             both at home and abroad and is regarded as one of the first "State
-            First-class Museums" in 2008.</span
-          >
+            First-class Museums" in 2008.
+          </span>
         </p>
       </div>
     </div>
     <div class="partner" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the Patrners & Connections section, please use the tab key to go through the information."
     >
-      <ul>
+      <ul tabindex="-1">
         <li v-for="(item, index) in link" :key="index">
-          <a :href="item.name" target="_blank" :title="item.pop">
+          <a :href="item.name" target="_blank" :title="item.pop"
+            tabindex="0"
+            aria-label="Image link"
+            :aria-description="item.pop"
+          >
             <span
               :style="`background-image: url(/data/About/link${index + 1}.jpg)`"
             ></span>
@@ -95,24 +125,31 @@
         src="/data/About/a7.gif"
         alt=""
         @click="$router.push('/Layout/About/link')"
+        @keydown.enter.passive="$router.push('/Layout/About/link')"
+        tabindex="0"
+        aria-label="Link"
+        aria-description="See More"
       />
     </div>
     <div class="contact" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the Contact section, please use the tab key to go through the information."
     >
-      <p>Official website of Capital Museum: <a :href="$homePageUrl">{{$homePageUrl}}</a></p>
-      <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>
+        <span tabindex="0">+86 (10) 63393339</span>
       </p>
-      <p>
-        Telephone reservation (group visitors): <span>+86 (10) 63370458</span>
+      <p tabindex="0">
+        Telephone reservation (group visitors): <span tabindex="0">+86 (10) 63370458</span>
       </p>
-      <p>Inquiry Hotline: <span>+86 (10) 63370491</span></p>
-      <p>
+      <p tabindex="0">Inquiry Hotline: <span tabindex="0">+86 (10) 63370491</span></p>
+      <p tabindex="-1">
         <a href="mailto:ICD@capitalmuseum.org.cn"
-          ><img src="/data/About/youxiang.jpg"
-        /></a>
+          tabindex="0"
+          aria-description="Email Us"
+        >
+          <img src="/data/About/youxiang.jpg"/>
+        </a>
       </p>
     </div>
   </div>
@@ -249,6 +286,7 @@ export default {
         position: relative;
         background: url("/data/About/a2.gif") no-repeat 0 0;
         a {
+          height: 100%;
           display: block;
         }
         span {

web/src/views/About/link.vue

@@ -1,25 +1,54 @@
 <!--  -->
 <template>
   <div class="AboutLink">
-    <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 Partners & Connections page; this page has one image; please use the tab key to go through the content."
-    ></div>
+    >
+      <div class="ban"
+        tabindex="0"
+        aria-label="Image"
+        aria-description="Partners & Connections"
+      ></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; 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/About">About></Router-link>
+      <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/About"
+        tabindex="0"
+        aria-description="About"
+      >
+        About>
+      </Router-link>
     </div>
     <div class="list-area" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the list of Partners & Connections, please use the tab key to navigate through the list."
     >
-      <div class="lmname"></div>
-      <div class="wrap" :class="{wrap2:item.bac}" v-for="(item,index) in data" :key="index">
+      <div
+        class="lmname"
+        tabindex="0"
+        aria-label="Text"
+        aria-description="Partners & Connections"
+      ></div>
+      <div class="wrap" :class="{wrap2:item.bac}" v-for="(item,index) in data" :key="index" tabindex="-1">
         <div class="box">
-          <h2 :title="item.title">{{item.title}}</h2>
+          <h2 :title="item.title" tabindex="0">{{item.title}}</h2>
           <div class="row" v-for="val in item.son" :key="val.img" :title="val.pop">
-            <a :href="val.url" target="_blank">
+            <a 
+              :href="val.url"
+              target="_blank" 
+              tabindex="0"
+              aria-label="Image link"
+              :aria-description="val.pop"
+            >
               <span
                 :style="`background-image: url(/data/About/link/${val.img}.jpg)`"
               ></span>
@@ -31,7 +60,11 @@
     <div class="join" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the Join us section of the Partners & COnnections page, please use the tab key to navigate through the content."
     >
-      <img src="/data/About/botTxt.gif" alt="">
+      <img src="/data/About/botTxt.gif" alt=""
+        tabindex="0"
+        aria-label="Text"
+        aria-description="Join US Telephone +86(10)63393339 E-mail ICD@capitalmuseum.org.cn"
+      >
     </div>
   </div>
 </template>
@@ -165,6 +198,7 @@ export default {
         margin: 0 10px 20px 0;
         position: relative;
         a {
+          height: 100%;
           display: block;
         }
         span {