先決定說明應否直接留在頁面

假設預約表格要求顧客選擇服務時段。如果「上午」代表某個時間範圍,而範圍會影響選擇,便應盡可能直接放在選項旁或常駐說明中。把重要條款藏在細小問號後面,會令表格更難掃讀;觸控畫面更沒有滑鼠懸停可用。提示浮層適合放簡短補充解釋,卻不宜成為了解重要條件的唯一途徑。設計重點是顧客在哪裏找到答案,而非問號圖示是否漂亮。

逐句檢查提示文字,問自己:顧客完全沒有打開它,會發生甚麼事?若因此可能選錯價錢、日期、文件類別或同意內容,就把說明移到正常頁面流程。若只是補充陌生欄位名稱的意思,應先把名稱寫清楚,再讓提示提供可選的細節。較長指示、連結或操作不適合塞進細小工具提示;應使用可持續顯示的展開區域或其他合適介面。W3C 的工具提示模式明確指出提示本身不接收焦點;含可聚焦元素的內容應視為另一類浮層,例如非模態對話框。

讓暫時顯示的內容可控制

WCAG 2.2 的 1.4.13 準則處理因滑鼠懸停或鍵盤焦點而出現、其後又隱藏的附加內容。對屬於其範圍而由網站控制的內容,若遮蓋其他內容,使用者應可在不移動滑鼠或焦點下關閉;若由懸停觸發,游標應可移進內容而不令它消失;內容亦應維持到觸發條件解除、使用者關閉或資訊失效。這是三項不同測試。游標越過一點空隙便關閉的提示,難以用滑鼠閱讀;蓋住下個欄位卻無法關閉,會妨礙填表;按計時器消失,則可能令閱讀較慢的人看不完。

瀏覽器自行控制的 title 提示有準則例外,但不代表應依賴它傳達重要資訊。W3C 關於可存取名稱與描述的指引指出,HTML title 屬性對部分使用者可能不可用,尤其是沒有滑鼠而不用屏幕閱讀器的有視力顧客。原生提示在不同裝置表現各異,文字與顯示時機也難以控制。重要表格指示應以可見文字或經設計的說明控制項呈現。若建立自訂懸停或焦點內容,就要在真正頁面測試上述三項條件,包括放大瀏覽器或收窄畫面後浮層的位置。

分清欄位名稱、描述與浮層

顧客應在未打開額外說明前,已能聽懂控制項用途。輸入欄位要有可見名稱,例如「希望上門日期」;提示只補充描述,不應取代名稱。W3C 工具提示模式描述了以 aria-describedby 將觸發元素連到提示、焦點留在觸發元素,以及按 Escape 關閉提示。該模式目前仍在修訂,尚未取得工作小組共識,因此應作為需要實測的實作指引,而非合規證書。先使用合適的語義 HTML,再按需要連接描述,並在實際情境核對所支援屏幕閱讀器會讀出甚麼。

欄位旁的資訊圖示若是按鈕,便需要清楚名稱。「查看上門日期說明」比「問號」具體。點擊或觸碰後開啟的控制項,應可預期地顯示與收起內容,顧客無須懸停也能使用。純粹描述不必無故增加第二個 Tab 停靠點;反過來,也不可把裝飾用 span 變成可點擊圖示,卻沒有鍵盤操作。應先決定行為,再選擇元素及鍵盤處理。焦點標示須清楚可見,浮層亦不要離欄位太遠,以免使用者失去兩者關係。

以雙語預約表格實際演練

假設服務公司讓顧客選一般預約或緊急上門,緊急服務可能另有收費,而提示浮層只解釋公司會如何聯絡顧客確認是否有空檔。收費差異必須放在選項旁,不能只留在浮層。若表格亦有清楚確認步驟,簡短聯絡方式說明可作為補充提示。英文可直接說明稍後如何聯絡;繁體中文應採用本地服務團隊實際使用的說法,不要機械翻譯 callback。請職員核對兩個版本描述的是同一個真實流程,亦沒有憑空保證某時段一定可預約。

以滑鼠由圖示移向浮層、以鍵盤 Tab 到觸發位置再按 Escape,以及在觸控畫面開關說明,分別測試。放大畫面、把焦點移到視窗邊緣,以及讓浮層與其他內容重疊時都要重做。使用放大功能的人可能慢慢把游標沿文字移動;閱讀期間內容不應突然消失。若焦點離開,浮層也不應孤零零地蓋住表格。若選擇點擊後保持展開的模式,就要明確定義如何關閉,以及按鈕是否反映展開狀態。記錄所選互動方式,使各表格的同類元件行為一致。

訂明發佈前的通過條件

請內容負責人逐句標明提示屬必要條件還是補充資料;必要條件要移到正常文字。設計人員應提供窄畫面佈局,確保浮層可讀,又不妨礙滑鼠移動。開發人員應示範實際鍵盤順序、Escape 行為、描述關聯及觸控操作。然後用真實較長的英文和中文名稱測試。通過條件不是掃描工具找到某個 ARIA 屬性,而是顧客能發現、閱讀、關閉說明,再繼續填寫,不會遺失輸入內容。

最後,在完全不依賴浮層的情況下檢查頁面:顧客是否仍能明白重要收費及資格規則?如果不能,就要修正資訊安排。保留一組精簡回歸案例,涵蓋游標移動、焦點、Escape、觸控、放大與屏幕閱讀器輸出。共用表格元件一有改動便重測。好的提示浮層是在特定步驟減少疑惑,不應變成收藏重要商業條款的暗格,也不能用來補救本來就含糊的欄位名稱。

服務改動時保持說明準確

即使浮層在技術上可供使用,內容過時仍會誤導顧客。每句提示都應有負責人,並連到它解釋的實際規則。預約截止時間、服務地區或所需文件一旦改動,欄位可見文字和補充提示要一起更新。發佈時測試舊狀態與新狀態;同一共用元件可能在多張表格出現,但資格規則略有不同。只寫「更多資訊」卻解釋錯誤產品的提示,比沒有提示更糟,因為它讓顧客對錯誤答案產生信心。可建立內容清單,記錄欄位、真實規則、英文用字、中文用字及核對規則的日期。這是實用編輯工具,不代表有外部機構批准設計。

如果說明需要幾段文字,先比較其他方式,再決定是否建立複雜浮層。放在欄位下方的簡短行內說明,可能更容易閱讀及本地化;有清楚名稱、打開後可保持顯示的展開區域,則適合較長的補充指引。選擇取決於顧客作答前是否必須看到內容、內容是否包含操作,以及放大畫面時會否蓋住其他控制項。請測試者在未被告知提示位置下完成表格,觀察他們能否發現說明、資訊會否改變答案,以及能否返回欄位。這種實際流程觀察,比單獨審視浮層外觀更有用。

進行前先確認

  • 重要收費與條件毋須打開提示亦看得到。
  • 懸停、鍵盤焦點、Escape 及觸控流程均支援兩種語言。
  • 放大後浮層仍可閱讀,並可在需要時關閉。

資料來源及延伸閱讀