無障礙網頁檢測培訓課程

第二章 按鈕與可點擊項目

按鈕與可點擊項目

說明

按鈕通常用於提交表單或確認執行某項功能，操作與結果有點類似連結，但使用時機與傳輸資料的方式有所不同。

連結通常只是單純導頁，而按鈕則經常夾帶相關資料。什麼時機該使用連結或按鈕也沒有一定標準，這部分屬於網頁設計的範疇，我們以無障礙為主，在這裡就先不過度深入。

「可點擊」之項目，通常與js綁定事件有關，可能會有按鈕或連結屬性，也可能沒有，大致上態樣與操作都與按鈕相同。

操作

1. 使用方向鍵或 tab 鍵讓焦點停在按鈕上面時，可使用空白鍵或 enter 鍵點擊該按鈕。
2. 物件瀏覽則使用 NVDA + 九宮格 enter 鍵進行點擊。
3. 利用 NVDA 的單鍵瀏覽：按鈕是 b 可直接跳至按鈕上。

點擊該按鈕，對程式而言就是觸發按鈕的綁定事件(event) 來完成某些任務，例如驗證表單、顯示訊息或將表單資訊送給後端程式去處理等。

現代的網頁設計，連結與按鈕的樣式已不那麼明顯，即所謂按鈕連結化或連結按鈕化。但對導讀軟體而言，屬性還是很重要。

態樣

1. 按鈕需要有說明文字來闡述該按鈕之作用，說明文字必須有意義且易理解。
2. 按鈕只要有明確的說明文字即可，通常利用按鈕說明或 title 屬性實現。
3. 導讀軟體可朗讀「按鈕」屬性，點顯器會顯示「btn」縮寫。
4. 按鈕需能使用鍵盤瀏覽與點擊。
5. 禁止在按鈕上使用按鍵觸發功能 (onkeypress, onkeydown, onkeyup, onblur, onfocus)，如此會讓導讀軟體瀏覽時不小心觸發其他功能。

原碼範例

編號 1 原始語法

原碼

1. <button></button>
2. <input type="submit">
3. <input type="button">
4. <input type="image">

範例 1 原始語法

補充

1. NVDA 可操作該按鈕。
2. 在 NVDA 除 submit 與 image 會自動朗讀「送出查詢」或「提交」外，其餘皆沒有按鈕說明文字，此設計不符合 NCC 無障礙規範。
3. 若設計網頁時，推薦使用第一種較新語法設計。

編號 2 基本

原碼

1. <button name="btn" value="okok">送出</button>
2. <button name="btn" value="okok"></button>
3. <input type="submit" name="submit" value="送出">
4. <input type="submit" name="submit" value="">
5. <input type="image" name="submit_image" src="image_src" alt="送出">

範例 2 基本

補充

1. 必須分清楚哪些屬性是給後端程式使用，而哪些屬性是 NVDA 會朗讀的。
2. 未加提示說明文字不符合 NCC 無障礙規範。

編號 3 使用 title 屬性來當作提示文字

原碼

1. <button title="送出" name="btn" value="okok"></button>
2. <input title="送出" type="submit" name="submit" value="">

範例 3 使用 title 屬性來當作提示文字

補充

有些按鈕會使用圖示，可以使用 title 屬性來補充說明。

編號 4 同時使用了 title 屬性與原本提供的提示說明文字

原碼

1. <button title="點擊後送出表單" name="btn" value="okok">送出</button>
2. <input title="點擊後送出表單" type="submit" name="submit" value="送出">

範例 4 同時使用了 title 屬性與原本提供的提示說明文字

補充

NVDA 兩者皆會朗讀，title 屬性最後朗讀。

編號 5 同時使用了 title 屬性與原本提供的提示說明文字，兩者內容相同

原碼

1. <button title="送出" name="btn" value="okok">送出</button>
2. <input title="送出" type="submit" name="submit" value="送出">

範例 5 同時使用了 title 屬性與原本提供的提示說明文字，兩者內容相同

補充

1. 使用 NVDA 搭配舊版 chrome 會朗讀兩次相同資訊，新版的皆會略過。
2. aria-label 屬性效果與連結相同。

編號 6 使用 role 屬性將連結改為按鈕

原碼

<a href="http://www.nvda.org.tw" role="button">原來為連結</a>

範例 6 使用 role 屬性將連結改為按鈕

補充

1. NVDA 將以 role 角色為主，並且會盡量擁有該角色之特性。
2. 根據實測，div, span 標籤都有效。

編號 7 把 span 當作按鈕

原碼

1. <span>送出</span>
2. <span role="button">送出</span>
3. <span tabindex="0" role="button">送出</span>

範例 7 把 span 當作按鈕

補充

實際的功能與樣式還是要靠程式額外處理才行。

編號 8 把 span 當作可點擊項目

原碼

1. <span>送出</span>
2. <span onclick="canClick()">送出</span>
3. <span tabindex="0" onclick="canClick()">送出</span>
4. <span role="button" tabindex="0" onclick="canClick()">送出</span>

範例 8 把 span 當作可點擊項目

補充

不知何時 NVDA 才會有可點擊的單鍵瀏覽。

編號 9 經過就自動送出的按鈕

原碼

<div tabindex="0" role="button" onblur="noClick()">送出</div>

範例 9 經過就自動送出的按鈕

補充

1. 不能自動觸發事件。
2. 只能用按鈕來進行脈絡變更。

編號 10 只能用滑鼠點兩下送出的按鈕

原碼

<div id="send_div">送出</div>

範例 10 只能用滑鼠點兩下送出的按鈕

補充

一個有障礙的設計可能一次造成許多障礙。

規範

1. HM1110106E 作為「送出」按鈕之用的圖片需提供替代文字，且此替代文字需能充分表達此按鈕之意義與功能
   • 只有使用 input type="image"的圖片按鈕語法且沒有替代文字才適用本條。
2. GN1210100E 提供由鍵盤觸發的事件處理程式
   • 只能用滑鼠觸發。
3. GN1210101E 確認所有功能都能透過鍵盤介面來操作
   • 鍵盤不能操作或無法瀏覽。
4. GN3210300E 僅提供由鍵盤觸發的事件處理程式
   • 需要提供鍵盤與其他設備觸發。
5. GN1320201E 使用按鈕來做出行動並啟動脈絡變更
   • 未使用按鈕進行脈絡變更且未告知使用者。
6. GN1410200E 使用者介面元件應暴露名稱與角色，允許直接設定可由使用者設定的屬性，並在變更時提供通知
   • 按鈕沒有提示文字或屬性

實測

1. NVDA平臺 按鈕使用 fas 圖示設計
   • 從網頁最上方按幾下 b 跳至「回上一頁」按鈕。
   • 通過，有使用提示文字來補充
2. 衛生福利部胸腔病院 使用 firefox 發現按鈕沒有提示文字(SVG 設計)，但 chrome 正常(可抓取 SVG 內 title 文字)
   • 從網頁最上方，按 b 跳到搜尋的按鈕。
   • 通過，語法上使用 svg 已經有加 title 屬性，只是導讀軟體搭配某些瀏覽器沒有實做抓取該標籤而已
3. Download python 送出搜尋按鈕，有 title 屬性
   • 從網頁最上方，按 b 跳到 go 的按鈕。
   • 通過，有補充提示文字
4. 台北市公共運輸處 正確送出按鈕
   • 從網頁最上方，按 b 跳到送出的按鈕。
   • 通過，有提示文字
5. 生活市集 可點擊的登入｜註冊
   • 從網頁最上方使用下方向鍵就能找到，在「客服中心」後面
   • 不通過，需有按鈕或連結屬性且使用 tab 鍵移動時，要能夠駐點
6. 松果購物 可點擊的客服中心
   • 從網頁最上方使用下方向鍵就能找到
   • 不通過，需有按鈕或連結屬性且使用 tab 鍵移動時，要能夠駐點
7. 樂天購物 按鈕沒有提示文字
   • 從網頁最下方按 shift+b 往前跳到送出之前的那個按鈕
   • 不通過，按鈕需要有明確提示文字
8. 里仁購物 搜尋的按鈕在編輯區上面
   • 從網頁最上方按 e 到輸入關鍵字編輯區，往回按 shift + tab 鍵
   • 不通過，導讀軟體操作閱讀元素順序與視覺順序不一致
9. PChome 搜尋按鈕沒有提示文字
   • 從網頁最上方，按 b 跳到搜尋的按鈕。
   • 不通過，按鈕需要有明確提示文字
10. 讀書網 按鈕沒有提示文字
    • 從網頁最上方按 b 跳到該按鈕。
    • 不通過，按鈕需要有明確提示文字

補充

1. Developer Toolkit 附加元件下載