可鍵盤操作的 Google reCAPTCHA

Google reCAPTCHA 可透過鍵盤操作 | Niquelao Niquelao 你覺得結果如何？ 跳至內容 首頁 Contrast Checker HeadingsMap Easyvalidator 關於我… ← EasyValidator，從 Firefox 進行線上網頁驗證 Contrast Checker 更新 → Google reCAPTCHA 可透過鍵盤操作 發佈於 2013 年 8 月 22 日 由 Rumoroso 前幾天我介紹了「rescripting」這個詞。Rescripting 是一種工作方法，用來調整腳本、網站等，以符合特定需求（無障礙性、標準、行動裝置等），而無需重新編程或重新編碼。這在解決圍繞 JavaScript 服務所建立的系統的無障礙問題時特別有用。當我們無法重新編寫腳本時，解決方案就是建立一個輔助腳本來補充原有腳本，並解決它所引發的問題。這次我所做的只是一個簡單的腳本，讓 Google 的 reCAPTCHA 系統可以透過鍵盤操作。這是我為了示範我所說的內容而建立的一個 reCAPTCHA 範例。如果使用 Tab 鍵瀏覽，焦點會落在文字欄位上，但如果繼續按 Tab，則會跳過它的三個按鈕（重新整理、音訊版本和說明），然後繼續瀏覽頁面。這使得這三個按鈕無法透過鍵盤操作，因此不符合 WCAG 2（指南 2.1 鍵盤可操作：讓所有功能都能透過鍵盤使用）。讓這三個按鈕可以透過鍵盤操作很簡單。在程式碼中它們是連結，但沒有 href 屬性，因此無法接收焦點。我所做的是建立一個簡單的腳本來加入 tabindex 屬性。如果我們將它的值設為「0」，就可以讓這些連結包含在自然的 Tab 順序中，而不會改變其順序。因此，正如在可透過鍵盤操作的 reCAPTCHA 範例中所看到的，透過一個簡單的腳本，我們就能滿足 WCAG 2 的要求，而無需因為無法重新編寫包含的程式碼而更換驗證碼系統。這是連結，內含我為 captcha 系統進行 rescripting 所做的簡單腳本。這篇文章發表在 無障礙性、Javascript、rescripting 分類下，並標記為 無障礙性、重新編寫腳本、rescripting。儲存永久連結。 ← EasyValidator，從 Firefox 進行線上網頁驗證 Contrast Checker 更新 → 對「Google reCAPTCHA 可透過鍵盤操作」的 4 則回應 Pete 說： 2014 年 2 月 18 日 於 23:25 我看了你的示範頁面。那些元素可以取得焦點，但我無法跟隨連結。它們無法透過鍵盤操作。但用滑鼠點擊時可以運作。我在 Chrome 中測試。 Rumoroso 說： 2014 年 2 月 19 日 於 0:16 嗨 Pete，感謝你的評論。我剛剛看到了你所說的情況，問題（我猜）在於 recaptcha 的腳本已經改變，互動元素上沒有 onclick 事件。我修改了我的腳本，讓它在按下按鍵時觸發該事件，所以我想問題已經解決了… 祝好 Pete 說： 2014 年 3 月 4 日 於 17:14 看起來很棒。還缺少最後一塊，如果我選擇聽音訊，「取得音訊挑戰」連結會神奇地變成「取得視覺挑戰」按鈕，而這個按鈕無法被 Tab 到。我不確定這部分是否也可以重新編寫腳本。 Rumoroso 說： 2014 年 3 月 12 日 於 11:00 嗨 Pete，是的，我在上次的 rescript 中沒有看到那種情況。我剛剛做了一個修改來解決它。問題在於每個連結關聯的 onclick 事件。該事件沒有區分鍵盤的按鍵代碼。現在，該事件只在按下「Enter 鍵」時運作。感謝你的回饋（對解決錯誤很有用…）。如果你看到任何新問題…你知道的… 發表留言 取消回覆 分類 (X)HTML 無障礙性 CSS html5 Javascript 行動網路 Niquelando rescripting 在 Twitter 上追蹤 @rumoroso Niquelao 由 WordPress 提供技術支援。

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.