第十二章 認證碼與網站導覽
認證碼
說明
網頁上認證碼的呈現方式，如果只能依賴視覺判讀，就會將全盲視障者阻擋在外。
在所有障礙之中，無法通過認證的問題，一直以來都是全盲視障者的痛。
其他的障礙有大有小，但無法通過認證的障礙一旦發生，後續的所有動作或頁面都無法再繼續進行操作。
這個越來越普遍的圖形認證碼機制，原本用來防止自動程式透過大量送表單來癱瘓整個網站，卻擋住了無法視圖的使用者們。
無論是會員註冊登入、購物下單、買票觀影觀賽，一直到查詢、掛號與填寫意見，認證碼幾乎無所不在，視力正常者幾秒鐘就能通過的關卡，經常成為視障者或其他障礙者不得其門而入的最大殺手。
因為資安問題，想要防止大量送單、大量註冊、爆力破解帳密與程式搶票等害客行為是可以理解的，但一定有更好的方式可以達到相同的效果且不會阻擋到善意的使用者。
當你花時間填完表單或選好商品，最後被認證碼擋住無法送單，沮喪與失落的感受總是令人不快。
其實認證方式有很多，選擇一種認證方式可以透過非視覺與鍵盤的操作完成認證才不會造成使用者的困擾。
雖然有一些程式或助手，可以透過程式掃描或拍照分析圖形驗證碼，或透過截圖請善心人士幫忙看驗證碼，但這些並非一個常態的解決方案，另外也牽涉到個人隱私的問題。
重點在於以現在的科技，全盲視障者已經可以順利透過輔具瀏覽網頁，不應該發生無法通過防止機器人的認證方案，因為全盲視障者不是機器人或自動程式，但卻被阻擋了。
常見的認證類型：
- 看圖片內容填答進行驗證(英數字)：必須依賴視覺
- 選擇圖片回答問題(選出題目指定的圖片，如哪個圖是車子)：必須依賴視覺
- 透過操作行為由程式給分，自行設定幾分可通過驗證(google v3)：使用導讀軟體搭配鍵盤操作時，分數可能較低
- 透過動態鍵盤輸入驗證答案：動態鍵盤本身的無障礙操作需要做好
- OTP簡訊驗證：需要有手機，且支援朗讀簡訊功能
- 搭配手機操作進行驗證
常見的認證替代方案：
- 語音驗證：使用語音播放驗證碼
- 文字或數學題目驗證
- 用其他方式取得驗證碼進行驗證：電子郵件、電話等
操作
需要考慮到的相關問題：
- 安全性問題
- 語音驗證碼資訊是否完整
- 文字或數學題目是否太難
- 作答時間是否足夠
- 更換原驗證碼時，替代方案是否跟著更新
態樣
- 認證碼若為圖片，需有替代文字標明為認證碼圖片
- 只能依賴視覺、聽覺或滑鼠之驗證方式，需要提供額外替代方案
- 替代方案需完整確實
規範
- GN1110110E 任何CAPTCHA驗證均需提供描述CAPTCHA驗證目的的替代文字
- 認證碼圖片沒有提示文字(提醒使用者有認證機制而非答案)
- GN1110111E 網頁上任何一個CAPTCHA驗證均至少有另一個運用不同形式的CAPTCHA驗證，且具有相同的目的與功能
實測
- 高鐵 訂位查詢
- 從網頁最上方按 f 到「身分證字號」欄位
- 瀏覽表單到最後一個沒有提示文字的編輯區欄位為輸入認證碼欄位
- 認證碼的編輯區後面「cached」為更換驗證碼，「volume_up」為語音播放按鈕
- 通過，圖形驗證碼有另一種替代方案(語音)
- 通過，更換驗證碼功能正常
- 不通過，認證碼編輯區沒有提示文字，操作按鈕沒有提示文字
- 內政部營建署 署長信箱
- 從網頁最上方按 f 到「姓名」欄位
- 使用 tab 到達「驗證碼」圖片連結(取得驗證碼)
- 再按 tab 可到達「驗證碼」編輯區
- 通過，圖形驗證碼有另一種替代方案
- 補充，認證安全程度較低
- 里仁 登入畫面
- 從網頁最上方按 e 到達「請輸入您的E-mail 或 手機號碼: *」編輯區
- 使用 tab 到「登入」按鈕之前的編輯區是圖形驗證碼填寫編輯區
- 不通過，圖形驗證碼沒有替代方案
- 不通過，編輯區沒有替代文字
- NVDA台灣平臺 註冊畫面
- 從網頁最上方按 e 到達「暱稱」編輯區
- 使用 tab 到「確認密碼」之後的填寫驗證答案編輯區
- 通過，所有使用者皆可使用的驗證方式
- 通過，更換驗證碼功能正常
- 補充，認證安全程度較低
- 中華電信 dns代管服務
- 從網頁最上方按 tab 找到「圖形驗證碼」編輯區
- 不通過，圖形驗證碼沒有替代方案
- 有聲書學會 登入畫面
- 從網頁最上方按 e 到達「電郵信箱」編輯區
- 使用 tab 到達「答案」編輯區
- 通過，所有使用者皆可使用的驗證方式
- 補充，認證安全程度較低
- 財政部 意見信箱
- 從網頁最上方按 e 到「您的姓名」欄位
- 使用 tab 到達「請輸入驗證碼」編輯區
- 通過，圖形驗證碼有另一種替代方案
- 通過，更換驗證碼功能正常
- google captcha v2 的驗證碼問題
網站導覽
說明
網站導覽是用來幫助使用者了解整個網站架構的一種方式。在網站導覽中，對於整個網站的架構與定位點(快速鍵)會有完整的描述，讓使用者能快速且清楚的了解。
因此，我們會建議網站導覽這個連結需要放在由畫面最上方按三下 tab 鍵內就可到達的位置為佳，且要求網站每個頁面皆有網站導覽連結可以參考。
也建議無論是檢測者或使用者都應該先瀏覽該站的網站導覽再進行操作，如此會對整個網站較有概念。
甚至有一些特殊的操作方式或網站特色會寫在網站導覽提醒使用者，透過網站導覽可以得到網站的完整資訊。
同時，對檢測者而言，網站導覽後方的網站主要連結不旦可以方便的了解網站架構，對於抽測網頁也有直接的幫助。
內容
通常網站導覽的內容會包括三個部分：
- 網站架構敘述
- 定位點快速鍵列表或特殊操作方式
- 重要項目或連結(架構列表)
操作
- 依據網站導覽敘述，確定各區塊與定位點快速鍵能正常操作。
- 測試跳到主要內容區連結是否能正常運作
問答(Q&A)
- 每個網站一定要有網站導覽嗎？
- 通常都要，除非是單頁式或很簡易的網站才可以不要網站導覽設計
- 每個網站都要有定位點快速鍵嗎？
- 如果有兩個方式以上可以讓導讀軟體快速的移動到各個區塊，就可以不要定位點快速鍵。例如 h 標題標籤層級與地標都規劃得很好
- 定位點快速鍵一定要顯示三個冒號嗎？
- 不一定，也可以使用同底色來隱藏，但需要注意的是，當取得鍵盤焦點時必須明顯顯示出來
- 定位點的連結是否要連到網站導覽？
- 這是錯誤的設計，定位點的連結不能連到任何地方，點擊後不能有作用
- 定位點快速鍵的字母有強制規定該怎麼設計嗎？
- 沒有，但通常會依據英文區塊縮寫，慣用的有：
- u 上方區塊 (up) 也有人用 t (top)
- c 中央區塊 (center)
- l 左側區塊 (left)
- r 右側區塊 (right)
- m 功能選單區塊 (menu)
- b 下方區塊 (bottom) 也有人用 z (最後一個字母)
- s 全站搜尋區 (search)
- 網站導覽一定要位在三個 tab 內就能移到才能通過檢測嗎？
- 只是建議，目的是不要放太遠，否則會失去導覽的意義，例如只放在畫面下方底部就不行
- 每個頁面是否都要存在每個定位點？
- 可以依據版型來放置相應的定位點，例如該頁面沒有右方區塊，那就不需要出現右方區塊定位點
- 名詞更新，建議使用新式用語：
- 在網站導覽內的定位點區塊名稱是否一定要與實際定位點的 title 屬性或連結說明文字完全相同？
- 不用到完全一樣，差不多即可，例如上方區塊與頂部區塊，中央區塊與主要內容區塊皆可
- 定位點一定要是連結嗎？
- 不一定，按鈕也可以，主要的目的是使用各瀏覽器按下相應的快速鍵能到達正確的區塊就好
- 跳到主要內容區的連結是什麼？
- 跳到主要內容區連結位在每個頁面的最上方第一個元素，點擊後可以到達該頁面的主要區塊，建議使用錨點設計來拉動鍵盤焦點到實際駐點元素上。
- 跳到主要內容區的連結與中央區塊定位點有什麼不同？
- 中央區塊定位點有綁快速鍵(accesskey)，但跳到主要內容區連結沒有
- 中央區塊定位點連結點擊後不會有任何反應，但點擊跳到主要內容區連結會跳到主要內容的位置
- 設計較佳的跳到主要內容區連結，可以跳到的位置會比中央區塊定位點的位置還要更靠近網頁的主要內容資料，例如點擊跳到主要內容區連結會躍過中央區塊放大文字、分享等固定連結。
- 相同之處在於，兩者皆為連結，當取得鍵盤焦點時必須明顯顯示出來
規範
- GN1240100E 在每一個頁面頂端加入一個鏈結，直接連往主要的內容區域
- 網頁最上方沒有跳到主要內容區連結的設計
- 點擊主要內容區連結無效或未拉動鍵盤焦點到實際位置
- GN1240102E 在頁面頂端加入鏈結，連到每一個內容區域
- GN1240500E 提供網站導覽、導覽工具或機制、搜尋功能、網頁清單鏈結等功能，協助使用者尋找內容
實測
- 桃園市立圖書館
- 檢查網站導覽內容
- 通過，雖然有些敘述不是很精確或甚至有點多餘，但也沒有寫錯
- 桃園市政府
- 通過，雖然快速鍵比較多，但沒有設計錯誤
- 點擊網站導覽連結，檢查網站導覽內容
- 通過，雖然有些敘述不是很精確或甚至有點多餘，但也沒有寫錯
- 空氣品質模式支援中心
- 檢查網站導覽內容
- 通過，雖然快速鍵設定有點特別，但沒有設計錯誤
- NVDA台灣平臺
- 台新 無障礙網銀
- 檢查網站導覽內容
- 通過，但建議導盲磚用語應改為定位點
- 渣打銀行 假設要申請標章或已經取得標章