完整添加无障碍菜单功能朗读

web/src/Help.vue

@@ -245,6 +245,9 @@ export default {
   name: 'App',
   components: {
     Accessibility,
+  },
+  mounted() {
+    this.$eventBus.$emit('request-read', `You've reached the Help page.`)
   }
 }
 </script>

web/src/views/accessibility.vue

@@ -28,7 +28,7 @@
         tabindex="0"
         aria-description="Close"
         type="button"
-        @click="onClickMagnifier"
+        @click="ariaSettings.isMagnifying = !ariaSettings.isMagnifying"
       >
         <img
           :src="assetUrls.closeMagnifyArea"
@@ -203,6 +203,7 @@
           ref="shortcutBtnRef"
           :href="shortcutFileText"
           download="CapitalMuseum.url"
+          @click="onClickDownloadShortcut"
         >
           <img
             :src="assetUrls.shotcut"
@@ -256,7 +257,7 @@
       >
         <button
           tabindex="0"
-          aria-description="Navigation area"
+          aria-description="Navigation area. Please use the shortcut key to select the area."
           @mousedown="onMouseDownNavigationArea"
           @click="onClickNavigationArea"
           type="button"
@@ -276,7 +277,7 @@
       >
         <button
           tabindex="0"
-          aria-description="Window area"
+          aria-description="Window area. Please use the shortcut key to select the area."
           @mousedown="onMouseDownWindowArea"
           @click="onClickWindowArea"
           type="button"
@@ -296,7 +297,7 @@
       >
         <button
           tabindex="0"
-          aria-description="Interaction area"
+          aria-description="Interaction area. Please use the shortcut key to select the area."
           @mousedown="onMouseDownInteractionArea"
           @click="onClickInteractionArea"
           type="button"
@@ -653,6 +654,8 @@ export default {
       }
     })
   },
+  mounted() {
+  },
   destroyed() {
     window.removeEventListener('storage', this.loadStoredSettings, {
       passive: true,
@@ -774,11 +777,11 @@ export default {
           this.onClickMagnifier()
         }
       } else if (e.key === "1" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithCustomAttribute('ariaNavigationArea')
+        this.onClickNavigationArea()
       } else if (e.key === "2" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithCustomAttribute('ariaViewportArea')
+        this.onClickWindowArea()
       } else if (e.key === "3" && e.altKey && !e.ctrlKey && !e.shiftKey) {
-        utils.getAndFocusNextNodeWithCustomAttribute('ariaInteractionArea')
+        this.onClickInteractionArea()
       }
     },
     loadStoredSettings() {
@@ -914,7 +917,7 @@ export default {
     onClickMute() {
       this.ariaSettings.isMuted = !this.ariaSettings.isMuted
       if (this.ariaSettings.isMuted) {
-        this.planToPlayAudio('', 'Sound off')
+        // this.planToPlayAudio('', 'Sound off')
       } else {
         this.planToPlayAudio('', 'Sound on')
       }
@@ -954,13 +957,13 @@ export default {
       }
       if (this.ariaSettings.themeIdx === 0) {
         this.planToPlayAudio('', "Ajust to standard color.")
-      } else if (this.ariaSettings.themeIdx) {
+      } else if (this.ariaSettings.themeIdx === 1) {
         this.planToPlayAudio('', "Adjust to black lettering on white background.")
-      } else if (this.ariaSettings.themeIdx) {
+      } else if (this.ariaSettings.themeIdx === 2) {
         this.planToPlayAudio('', "Adjust to yellow lettering on blue background.")
-      } else if (this.ariaSettings.themeIdx) {
+      } else if (this.ariaSettings.themeIdx === 3) {
         this.planToPlayAudio('', "Adjust to black lettering on yellow background.")
-      } else if (this.ariaSettings.themeIdx) {
+      } else if (this.ariaSettings.themeIdx === 4) {
         this.planToPlayAudio('', "Adjust to yellow lettering on black background.")
       }
     },
@@ -968,31 +971,53 @@ export default {
       if (this.ariaSettings.zoomLevel === zoomFactors.length - 1) {
         return
       }
+      this.planToPlayAudio('', "Zooming in on page")
       this.ariaSettings.zoomLevel++
     },
     onClickZoomOut() {
       if (this.ariaSettings.zoomLevel === 0) {
         return
       }
+      this.planToPlayAudio('', "Zooming out on page")
       this.ariaSettings.zoomLevel--
     },
     onClickCursorStyle() {
       this.ariaSettings.isBigCursor = !this.ariaSettings.isBigCursor
+      if (this.ariaSettings.isBigCursor) {
+        this.planToPlayAudio('', "You've enabled the large cursor")
+      } else {
+        this.planToPlayAudio('', "You've disabled the large cursor")
+      }
     },
     onClickCrossCursor() {
       this.ariaSettings.isCursorCrosshair = !this.ariaSettings.isCursorCrosshair
+      if (this.ariaSettings.isCursorCrosshair) {
+        this.planToPlayAudio('', "You've enabled the cross cursor")
+      } else {
+        this.planToPlayAudio('', "You've disabled the cross cursor")
+      }
     },
     onClickMagnifier() {
       this.ariaSettings.isMagnifying = !this.ariaSettings.isMagnifying
+      if (this.ariaSettings.isMagnifying) {
+        this.planToPlayAudio('', "You've enabled the magnifier")
+      } else {
+        this.planToPlayAudio('', "You've disabled the magnifier")
+      }
     },
     onClickHelp() {
       window.open(config.publicPath + 'help.html')
     },
+    onClickDownloadShortcut() {
+      this.planToPlayAudio('', "You are downloading the shortcut. Double click the shortcut to reach the website.")
+    },
     onClickElderlyServicesAreaEntry() {
       this.ariaSettings.menuMode = 'old'
+      this.planToPlayAudio('', "You've switched to the elderly services mode.")
     },
     onClickScreenReaderAreaEntry() {
       this.ariaSettings.menuMode = 'blind'
+      this.planToPlayAudio('', "You've switched to screen the reading accessibility mode.")
     },
     onMouseDownNavigationArea(e) {
       e.preventDefault()