无障碍：最底部栏目相关页面的键盘访问

web/src/views/About/index.vue

@@ -17,12 +17,16 @@
       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" tabindex="0">Your Position:&nbsp;</span>
-      <Router-link to="/Layout/Home"
+      <Router-link
+        to="/Layout/Home"
+        tabindex="0"
         aria-description="Home"
       >
         Home>
       </Router-link>
-      <Router-link to="/Layout/About"
+      <Router-link
+        to="/Layout/About"
+        tabindex="0"
         aria-description="About"
       >
         About>

web/src/views/Events/index.vue

@@ -1,29 +1,62 @@
 <!--  -->
 <template>
   <div class="Events">
-    <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 Events 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="Events"
+      ></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/Events">Events></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/Events"
+        tabindex="0"
+        aria-description="Events"
+      >
+        Events>
+      </Router-link>
     </div>
     <div class="conten" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the content area of the Events page, please use the tab key to navigate through the content."
     >
-      <h1 class="cTitle">EVENTS</h1>
+      <h1 class="cTitle" tabindex="0">EVENTS</h1>
       <ul>
-        <li v-for="(item, index) in data" :key="index" @click="skip(item.id)">
-          <img :src="`/data/About/Events/${index + 1}.jpg`" alt="" />
+        <li
+          v-for="(item, index) in data"
+          :key="index"
+          @click="skip(item.id)"
+          @keydown.enter.passive="skip(item.id)"
+        >
+          <img :src="`/data/About/Events/${index + 1}.jpg`" :alt="item.h3"
+            tabindex="0"
+            aria-label="Image link"
+            :aria-description="item.h3"
+          />
           <div class="item">
-            <h2 v-html="item.h3"></h2>
+            <h2 v-html="item.h3" tabindex="0"></h2>
             <div class="s">
-              <p @click.stop="skip(val.path)"  v-for="(val,index) in item.txt" :key="index">{{val.name}}</p>
+              <p
+                v-for="(val,index) in item.txt" :key="index"
+                @click.stop="skip(val.path)"
+                @keydown.enter.passive.stop="skip(val.path)"
+                tabindex="0"
+                aria-label="Link"
+              >
+                {{val.name}}
+              </p>
             </div>
-            <i class="d">Date:{{ item.i }}</i>
+            <i class="d" tabindex="0">Date:{{ item.i }}</i>
           </div>
         </li>
       </ul>
@@ -61,6 +94,7 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.$eventBus.$emit('request-read', `You've reached the Events page. This page contains one navigation section, five window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
+
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

web/src/views/Events/info.vue

@@ -1,12 +1,12 @@
 <!--  -->
 <template>
   <div class="EventsInfo">
-    <!-- 回到顶部 -->
-    <div class="topBtn" @click="toTop">
-      <img src="/data/About/Events/toTop.jpg" alt="" />
-    </div>
     <div class="conten">
-      <img class="topBan" :src="`/data/About/Events/${imgInd}Ac.jpg`" alt="" />
+      <img class="topBan" :src="`/data/About/Events/${imgInd}Ac.jpg`"
+        :alt="info.h3"
+        tabindex="0"
+        :aria-description="info.h3"
+      />
       <div class="main">
         <div
           class="pos"
@@ -14,9 +14,21 @@
           tabindex="0"
           aria-label="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
         >
-          <span>Your Position:&nbsp;</span>
-          <Router-link to="/Layout/Home">Home></Router-link>
-          <Router-link to="/Layout/Events">Events></Router-link>
+          <span tabindex="0">Your Position:&nbsp;</span>
+          <Router-link
+            to="/Layout/Home"
+            tabindex="0"
+            aria-description="Home"
+          >
+            Home>
+          </Router-link>
+          <Router-link
+            to="/Layout/Events"
+            tabindex="0"
+            aria-description="Events"
+          >
+            Events>
+          </Router-link>
         </div>
         <div
           class="mainContent"
@@ -24,39 +36,47 @@
           tabindex="0"
           aria-label="You've reached the content area of the Events sub-page, please use the tab key to go through the content."
         >
-          <div class="title">
+          <div class="title" tabindex="-1">
             <div class="left">
-              <h3 v-html="info.h3"></h3>
+              <h3 v-html="info.h3" tabindex="0"></h3>
               <div class="txt">
                 <p
                   @click="skip(val.path)"
+                  @keydown.enter.passive="skip(val.path)"
                   v-for="(val, index) in info.txt"
                   :key="index"
+                  tabindex="0"
+                  aria-label="Link"
                 >
                   {{ val.name }}
                 </p>
               </div>
             </div>
             <div class="right">
-              <div>Date:</div>
-              <p>{{ info.i }}</p>
+              <div tabindex="0">Date:</div>
+              <p tabindex="0">{{ info.i }}</p>
             </div>
           </div>
-          <div class="txtMain" v-html="info.main" v-if="info.main"></div>
+          <div class="txtMain" v-html="info.main" v-if="info.main" tabindex="-1"></div>
           <div
             class="txtMain"
             v-if="info.mainArr"
             v-html="info.mainArr[mainArr]"
+            tabindex="-1"
           ></div>
           <!-- 分页 -->
-          <div class="page" v-if="info.mainArr">
+          <div class="page" v-if="info.mainArr" tabindex="-1">
             <span
               @click="pageCut(i-1)"
+              @keydown.enter.passive="pageCut(i-1)"
               v-for="i in 5"
               :key="i"
               :class="{ active: i === mainArr + 1 }"
-              >{{ i }}</span
+              tabindex="0"
+              aria-label="Link"
             >
+              {{ i }}
+            </span>
           </div>
         </div>
       </div>
@@ -76,6 +96,10 @@
         </li>
       </ul>
     </div>
+    <!-- 回到顶部 -->
+    <div class="topBtn" @click="toTop">
+      <img src="/data/About/Events/toTop.jpg" alt="" />
+    </div>
   </div>
 </template>
 
@@ -162,6 +186,10 @@ export default {
       "request-read",
       `You've reached the sub-page of the Events page.This page contains one navigation section, four window sections, and one interactive section. To choose an section, please hit the shortcut key.`
     );
+    const txtMainList = document.getElementsByClassName('txtMain')
+    for (const iterator of txtMainList) {
+      this.$eventBus.$emit('request-process-text-element', iterator)
+    }
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

web/src/views/accessibility.vue

@@ -628,6 +628,7 @@ export default {
       }
     })
     this.$eventBus.$on('request-process-text-element', (rootElement) => {
+      console.log('无障碍组件收到request-process-text-element消息：', rootElement);
       const tagNameList = [
         'span', 'em', 'i', 'small', 'b', 'strong', 'del', 'q', 'sub',
         'div', 'pre', 'p', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',

web/src/views/bottom/Employment.vue

@@ -1,32 +1,43 @@
 <template>
   <div class="bottomEmployment">
-    <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 Employment 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="Employment"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area; this area has one link; 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>
+      <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>
       </div>
     </div>
     <div class="conten" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the content area of the Employment page, please use the tab key to navigate through the content."
     >
       <!-- Exhibition Overview -->
-      <div class="y_box">
-        <div class="title_2">
+      <div class="y_box" tabindex="-1">
+        <div class="title_2" tabindex="0">
           2017 Second-Half Public Recruitment Notice of the Capital Museum
         </div>
         <div class="info">
-          <span class="info_1">2018</span>
-          <span class="info_3">Capital Museum</span>
+          <span class="info_1" tabindex="0">2018</span>
+          <span class="info_3" tabindex="0">Capital Museum</span>
         </div>
         <div class="content_2">
-          <div class="title_3">——<span>Exhibition Overview</span>——</div>
+          <div class="title_3">——<span tabindex="0">Exhibition Overview</span>——</div>
           <div>
-            <p>
+            <p tabindex="0">
               In accordance with the regulations covering open recruitment of
               public institutions issued by the Beijing Municipal Human
               Resources and Social Security Bureau and the Beijing Municipal
@@ -34,7 +45,7 @@
               work demands of the Museum, 12 job vacancies have now become
               available. The details are as follows:
             </p>
-            <p>
+            <p tabindex="0">
               <span>ⅠRequirements: </span>
               1. Chinese nationality; support the leadership of the Communist
               Party of China <br />
@@ -47,14 +58,14 @@
               5. “35 and under” refers to people born after October 13, 1981;
               “40 and under” refers to people born after October 13, 1976.
             </p>
-            <p>
+            <p tabindex="0">
               <span>ⅡApplication and Eligibility Assessment </span>
               All applicants will have to undergo a through eligibility
               assessment on the spot. Please fill out and print the application
               form (Attachment 2) beforehand and take it with you to the
               assessment.
             </p>
-            <p>
+            <p tabindex="0">
               1. Time and Location of Assessment <br />
               September 26 to 27 <br />
               A.M. : 9:30—11:30 P.M. : 13:30—16:30 <br />
@@ -62,7 +73,7 @@
               (No. 171 Funei Street, Xicheng District. Please show your
               application form when entering.)
             </p>
-            <p>
+            <p tabindex="0">
               2. Materials to Be Submitted <br />
               1). Application form, ID card, details of household registration
               <br />
@@ -73,7 +84,7 @@
               <br />
               All materials above should be presented in the original.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅲ Admission Card</span>
               For candidates who pass the initial eligibility assessment, please
               collect your admission card at the Management Office of the White
@@ -81,7 +92,7 @@
               with assessment card, original ID card and a recent one-inch
               certified personal photo.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅳ Written Examination </span>
               The written examination will be conducted in the form of a
               comprehensive capacity test and organized by the Beijing Talent
@@ -89,25 +100,25 @@
               Cultural Heritage. <br />Time: 9:00—11:30 A.M. on October 14<br />Location：please
               refer to the admission card
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅴ Interview</span>
               One-fifth of candidates scoring over 60 will be interviewed. The
               list of interviewees will be uploaded onto the website of the
               Beijing Municipal Administration of Cultural Heritage 20 days
               after the written test.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅵ Total Score</span>The pass mark for the interview is 60.
               The total score will comprise of the written test (60%) and the
               interview score (40%).
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅶ Physical Examination </span>All the candidates who sored
               over 60 at the final stage will be subjected to a physical
               examination. This will be organized and conducted by the
               recruiting organization.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅷ Completion of Employment Formalities </span>Personnel to
               be recruited will be chosen from candidates who emerged as the
               best in the written exam and interview and qualified through the
@@ -116,7 +127,7 @@
               working days, after which we will inform chosen personnel to
               complete employment formalities.
             </p>
-            <p>
+            <p tabindex="0">
               <span>Ⅸ Notes </span>Eligibility assessment will be conducted
               throughout the entire recruitment process. At any stage, any
               candidates believed to have violated the recruitment regulations,
@@ -132,7 +143,13 @@
         </div>
       </div>
     </div>
-    <div class="back_btn" @click="$router.go(-1)">Back to top</div>
+    <a
+      class="back_btn"
+      href="#"
+      tabindex="0"
+    >
+      Back to top
+    </a>
   </div>
 </template>
 

web/src/views/bottom/Index.vue

@@ -2,11 +2,21 @@
   <div class="bottomIndex" data-aria-viewport-area tabindex="0"
     aria-label aria-description="You've reached the content area of the Site Index, please use the tab key to navigate through the content."
   >
-    <img src="/data/Index/1.jpg" alt="" />
-    <div class="home" title="Home">
-      <img src="/data/Index/home.jpg" alt="" @click="skip('/')" />
+    <img src="/data/Index/1.jpg" alt="" 
+      tabindex="0"
+      aria-label="Text"
+      aria-description="Site Index"
+    />
+    <div class="home" title="Home" tabindex="-1">
+      <img src="/data/Index/home.jpg" alt=""
+        @click="skip('/')"
+        @keydown.enter.passive="skip('/')"
+        tabindex="0"
+        aria-label="Text"
+        aria-description="Home"
+      />
     </div>
-    <div class="main">
+    <div class="main" tabindex="-1">
       <img src="/data/Index/main.jpg" alt="" />
       <!-- 定位的盒子 -->
       <div class="loc">
@@ -14,36 +24,48 @@
           <div
             :class="{ active: item.path !== '' }"
             @click="skip(item.path, item.sroll)"
+            @keydown.enter.passive="skip(item.path, item.sroll)"
             :title="item.title"
             v-for="(item, index) in data1"
             :key="index"
             :style="`width:${item.width};top:${item.top * 45}px;left:${
               item.left
             }`"
+            tabindex="0"
+            aria-label="Link"
+            aria-description="item.title"
           ></div>
         </div>
         <div class="tow">
           <div
             :class="{ active: item.path !== '' }"
             @click="skip(item.path, item.sroll)"
+            @keydown.enter.passive="skip(item.path, item.sroll)"
             :title="item.title"
             v-for="(item, index) in data2"
             :key="index"
             :style="`width:${item.width};top:${item.top * 45}px;left:${
               item.left
             }`"
+            tabindex="0"
+            aria-label="Link"
+            aria-description="item.title"
           ></div>
         </div>
         <div class="three">
           <div
             :class="{ active: item.path !== '' }"
             @click="skip(item.path, item.sroll)"
+            @keydown.enter.passive="skip(item.path, item.sroll)"
             :title="item.title"
             v-for="(item, index) in data3"
             :key="index"
             :style="`width:${item.width};top:${item.top * 45}px;left:${
               item.left
             }`"
+            tabindex="0"
+            aria-label="Link"
+            aria-description="item.title"
           ></div>
         </div>
       </div>

web/src/views/bottom/Use.vue

@@ -1,36 +1,46 @@
 <template>
   <div class="bottomUse">
-    <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 Term of use 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="Term of use"
+      ></div>
+    </div>
     <div class="pos" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the path area; this area has one link; 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>
+      <div tabindex="-1">
+        <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
+        <Router-link to="/Layout/Home"
+          aria-description="Home"
+        >
+          Home>
+        </Router-link>
       </div>
     </div>
     <div class="conten" data-aria-viewport-area tabindex="0"
       aria-label aria-description="You've reached the content area of the Terms of Use page, please use the tab key to navigate through the content."
     >
       <!-- Exhibition Overview -->
-      <div class="y_box">
-        <div class="title_2">Terms of Use</div>
+      <div class="y_box" tabindex="-1">
+        <div class="title_2" tabindex="0">Terms of Use</div>
         <div class="info">
-          <span class="info_1">2018</span>
-          <span class="info_3">Capital Museum</span>
+          <span class="info_1" tabindex="0">2018</span>
+          <span class="info_3" tabindex="0">Capital Museum</span>
         </div>
         <div class="content_2">
-          <div class="title_3">——<span>Exhibition Overview</span>——</div>
+          <div class="title_3">——<span tabindex="0">Exhibition Overview</span>——</div>
           <div>
-            <p>Legal Notice</p>
-            <p>
+            <p tabindex="0">Legal Notice</p>
+            <p tabindex="0">
               Welcome to www.capitalmuseum.org.cn (hereinafter referred to as
               "this website"). You are expected to comply with following terms
               while using this website:
             </p>
-            <p>
+            <p tabindex="0">
               Copyright of all contents on this website, including but not
               limited to the website design, texts, pictures, audio and video
               works, etc., belong to the Capital Museum and all the parties
@@ -41,32 +51,32 @@
               unauthorized use of this website and its contents for commercial
               purposes is also prohibited.
             </p>
-            <p>
+            <p tabindex="0">
               If you download materials you consider you need from this website
               for non-commercial use (except for information with copyrights and
               proprietary rights), please contact us for permission.
             </p>
-            <p>
+            <p tabindex="0">
               Any reprints and quotes of any copyrighted articles on this
               website should conform to following requirements:
             </p>
-            <p>
+            <p tabindex="0">
               (1) For non-commercial, non-profit and non-advertising uses,
               author's name and source of the used article or picture,
               "首都博物馆网站" or "{{$homePageUrl}}", should be attached.
             </p>
-            <p>
+            <p tabindex="0">
               (2) For business, profit-making and advertising use, you should
               obtain consent of the original author, and attach the name of that
               author, limits of authority and the source, "首都博物馆网站"or
               "{{$homePageUrl}}".
             </p>
-            <p>
+            <p tabindex="0">
               (3) Any modification and cancellation of any articles or pictures
               should be approved by the author, with the limits of authority
               attached.
             </p>
-            <p>
+            <p tabindex="0">
               This website and the Capital Museum are not liable for any direct
               or indirect incidental damage resulting from the use or inability
               to use the information on this website. This website also does not
@@ -74,18 +84,18 @@
               of the provisions of this website or the laws of the People's
               Republic of China.
             </p>
-            <p>
+            <p tabindex="0">
               This website will make announcement in advance if services are to
               be suspended due to system maintenance or upgrading. The website
               and the Capital Museum are not be liable for any inconvenience or
               losses caused by the suspension of services due to hardware
               failure or force majeure.
             </p>
-            <p>
+            <p tabindex="0">
               The right of final interpretation of all contents of this website
               is owned by the Capital Museum.
             </p>
-            <p>
+            <p tabindex="0">
               To safeguard rights and interests of this website and respect for
               the authors' copyrights, we entrust Lyu Xiaojing of the Beijing
               Realizer Law Firm as the legal adviser to this website. Anyone
@@ -94,12 +104,18 @@
               website violate your copyrights, please contact our lawyer within
               two weeks.
             </p>
-            <p>The Capital Museum</p>
+            <p tabindex="0">The Capital Museum</p>
           </div>
         </div>
       </div>
     </div>
-    <div class="back_btn" @click="$router.go(-1)">Back to top</div>
+    <a
+      class="back_btn"
+      href="#"
+      tabindex="0"
+    >
+      Back to top
+    </a>
   </div>
 </template>
 

web/src/views/layout/index.vue

@@ -83,7 +83,7 @@
         class="footer" data-aria-viewport-area tabindex="0"
         aria-label aria-description="You've reached footer section at the bottom of the website. This section contains five URLs. To browse the content, please use the tab key."
       >
-        <div>
+        <div tabindex="-1">
           <template v-for="item in footerData">
             |
             <router-link
@@ -106,7 +106,7 @@
         class="rightNav" data-aria-viewport-area tabindex="0"
         aria-label aria-description="You've reached the pop-up window section, which has one URL and one image. Please use the tab key to go through the information."
       >
-        <ul class="rightIco">
+        <ul class="rightIco" tabindex="-1">
           <li title="game">
             <a
               href=""