介面文案無障礙產品設計

「點此了解更多」到底會去哪裡?把連結文字寫清楚

··閱讀約 3 分鐘

假設你正在找一場講座的報名方式。活動頁上有三張卡片:活動介紹、交通資訊、報名須知。每張卡片底下都寫「了解更多」。你想確認能不能現場報名,卻得先猜,答案究竟藏在哪一張裡。

把第三個連結改成「查看報名方式與截止時間」,事情就具體了。讀者還沒離開頁面,已經知道這一步值不值得走。連結上的幾個字,其實是目的地抵達之前,唯一能先交給讀者的說明。

先寫出讀者會得到什麼

寫連結時,可以先把「點此」「前往」「了解更多」拿掉,看看剩下什麼。如果什麼都沒剩,通常還沒寫到目的地。這是一個編輯上的檢查方法,不是判定網站是否符合無障礙規範的測試。

以下都是假設情境。修改時要先打開目標頁,確認它真的提供這些內容;不能為了讓文字更吸引人,就替目的地加上原本沒有的答案。

原本的文字確認目的地後的改法
了解更多查看報名方式與截止時間
下載下載空白申請表(PDF)
參考資料W3C 的連結用途說明
同一個動作,補上不同的目的地

這幾個改法沒有把句子寫得比較熱鬧,只是補上讀者要做選擇時缺的資訊。尤其「下載」後面接的是什麼,差別很大:可編輯的空白表單、填好的範例、只能閱讀的說明文件,是三種不同需求。

「了解更多」並沒有被一律禁止

W3C 對 WCAG 2.2 成功準則 2.4.4 的說明,允許透過連結文字本身,或文字加上可由程式判定的上下文,辨認連結用途。這項準則屬於 A 等級。文件也提到,輔助科技可以將頁面上的連結整理成清單,讓使用者從中選擇。

W3C:2.4.4 連結用途與上下文

因此,不能看到「了解更多」就直接判定不合格。但設計稿上看起來靠近的標題,並不等於已經建立足夠的程式關聯。評估時還得看實際標記與上下文,不能只看截圖。

另一項 2.4.9 屬於 AAA 等級,要求有機制讓使用者只憑連結文字就能辨認用途,並保留一般使用者也無法判定用途的例外。不要把兩個等級混成「所有連結都必須脫離上下文成立」這一句話。

W3C:2.4.9 僅由連結文字辨認用途

寫得清楚,也要容許它短

如果每個連結都補成完整句子,頁面也可能變得難讀。假設一份報告同時提供三種格式,前面已經有清楚的報告名稱與適當的結構,後面標「PDF」「HTML」「音訊版」就有辨識價值。不必把報告全名複製三遍。

相反地,如果同一區放了去年的報告與今年的報告,年份就不能省。判斷該留哪些字,可以看這一頁有哪些選項需要被分開:同一份文件的不同格式,留下格式;不同年度的同類文件,留下年度。

也別把所有說明都塞進可點擊的文字裡。像是文件大小、資料更新日期、適用對象,可以視閱讀需要放在旁邊。連結負責讓人認出目的地,附近的文字再交代其他條件。

最後一次檢查,要真的走到目的地

改完之後,把頁面裡的連結文字另外抄成一張清單。哪些項目看起來一模一樣,卻會去不同地方?哪些寫了「報名」,打開後卻只是活動介紹?先從這些地方改。單獨列出文字是找問題的起點,仍不能取代完整的無障礙檢查。

接著逐一打開連結,比對落地頁的標題與內容。如果連結寫「下載空白申請表」,目的地卻要再翻兩頁才能找到檔案,可以修改入口,也可以把文字改成「查看申請文件」。選哪一個,取決於你能不能調整流程。

讀者按下「查看報名方式與截止時間」之後,下一頁就該讓他找到這兩件事。這幾個字已經替網站答應了。

參考資料