先從顧客任務出發
顧客由搜尋結果進入產品頁,繼而查看支援資料,再開始申請,不應要逐一讀完所有按鈕才知道目前頁面用途。瀏覽器分頁名稱、首個可見標題及頁面結構,應傳達一致的意思。漂亮的橫幅並不能代替這些線索;當多個分頁都只顯示品牌名稱,或屏幕閱讀器在內容之前先讀出頁面資訊,問題尤其明顯。先畫出一條真實顧客路徑,為每頁寫下一項明確任務,再檢查名稱是否真的能區分頁面。
W3C 對 WCAG 2.4.2 的說明指出,頁面標題要描述該頁主題或用途。這是編輯判斷,不只是把 HTML 欄位填滿。「聯絡」可能指銷售查詢、訂單支援或分店地址;「申請」也可能是未填表格、核對資料或提交成功頁。宜先寫清楚能分辨該頁的任務,再按需要附上公司名稱。雙語網站應讓各語言頁使用相應語言的標題;繁體中文表格若只在分頁顯示英文名稱,即使內文已翻譯,顧客仍較難辨認。
頁面標題與主要可見標題各有作用,不能互相取代。前者讓顧客在瀏覽器分頁、歷史紀錄及輔助工具的報讀中識別整頁;後者讓剛到達頁面的顧客確認連結帶他到正確內容。兩者字眼可以稍有不同,例如分頁寫「核對訂單|商店名稱」,頁面寫「付款前核對訂單」,但必須描述同一狀態。若分頁顯示「付款失敗」,內文卻只寫「歡迎」,顧客在關鍵時刻會收到互相矛盾的訊息。
先確定一個有用的頁面主標題,再安排各段小標題。W3C 的頁面結構教學指出,標題會表達段落之間的關係。標題不只是放大的字;屏幕閱讀器用戶可用它快速瀏覽,其他讀者也可藉它理解內容脈絡。小標題應指出內容或決定,例如「送貨方式」、「提交後會發生甚麼」,避免只有「更多資訊」等空泛文字。層級要合乎邏輯;卡片文字的視覺大小可由樣式控制,毋須把次要內容冒充為整頁主標題。
讓頁面區域可供導覽
W3C 的頁面區域教學建議用 HTML 的 main 標記主要內容,以 nav 標記導覽選單,讓輔助工具可沿結構略過每頁重複的網站元素。先找出真正隨頁面改變的核心內容。例如產品頁可有網站頁首、主要導覽、包含產品決策資訊的主區域、補充庫存或支援資料,以及頁尾。不要留下空的主區域,卻把產品資料放在外面;彈出視窗或嵌入元件亦不應意外產生另一個與之競爭的主區域。
網站可以有多於一個導覽區域,但若每個都沒有可區分的名稱,屏幕閱讀器顯示的區域清單便難用。應按用途為不同導覽集合命名,例如「主要導覽」和「本頁目錄」;名稱描述用途即可,毋須反覆加上「導覽」二字。若可見標題同時用作區域名稱,兩者意思應一致。頁尾的政策連結可能很有用,但不必把每組連結都變成新地標。目標是建立少而穩定、與畫面實際內容相符的頁面地圖。
可用一條示例購物路徑檢驗設計:買家開啟產品頁、查送貨資料,再進入訂單核對。產品頁的分頁名稱包含產品與商店,主標題指向產品,送貨段落則說明該產品適用的安排。訂單核對頁的分頁與主標題都明示目前是核對階段,主區域包含商品、價格、送貨及最終操作。提交後的確認頁再使用新的標題與主標題。這是示範如何編排內容,不是某商店的實際個案或成效數據。
動態頁面尤其要留意:路由可能在沒有完整重新載入的情況下改變。顧客由目錄結果進入產品頁,或由核對訂單進入確認頁時,文件標題及主標題應隨內容更新。單是改動標題,並不保證所有輔助工具都會自動報讀新畫面;要在實際支援的瀏覽器與屏幕閱讀器中檢查路由轉換、焦點位置及閱讀順序。若前端篩選令整頁用途實質改變,而非只更新小部分內容,也應重新評估頁面識別方式。
檢查及維護頁面地圖
建立一張精簡頁面清單,列出網址或路由、顧客任務、兩種語言的文件標題、兩種語言的可見主標題,以及主區域包含甚麼。抽樣時要涵蓋產品頁、沒有結果、驗證錯誤、資料核對與提交確認等狀態,不能只看最順利的路徑。留意移除品牌名稱後仍完全相同的分頁標題,也要找出提交表格或切換路由後,標題還停留在舊狀態的頁面。文案與範本須一同修正;單靠清單不會改變實際輸出。
測試時不要只依賴視覺版面。把同一路徑的幾頁分別開在分頁,請同事單看分頁名稱辨認;再以團隊支援的輔助工具按標題及地標導覽。清單應以合理次序呈現頁面用途、主要內容和有用段落。用鍵盤逐項前進,觀察是否能越過重複導覽到達主要任務。自動工具可以找出缺少標記的情況,但只有人讀過實際字句,才能判斷它們是否真正區分不同決定。
同一套檢查須在繁體中文介面重做。逐字翻譯雖然填滿欄位,在本地購物流程卻可能含糊或不自然。「已提交訂單」、「已收到訂單」和「付款完成」對應的系統狀態不同,不能互換作承諾。請只看中文介面的同事閱讀標題,不提供英文對照;若他們無法判斷訂單是否完成或下一步是甚麼,就應在推出前修改。同時避免把顧客姓名、訂單明細等私人資料寫進可能出現在瀏覽紀錄、截圖或共享畫面的分頁標題。
應在範本層面指定負責人,免得新活動或新服務沿用「頁面」之類的通用名稱。內容負責人寫清顧客任務;開發人員確保每個狀態正確輸出文件標題、主標題及區域結構;審閱者在接近正式環境的預覽中檢查兩種語言。若舊嵌入頁暫時不能控制標題,要記下例外與修復負責人。路由重新命名或結帳階段改動時再檢視清單。推出前的核心問題是:顧客能否從視覺與結構兩條途徑,識別目前頁面並到達主要任務?
另一個有用的例外檢查是同時有多項任務的帳戶總覽頁。分頁標題應識別「帳戶總覽」,而近期訂單、已存資料及支援操作則用清楚的小標題分開,不必把每項內容塞入瀏覽器標題。相反,只有一項用途的確認頁,應在分頁及主標題開首直接說明結果。若網站有常駐推廣橫幅,要確認它不會變成文件大綱的第一個標題;按標題導覽的用戶應先遇到頁面任務,再遇到可選的推廣資料。把這項要求寫進共用範本,可免同一錯誤在每個顧客頁重複。
推出前檢查
- 每條路由及狀態在兩種語言中都有獨特而真確的標題。
- 可見主標題與主區域指向同一任務。
- 鍵盤及輔助工具測試涵蓋錯誤與確認狀態。


