把動態效果視為顧客操作問題

動態效果可令目錄顯得活潑,但也可能妨礙顧客比較產品,甚至引起不適。決策不是簡單判斷網頁有沒有動畫,而是問動態是否傳達必要資訊、移除後能否完成任務,以及它是自動開始,還是由捲動、開啟篩選等操作觸發。輪播在顧客閱讀價格時自行切換,與顯示訂單仍在處理的小型進度提示,問題並不相同。先列出真實顧客路徑:尋找產品、查看選項、加入購物籃、提交表格及理解結果。

W3C 的 WCAG 2.2 把兩項相關準則分開。2.2.2「暫停、停止、隱藏」屬 A 級,處理符合特定條件的自動開始移動、閃動、捲動或更新內容;細節條件不能省略。2.3.3「互動引起的動畫」屬 AAA 級,處理可關閉的非必要互動動態。企業不應把 AAA 準則直接說成法律要求,也不能因通過其中一項便宣稱整頁無障礙。分清準則有助訂優先次序和如實描述成果;實際設計亦可為顧客方便而超越最低要求。

按觸發方式和任務點算動態

逐一走訪頁面範本,記錄甚麼東西會移動、由甚麼觸發、持續多久、會否重複、佔畫面多少,以及有否資訊因此消失。清單可包括選單、側欄、產品放大圖、載入骨架、視差背景、輪播、短暫通知及成功畫面。桌面與手機都要看,因在大螢幕不顯眼的動畫,可能佔滿手機畫面。亦要測試錯誤路徑,例如表格失敗時欄位突然搖動或整頁跳走。嵌入式元件和影片由供應商提供,也會直接影響顧客。

每項效果都應作出保留、替代或移除的決定。若產品卡片移動只為裝飾,靜態版本仍須呈現名稱、圖片、價格和操作鍵。若載入提示用來說明工作仍在進行,減少動態時應保留穩定的文字狀態。若滑入效果提示側欄已打開,即使沒有滑動,亦要透過位置、標籤、焦點及內容清楚顯示開啟狀態。不要把移動改成閃爍。替代方案須保留資訊與控制,不可只是停止 CSS 動畫,卻讓內容仍被隱藏或按鈕無反應。

尊重系統偏好,必要時提供控制

CSS 的 prefers-reduced-motion 媒體特性可偵測使用者在系統或瀏覽器設定的減少非必要動態偏好。MDN 指出 reduce 表示使用者提出減少動態的要求;no-preference 只表示沒有已知偏好,並非要求最多動畫。較穩健的做法是先建立清晰的靜態介面,只在有助理解的地方為沒有減少偏好的情況加入動態。既有頁面可用 reduce 規則抑制移動,但須檢查取消轉場後哪些內容仍可見。由 JavaScript 或外部元件啟動的動畫要另行處理,CSS 覆蓋不會自動停止所有程式動態。

W3C 對 2.3.3 的說明容許不同方法:避免不必要動態、提供關閉控制,或尊重使用者的減少動態設定。共用裝置的使用者可能不能改系統偏好,網站層面的控制便有幫助。控制應在大型效果開始前容易找到,清楚標示目前狀態,並在可行時跨頁維持選擇。不能要求使用者先忍受整頁視差效果,才找到開關。頁面已開啟時更改偏好,不應讓內容停在轉場半途,也不能撤銷已完成的顧客操作。

另行核對自動開始內容的條件

對自動移動、閃動或捲動的資訊,WCAG 2.2.2 在它自動開始、超過五秒、並與其他內容同時呈現等條件成立時適用;若動態屬必要部分則另論。頁面須提供暫停、停止或隱藏的方法。與其他內容同時呈現的自動更新資訊亦有控制要求,但沒有相同的五秒門檻。條件必須準確理解,不可概括成「所有超過五秒動畫都被禁止」。顧客閱讀產品時自行切換的推廣輪播,宜有暫停控制或改成靜態設計;不可互動的載入階段則須另作分析。

暫停按鈕必須讓顧客在停止動態後仍可使用頁面。W3C 指出,若元件只在取得焦點時停止,焦點移走便重啟,顧客無法繼續操作而不受干擾,未必符合目的。自動輪播還要有可閱讀內容及清楚的目前狀態;停止移動不應抹掉正在顯示的優惠。對時效資料串流,暫停後畫面可能過時,恢復時須清楚提示。這些問題應與按下或捲動後觸發的動態分開判斷,後者涉及互動準則及更廣泛的良好設計。

以產品頁作實際決策示例

假設網店產品頁的照片隨指標移動而放大、推薦產品隨捲動滑入、選擇規格後送貨側欄飛入。團隊先檢查沒有這些效果時,顧客能否辨識選定規格和送貨條款。對確需細看的照片保留由顧客主動開啟的靜態放大功能,移除捲動滑入,並在選擇減少動態時讓側欄立即出現、焦點正確移動且標題清晰。價格和存貨資料維持在易讀位置。這是假設設計練習,並非已提升轉換率或符合全部無障礙要求的成果聲明。

再用鍵盤與觸控螢幕測試同頁。只能用指標放大的功能可能另有無障礙問題,單是停動畫不足以解決。確認側欄出現時焦點不會意外跳走、屏幕閱讀器可取得適當標籤,以及加入購物籃的確認不只靠移動傳達。減少動態開與關都要測,再在頁面開啟期間改變設定。若程式只記住載入當刻的偏好,須決定是否即時回應,或明確提示重新載入。記錄實際觀察,而不只保存設計意圖。

建立可重複的小型測試計劃

驗收表應列出頁面、觸發操作、預期靜態結果、一般模式結果,以及每種裝置的實際觀察。如網站有使用,至少涵蓋一個自動輪播、一個互動轉場、一個載入狀態和一個嵌入式元件。W3C 的 C39 技術建議先啟用減少動態,再檢查每項由互動觸發的動畫是否必要或已被抑制。這是聚焦測試,不是完整無障礙審核。亦應由真人試讀並完成任務,確保畫面不急促;重點是顧客能否使用,而不是樣式表中有沒有媒體查詢。

把減少動態檢查納入日常設計及發布流程。新活動橫額、產品相簿、聊天元件或確認動畫,可能在初次審核後再次加入移動效果。為每項保留的效果指定負責人、記下用途,元件或供應商改變時重測。客服同事應懂得啟用偏好並重走顧客路徑,以重現投訴。若問題來自外部元件,記錄供應商回應,修正前為顧客提供可行替代方法。這樣承諾才會落在持續的服務體驗,而非一次性的清單。

進行前先確認

  • 啟用減少動態後,顧客能否完成相同任務?
  • 是否按不同條件分別測試自動及互動觸發的動態?
  • 關閉動態後,內容、焦點及狀態是否仍清晰?

資料來源及延伸閱讀