開發紀錄
語言建議可以提醒,不必替讀者決定跳頁
從本站的英日版本提示,區分真實翻譯、瀏覽器偏好、非 modal 對話框與暫時關閉紀錄,也檢查不強制跳頁是否等於不移動焦點。
- 多語網站
- HTML
- 狀態設計
- 漸進增強
讀者用日文瀏覽器打開一篇繁中文章,可能是從搜尋、朋友分享或某個特定段落進來。瀏覽器偏好可以提醒網站提供另一種版本,卻不能證明這次一定想離開原文。
本站採用的是語言建議:先留在原來的頁面,提供真實的英文或日文連結,讓讀者自己選擇。2026 年 10 月 26 日,我核對了提示的出現條件、關閉紀錄與實際焦點;其中「沒有自動跳頁」和「完全不打斷操作」,並不是同一件事。
先確認真的有另一種版本
建議元件只在繁中頁面、沒有被停用,而且至少有一個英日目的地時輸出。它不根據標題猜文章網址,也不替還沒有翻譯的文章製造入口。
固定頁的目的地來自既有語言路由;文章頁則把實際符合公開條件的翻譯集合傳進來。即使元件已經輸出,腳本還要找到本次建議語言的那一個連結,才會顯示提示。
例如只有英文目的地、瀏覽器偏好卻指向日文時,目前不會再自行改推英文。這是程式條件能確認的分支,不是已經替所有翻譯缺口建立完整的語言協商。
這個順序延續了沒有翻譯,就不應該生成一個假的語言頁的原則:提示是實際內容的入口,不是內容存在的證明。
目前只讀第一個偏好,不做完整語言比對
navigator.languages 提供依偏好排序的語言標籤,最偏好的語言排在前面。[4] 本站取第一項,沒有值時才讀 navigator.language。
接下來的規則很簡單:日文開頭的標籤建議日文,中文開頭的不顯示建議,其他語言則嘗試建議英文。它沒有遍歷整份偏好清單,尋找網站第一個能提供的語言。
我在獨立瀏覽器頁面設定測試用的偏好值,觀察到這些結果:
| 測試偏好 | 繁中頁面的結果 |
|---|---|
| 第一項是日文,後面有英文 | 顯示日文建議 |
| 第一項是中文,後面有英文 | 不開啟建議 |
| 第一項是英文 | 顯示英文建議 |
| 第一項是德文,第二項才是日文 | 仍使用英文建議規則 |
這些是瀏覽器內的測試設定,不是讀者研究或真實裝置的語言分布。它們也說明目前規則的限制:英文是實作選擇的退路,不是程式已經證明讀者更偏好英文。
非 modal,仍然可能改變焦點
提示使用原生 dialog 的 show(),不是 showModal()。本機觀察時,它已開啟,但不符合 :modal;原來的繁中網址也沒有改變。
這讓提示不必靠模態狀態阻止讀者繼續操作文件。不過,HTML 的 show() 流程仍會執行 dialog 的焦點步驟。[2] 不能因為背景沒有被鎖住,就宣稱焦點完全不受影響。
實際顯示日文提示後,焦點落在建議的日文連結。這是一個需要保留的取捨:沒有強制換頁,卻仍可能把鍵盤使用者帶離原本的閱讀位置。如果目標是連焦點都不中斷,就需要重新評估提示的呈現方式,而不只是把 modal 改成非 modal。
關閉也要看實際路徑。這次我讓「Not now」或對應日文按鈕取得焦點,再用 Enter 關閉,沒有用直接呼叫程式函式代替操作。元件雖然監聽 cancel,這份觀察沒有把它擴大成所有 Escape 或外部點擊路徑都已驗收。
「這次先不要」不是永久語言設定
關閉提示時,腳本以建議語言分開記錄拒絕狀態,放在 sessionStorage,而不是儲存一個永久的「目前語言」。
sessionStorage 的範圍和 origin、頂層分頁的 page session 有關,重新載入也能保留;它不是跨裝置的帳號偏好。[5] 本機關閉日文建議後,在同一分頁重新載入,提示沒有再開啟。
讀寫儲存資料也可能失敗,所以這些操作有例外處理。我另外模擬無法取得 session storage 的情境,關閉按鈕仍然能收掉提示;但重新載入後,因為沒有成功保存拒絕狀態,建議會再次出現。
這個結果不能寫成「使用者關掉一次,以後都不會看到」。目前保證的強度只到:儲存可用時,在這個頁面工作階段記住對該語言建議的關閉;儲存不可用時,當下仍能關閉。
目的地存在,也要看帶過去的是哪個狀態
建議連結建立時,會複製當下的 query 和 hash。例如從繁中作品頁的設計分類接受英文建議,目的地會保留那一組參數與分類,而不是只剩英文作品頁的路徑。
我用鍵盤啟用實際英文連結後,抵達了英文作品頁,原本的 query、設計分類 hash 與頁面語言都能對上。這是一次具體路徑的觀察,不代表其他頁面上的每個 fragment 都有相同的翻譯目標。
複製也只發生在提示初始化時。若提示留著、頁內狀態後來改變,這段程式沒有監聽每一次變化來更新目的地。初始化的快照和持續同步,需要分開設計。
沒有建議,仍然要留著語言入口
英文與日文頁本身不輸出這個建議;沒有 JavaScript 時,繁中頁裡的提示維持隱藏。主導覽的原生語言連結仍在,讀者不必先成功開啟提示,才能找到其他版本。
這讓語言建議維持輔助角色:它可以依瀏覽器訊號提供入口,但公開頁面和導覽不依賴這個提示才能成立。偏好判斷、真實翻譯、焦點與拒絕紀錄各有責任,不能用「有支援多語」一句話一起帶過。
這次核對不包含實體手機、螢幕閱讀器、跨瀏覽器或所有儲存政策;也沒有用點擊率或停留時間證明這種提示更有效。是否保留開啟時移動焦點的安排,仍然是一個需要由實際閱讀情境決定的介面選擇。
Sources
[2] https://html.spec.whatwg.org/multipage/interactive-elements.html — WHATWG HTML: Interactive elements [4] https://developer.mozilla.org/en-US/docs/Web/API/Navigator/languages — MDN: Navigator languages [5] https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage — MDN: Window sessionStorage