無障礙 AA 標章申請過了！！
慶祝鹽酥雞也吃過了，是該把開發筆記整理一下
無障礙網站，廣泛的定義，是要讓各種使用者都能順利使用網站，像是
- 手無法握著滑鼠的人，可以完全用鍵盤操作網頁
- 視障的人，可以用聽的來理解並操作網頁
- 色盲、色弱的人，不會因為網頁的用色，造成無法辨識內容的狀況
其他更多說明，可以參考 網站無障礙規範
想了解更多無障礙開網頁設計或發的注意事項，可以參考這篇
我遇到的鍵盤事件，主要分為
- 用鍵盤快捷跳到某個指定位置
- 特定情況下按 enter 要有反應
本專案技術則是 Vue, Element-ui
實作鍵盤焦點
什麼是鍵盤焦點？
指在使用鍵盤操作網頁時，指定一個特定元素或按鈕，接收來自鍵盤的輸入
當一個元素處於鍵盤焦點狀態時，可以接收鍵盤事件並回應相應的操作，例如輸入文字、導航、選擇選項等
鍵盤焦點對於無障礙性非常重要，不是所有使用者都能用滑鼠或觸控螢幕。透過鍵盤焦點，可以確保所有使用者都能夠訪問和操作網站或應用程式的各種功能和控制項
此外，在視覺上表示鍵盤焦點的方式也是常見的設計做法，幫助使用者確定目前焦點位置，提升可用性和使用者體驗
原生會被鍵盤聚焦到的元件有 <button>, <input>, <a>，其他元件如果也想被鍵盤觸發，可以加上 tabindex='數字' 的屬性，比較常使用的是 tabindex='0' 及 tabindex='-1'
tabindex='-1'可以被滑鼠 focus，但無法被鍵盤 focus到；使用情境像是跑馬燈，如果還沒出現在螢幕上的按鈕，加上tabindex='-1'就避免被鍵盤點到tabindex='0'可以加在頁籤上。如果頁面很多tabindex='0'，鍵盤切換時，會依照 DOM 順序切換- router-link 無法用 enter 直接跳轉，要綁定 keyup.enter 事件
//------------ Script --------------
methods: {
handleKeyDownRouter(name, hash) {
this.$router.push({ name: name, hash: hash })
}
}
//------------ HTML --------------
// 傳入字串
<router-link
class="navbar-item"
active-class="avtive"
:to="{ name: 'SiteMap' }"
@keyup.enter.native="handleKeyDownRouter('SiteMap')" // 綁定 keyup.enter
>
網站導覽
</router-link>
// 傳入變數
<el-menu-item v-for="(item, index) in actionMenuItem" :key="index">
<router-link
class="navbar-item"
active-class="avtive"
:to="{ name: item.routerName }"
@keyup.enter.native="handleKeyDownRouter(item.routerName, item.routerHash)" // 綁定 keyup.enter
>
{{ item.displayName }}
</router-link>
</el-menu-item>button event | 按鈕的 enter 偵測
以語言切換為例
//------------ HTML --------------
<el-button
ref="buttonLangEn"
type="text"
role="button"
@click="handleSetLanguage('en')"
>
EN
</el-button>
<el-button
ref="buttonLangZh"
type="text"
role="button"
@click="handleSetLanguage('zh-TW')"
>
中
</el-button>
//------------ Script --------------
mounted() {
this.keydownHandler = (event) => {
if (event.keyCode === 13) {
if (event.target === this.$refs.buttonLangEn.$el || // 這一段加上 '.$el'
event.target === this.$refs.buttonLangZh.$el) {
const lang = this.language === 'en' ? 'zh-TW' : 'en'
this.handleSetLanguage(lang)
}
}
}
document.addEventListener('keydown', this.keydownHandler)
},
beforeDestroy() {
document.removeEventListener('keydown', this.keydownHandler)
},用 element-ui 的按鈕元件，type=”button” 才能觸發鍵盤事件，這邊因為 css 已經寫好不想更動，所以沿用 type=”text” ，再自己註冊事件 ( 無效寫法： role=”button”、native-type=”button” (原生 type 属性 button / submit / reset )
多層選單預設初始樣式，在同一畫面有 2 個 focus 效果
實際上一個頁面 focus 只能有一個，所以不能一起用 v-focus，需要用 css 處理
//------------ HTML --------------
<el-button
v-for="(mainType,i) in maintype"
:key="i"
:label="mainType"
type="button"
class="datatype-button"
:class="{ activeButton: activeMainType === i }" // 加這個
:value="mainType"
@click="handleMainTypeSelect(i)"
>
<template v-if="mainType">
{{ mainType }}
</template>
</el-button>
//------------ Script --------------
data () {
return {
activeMainType: 0, // for keyboard focus
activeSubType: 0, // for keyboard focus
}
},
methods: {
handleMainTypeSelect(index) {
this.activeMainType = index // 加這個
this.selectedType = event.target.value
this.params.type = this.selectedType
this.setSubTypeOptiones()
this.fetchData()
},
}
//------------ Style --------------
.activeButton{
background-color: $datatype_blue;
color: $text_light;
}導盲磚
什麼是導盲磚？
在有些網頁的區塊小標題上會看到 ::: 的可愛小東西，通常那個網頁都有做無障礙，可以想像成網頁的大地標
導盲磚要可以觸發鍵盤焦點，也可以做為從頁首直接跳到頁尾、或側邊選單的傳送門
<a
id="AU"
href="#AU"
accesskey="U"
title="頂端功能區塊[快捷鍵Alt+U]"
tabindex="0"
>
:::
</a>
<a accesskey="L" title="左側區域"> ::: </a>
<a accesskey="C" title="中間區域"> ::: </a>
<a accesskey="R" title="右側區域"> ::: </a>結語
鍵盤事件在無障礙網頁開發中的重要性非常高，能確保大多需要網頁無障礙的使用者順利的瀏覽和操作網頁。
通過適當地配置鍵盤事件，我們可以提供給使用鍵盤導航的使用者更好的體驗。
謝謝你的閱讀，如有任何疑問或想要分享經驗也歡迎留言，期待與你進一步交流！
如果喜歡我的文章，可以拍拍手讓我知道，更歡迎你追蹤並持續關注更多的分享。
想轉職工程師、對養成班有興趣、或對前端工程師有興趣的朋友們敬請期待~
下一篇，我將分享無障礙網頁開發中，針對螢幕閱讀器的開發筆記
我們下篇文章見！