以操作名稱取代單靠位置描述

「按右邊的綠色按鈕」在桌面版看似清楚,但手機版可能把按鈕上下排列;顧客放大畫面後,原來的左右關係也可能消失;讀屏器的閱讀順序更未必與畫面位置相同。WCAG 2.2 的 1.3.3 準則指出,理解及操作內容的指示不能單靠形狀、顏色、大小、視覺位置、方向或聲音等感官特徵。「單靠」是關鍵:位置提示仍可以幫助部分顧客,只是同一句還要說出控制項的名稱或用途,讓不依靠該提示的人也能完成操作。

寫指示時先用動詞,再引用畫面上實際存在的名稱,例如「在『領取方式』選擇『到店自取』」,比「按下面的方格」更能適應重新排版。若按鈕寫「前往付款」,協助文字也應用相同稱呼;不要在說明中叫人按「提交」,讓顧客懷疑自己是否走錯步驟。若控制項只有圖示,先考慮能否加上可見文字。隱藏的無障礙名稱有助讀屏器使用者,但可見標籤同樣幫助看得到畫面、卻不明白圖示意思的人。

先盤點會影響顧客決定的指示,例如結帳、預約、帳戶復原、表格及求助訊息。逐句記下文字、它所指向的控制項,以及在哪些螢幕尺寸出現。搜尋「上方」、「右邊」、「圓形」、「紅色」、「大按鈕」、「聽到提示聲」等中英文線索,但不要機械地全部刪除。「參看下文」若確實指向閱讀順序中的下一節,也可能清楚。真正要找的是:拿走感官提示後,讀者是否仍能辨認應操作甚麼。

改寫時保留有用的視覺線索

假設預約表格寫着「選左邊藍色方格預約上午」。如果選項實際有「上午」標籤,可改成「在『預約時段』選擇『上午』」;若藍色在所有版面都準確,再作次要提示即可。如果畫面只有一個無名的藍色長方形,便不只是改文案,控制項本身也要補上名稱。沒有名稱的按鈕很難在鍵盤、觸控及輔助技術之間保持可辨認。這亦關乎商業承諾:顧客提交前應知道自己預約的是哪個時段。

聲音提示也要接受同樣檢查。「聽到嗶聲後輸入驗證碼」在裝置靜音或聽不到聲音時便無法使用;可以寫成「當『驗證碼』欄位出現時,輸入收到的代碼」,把聲音變成附加提示。若自助機使用實體按鍵,觸感可能有助辨認,但網頁指示仍應提供可找到的名稱、印字或等效參照。不能因網頁文案較清楚,就聲稱某一部實體機器整體符合無障礙要求;實體按鍵還需要按其真實設計檢查。

W3C 的表格教學提醒作者交代必填或選填內容、資料格式及其他相關資訊,並讓輔助技術能讀取指示。簡短的整體指示應放在任務附近;個別欄位的說明則應在實際表格中與欄位建立關聯。把所有方向寫在結帳頁頂部,雖然肉眼看得見,顧客走到欄位時仍可能難以找到。說法要具體:「輸入可接收送貨通知的手機號碼」回答了資料用途;「填右邊的號碼」則沒有交代要填誰的號碼。

可以先隱藏視覺樣式,只把操作句子讀給未見過頁面的同事聽。如果他不能從句子說出目標,就補上欄位或按鈕名稱。之後把句中的名稱與讀屏器實際取得的控制項名稱比較。這樣可找出常見斷層:說明叫人「選擇送貨速度」,控制項卻只讀成「選項二」。顧客可能理解文字,仍無法操作。應同時修改控制項與文案,英文及中文名稱即使語序不同,也要指向同一功能。

多步驟流程除了指明控制項,也要指明所在步驟。「按確認」可能同時指確認送貨地址及確認付款,容易造成錯誤。可說「在送貨資料核對步驟,按『確認地址』」,並確保頁面真的使用這個按鈕名稱;若按鈕名稱不足以分辨,也應修改按鈕。要說清楚某次操作是正式提交,還是只進入下一個核對畫面。電話協助尤其需要這種區分,因為客服無法直接指着顧客的螢幕。清晰指示可成為雙方共同的流程地圖。

用預約流程驗證

以假設的諮詢預約流程為例:顧客先選服務,再選日期,最後選時段。較弱的指示是「按最右邊的日曆圖示,然後揀灰色方格」。較清楚的版本是「在『預約日期』開啟日期選擇器並揀選可預約日期,然後在『預約時段』選可用時間」。這不是任何供應商的實際流程描述。新句子說出了步驟及控制項,即使圖示更換或方格移位,意思仍成立;網站也必須另外讓人分辨不可選日期,並確保日期選擇器真的可以操作。

同一流程要在窄螢幕、放大文字、中英文版面重試。中文標籤可能較長而換行,於是「日期旁的按鈕」在中文版已經不準確,英文桌面版卻仍看似正常。請未看過原設計的人只按書面指示、用鍵盤完成流程,觀察他是否找到同名控制項、明白選擇結果,以及能否改正選錯的項目。再按閱讀順序用讀屏器聆聽控制項名稱與說明。單張合格截圖不能證明實際表格已把指示傳達出去。

讓指示跟介面同步更新

產品團隊改動按鈕名稱時,應同步更新頁內說明、電郵指示、客服說法及兩種語言版本。內容清單可把每句指示連到現用控制項名稱和負責人。上線時要檢查條件步驟的前後狀態:選擇送貨方式可能顯示新欄位,改用另一付款方法亦可能改變最後的操作名稱。不要叫翻譯人員靠舊有的方位描述猜新標籤;應提供實際畫面或可操作流程與預期動作,再核對最後呈現的文字。

驗收問題是:顧客若無法利用文中提到的顏色、形狀、聲音或畫面位置,是否仍能辨認控制項並完成操作?若不能,就改善控制項名稱或指示,重試整段流程。確實有用的位置提示可以保留,但必須先讓操作名稱清楚。這樣寫法在響應式排版及中英文修改後較可靠,客服也有可重複使用的說法,不必叫來電者尋找「左邊那個圓形東西」。

進行前先確認

  • 指示引用現用控制項名稱及操作。
  • 移除位置、顏色和聲音提示後仍可完成流程。
  • 已按實際介面檢查兩種語言及不同版面。

資料來源及延伸閱讀