先辨認圖片工具要求甚麼手勢

顧客放大產品圖,可能是要看插頭、衣物縫線或印在包裝上的規格。若自家圖片檢視器只容許雙指捏合放大,或必須沿準確水平路徑滑動才能換圖,有些人就無法看清細節。WCAG 2.2 成功準則 2.5.1 要求:用多點或按指定路徑手勢操作的功能,除非手勢本身屬必要,否則也要能以不依賴路徑的單一指標操作。這針對網站內容自行解讀的手勢,不是要求商戶改變瀏覽器或作業系統手勢。先列清楚自家工具實際實作了哪些動作。

多點手勢同時用多於一個接觸點,例如兩指向外展開放大。路徑手勢則要求指標沿某種軌跡移動,例如在照片上向左快速滑過才顯示下一張。W3C 說明把這些方式與單次點按、點擊等毋須描出路徑的操作區分。只用拖曳取代滑動,也不是穩妥捷徑:WCAG 2.2 另有拖曳動作要求,因此 W3C 明確指出替代方法不能只依賴拖曳。檢查時應看每個手勢產生甚麼功能結果,而不只看手勢名稱。

為圖片工具列功能清單:下一張、上一張、放大、縮小、回復原尺寸、在放大圖中移動、開關全畫面,以及閱讀圖片描述。自家網站未必有齊這些功能,不必為不存在的功能亂加控制項。若有三維旋轉圖,也要列出旋轉及重設。對每項已有動作,問一個可見控制項能否讓顧客單次點按或點擊而取得同樣有用的結果。若替代方法只會換縮圖,卻仍看不到影響購買決定的細節,便未完成工作。

為相同結果提供直接控制

多張照片的檢視器,可在現時圖片附近放「上一張圖片」及「下一張圖片」按鈕,名稱清楚。W3C 的 G215 技巧就是用這方式,讓原本靠水平滑動的內容序列也能單點操作。第一張與最後一張時,按鈕狀態要符合實際情況;不要讓看似可按的按鈕毫無反應。顯示目前第幾張,並用有用描述說明照片內容。若有不同角度,顧客應知道下一張是背面、細節特寫或尺寸圖,而不是只能從細小圓點猜測。

放大功能可用標明「放大」和「縮小」的按鈕,取代雙指捏合。如放大後不易退出,應加入重設。測試只用一個指標的人放大後,能否檢視每個重要區域。若移動放大視窗只能靠沿路徑拖曳,可提供分段方向控制、可選區域清單,或其他可單點操作而到達同一細節的方法。介面形式可不同,但替代操作必須真正有效,不能只作裝飾。亦要檢查放大層不會遮住購買控制項,或令使用者困在全畫面。

不要因為雙擊只用一隻手指,就假設它是唯一合適替代操作。部分使用者仍可能難以完成,也可能與其他動作混淆。可見且有名稱的控制項較易發現和測試。控制項宜放在所控制圖片附近,點按範圍要合理,亦不能遮去產品重要細節。目標尺寸和點按取消另有準則;有按鈕不等於整個介面已無障礙。本文的編輯決定較集中:每項由網站自行實作的複雜手勢功能,都須有真正不靠路徑、可單點操作的路線。

產品檢視器有時把部分移動交給瀏覽器,另一些則由網站自行實作,兩者要分清。一般頁面捲動或瀏覽器本身的縮放,不屬本文所說由內容解讀的手勢;檢視器自行實作的捏合放大或滑動換圖則屬此範圍。可問:操作後是哪段程式改變產品圖片?若答案是商戶檢視器或外掛,就要替該功能配上單點控制。這樣可避免團隊忙於替換作業系統原有手勢,卻忽略真正令顧客看不到下一張產品圖的自訂滑動。

用實際選購情境驗證

假設商戶售賣桌燈,有正面、背面插口、開關及尺寸四張照片。顧客要確認背面插口是否適合家中位置;滑動可換圖,雙指放大才看清插口旁標示。合用的替代方式包括上一張/下一張按鈕、目前圖片名稱、放大/縮小,以及放大後可到達插口區域的方法。顧客應只靠單次點擊或點按就認出背面圖並看清所需細節。這是介面設計示例,並非實測顧客行為,也不是某具體產品的規格聲稱。

再測反面情況。若測試環境容許,可停用觸控手勢;否則刻意只用一個指標,而且不拖曳。能否由第一張走到最後一張、放大後回復正常、查看靠近各邊緣的細節、關閉檢視器後回到原來產品位置?窄屏手機也要重做,因控制項可能在流動版被收起,只剩滑動。滑鼠同樣要試,因單點替代方法不應只限觸控螢幕。逐項記錄真正動作與結果,不要只勾選「畫面上有按鈕」。

比較的應是可取得的資訊,不只是操作動作。若捏合放大可看到序號或材質表面,而不用手勢的版本看不到,對需要該細節的顧客而言,兩條路並不等價。有時加入一張高解像度的細節照片及清楚說明,比設計複雜的平移系統更合適,也有助選購。描述必須符合真正拍攝的貨品,不能在圖片說明中虛構功能或兼容性。若圖片只作裝飾,影響購買的資料仍應在頁面文字中提供。

驗收結果要以顧客能否作購買決定來寫。若產品是否兼容取決於插頭,測試通過的意思是:使用者可用單點操作選到插頭圖片、放大或以其他方式查看相關區域、從文字讀到必要規格,然後返回購買頁。如果按鈕齊全,但圖片解像度低到無法核實插頭,問題便在內容本身。若重要資料只藏在圖片裏,而且難以可靠辨認,應根據已核實的產品規格加上準確文字,不應叫客戶自行從像素猜測。

按產品範本測試並維護

先檢查共用圖片範本,再抽樣圖片數目、長闊比例和細節位置不同的產品。只有一張圖的貨品不應出現沒有意義的上一張/下一張控制。多圖貨品則要顯示目前位置。直幅和橫幅圖片會影響按鈕擺位,以及放大細節能否到達。佈景主題、圖片供應服務或手機版斷點改動後,都要再測。範本通過不代表每件貨品的實際圖片次序和描述都有用,因此驗收要包含若干真實產品頁。

若檢視器來自網站主題或商店外掛,向維護者查明它自行解讀哪些手勢,以及哪些單點控制可達成相同結果。不要只收一張功能清單;要在實際部署的版本走完整旅程。若外掛無法讓人不用手勢查看重要細節,可考慮更換互動方式,或以一般圖片加文字呈現細節。這既是程式決定,也是產品內容決定:客戶需要足夠證據選對貨品,商戶則需要可長期維持的呈現方法。

上線前,找一位不熟悉檢視器的同事,只以單指或逐次滑鼠點擊檢查真正產品。給他具體任務,例如找插口或查看縫線,觀察他能否到達相關圖片,之後返回產品頁。按功能記錄失敗:換圖、放大、到達某區域,或退出。修正缺少的路線後,再做同一任務。這是本地驗收檢查,不是效能數據聲稱;它顯示替代操作是否真的支援顧客選購,而不只是清單上有控制項。

進行前先確認

  • 每項網站自行實作的捏合或滑動功能,是否都有可用的單點、非路徑替代操作?
  • 顧客能否看見同樣重要的產品細節並離開檢視器?
  • 有否在手機及桌面寬度測試真實產品頁?

資料來源及延伸閱讀