先寫清楚顧客要作的決定

一組圓點或方格本身不是完整問題。假設香港服務公司在查詢表格詢問聯絡方式,只寫「聯絡」會令顧客不清楚這是收報價、跟進查詢,還是日後所有通知的安排。群組題目應寫成「我們可如何就這次查詢聯絡你?」;選項則寫「以電郵跟進這次查詢」、「以電話跟進這次查詢」。題目提供脈絡,個別標籤獨立讀出時也應清楚。W3C 指出不同屏幕閱讀器讀出群組標題的方式可能不同,有的讀一次,有的重複,也有少數情況不讀。因此不能只靠視覺位置讓人猜選項意思。

先決定問題容許一個還是多個答案,再選控制項。單選按鈕適合從一組可見答案中選一個;核取方塊適合互不排斥的決定,或容許多選的問題。若送貨方式最終只能有一種,就不應用多個獨立方格,除非業務流程真的可處理多種方式。相反,讓顧客選出所有可約日子,就不應強迫只選一天。最少及最多可選數目應在群組旁用文字說明,別假設顧客從圓形和方形外觀自行推斷。資料結構、驗證規則與畫面指示必須一致。

讓選項關係在視覺以外也成立

一般 HTML 表格可用 fieldset 包住相關單選按鈕,並以簡短 legend 寫出問題。每個輸入項都要有自己的標籤和不重複的識別碼,同一答案組的單選按鈕則共用 name。W3C 的表格分組教學示範了這種做法。畫面上有標題,並不代表輔助科技會自動知道它是選項組的名稱。表格若同時有送貨和帳單地址,兩邊都出現「姓名」、「地址」等標籤,分組亦有助辨別。標題要簡潔,讓重複讀出時仍易於理解;不要只為配合複雜排版而層層巢狀分組。

即使樣式失效或頁面放大,群組也應容易理解:題目可見、不同群組有間距、選中狀態清楚,並且不能只靠顏色分辨答案。自訂卡片式選項可以好看,但若把原生輸入項換成可點擊容器,就需要自行處理鍵盤操作和狀態。W3C 的鍵盤指引說明,自訂 ARIA 元件要由開發者提供鍵盤行為;加上 ARIA 名稱不會令 div 自動變成單選按鈕。若需要卡片外觀,應保留真正可標示的輸入項,並測試整張卡的焦點和點選行為。

在作決定的位置說明條件

如果選項會影響收費、時間或服務資格,提交前就要說明。選「電話」可能意味只在香港辦公時間接聽,選「電郵」則可能是非即時回覆;這些是公司的實際安排,不是控制項本身的性質,因此不能憑空承諾回覆時限。適用條件應放在選項附近,需要時連結完整條款。若選擇後會顯示新欄位,例如方便接電話的時段,要讓變化可預期,並確保新欄位進入正常鍵盤順序。顧客選好後不要暗中改成另一答案;若條件變了,要交代原因。

回覆查詢所需的聯絡方式,應與可選的市場推廣同意分開。顧客可以要求以電郵收報價,同時不接受宣傳電郵。若把兩個決定塞進一個含糊的方格,紀錄便不能清楚反映顧客原意。兩道題目要分開寫,每個選項只對應其實際用途,測試提交後再檢查儲存值。業務上必須回答的問題應標明必填;可選的同意仍須可選。不要為了令表格看似完整而預先選定重要答案。核心驗收是顧客明白自己決定甚麼,而系統記下的是同一件事。

以預約查詢作一次完整演練

假設一間維修公司初步評估可選上門或遙距。原設計只有兩張大卡片,分別寫「上門」和「遙距」,沒有問題;鍵盤使用者移動至卡片時,未必知道這是服務形式、價錢還是技師類別。修改後加入可見題目:「你希望首次評估以哪種方式進行?」兩個選項都寫成完整名稱。公司亦說明上門預約須符合實際服務範圍,選中後下一步會要求地址。團隊按真實預約規則測試兩條路徑,不憑空寫出服務地區或可用時段。

這個例子應測試三種提交:未選、選遙距、選上門。必填而未選時,錯誤訊息要指出是哪道問題,其他已填內容仍保留。遙距路徑不應要求上門地址;上門路徑只在需要時要求地址。顧客短暫改選再返回時,除非有明確私隱理由清除資料,否則不應無故抹掉已填地址。每次提交後,都要檢查儲存的預約類型和確認文字。若確認頁寫遙距、資料庫卻記上門,即使單選按鈕很漂亮,流程仍不可靠。

同時測試操作與紀錄

英文及繁體中文版應各自做一次驗收。把每道題目和每個選項獨立讀出,不借助旁邊文字,看看仍否明白。用 Tab 進入表格、用方向鍵切換原生單選項,再用 Tab 離開;核取方塊則用空白鍵測試。配合屏幕閱讀器,確認題目、選項、選中狀態和必填指示都能理解。W3C 的鍵盤指引與分組教學提供相應依據。自動無障礙掃描可找出部分標籤問題,但不能判斷「標準」這種用語是否足以交代送貨後果。

最後要把畫面答案、提交值、確認訊息和員工後台紀錄逐一對照。若顧客打開表格後,某選項在提交前變成不可用,伺服器應解釋無法接受的原因和下一步,不能默默換成另一服務。保留一份簡短規格:題目原文、可用選項、可選一個或多個、影響結果的條件,以及預期儲存值。儲存中的舊草稿也要測試;若原有選項已刪除,應要求顧客重新決定,不能在未核對意思是否相同時把舊代碼轉成新答案。往後翻譯、改版或接駁預約系統時,這份規格可供核對。真正的完成標準是顧客能作出原本想作的選擇,而公司收到的是同一選擇。

最後還要核對兩種語言所表達的業務意思,而不只是控制項標籤。英文「電話聯絡」若暗示即時致電,中文版卻只說員工可能稍後聯絡,顧客理解便會不同。懂兩種語言的編輯應把各版題目、提交確認及員工紀錄一起閱讀。若某選項只在一種語言不可用,必須先釐清服務規則;不能讓隱藏的翻譯分支產生另一套承諾。這種對照還可找出選項排序改變、儲存代碼卻維持原樣的問題,尤其是兩種語言由不同檔案建立表格時。

進行前先確認

  • 每個選項連同題目和選擇規則是否清楚?
  • 兩種語言的鍵盤及屏幕閱讀器測試是否通過?
  • 儲存答案是否與畫面選擇及確認訊息一致?

資料來源及延伸閱讀