題干與適用場景
請設計一個支援日文假名、繁體中文注音與拼音的內容元件。你會如何組織 ruby 標記，處理多層注音、搜尋複製、CSS 不支援時的回退，並評估螢幕閱讀器與可及性風險？
W3C 於 2026 年 6 月 4 日發布 HTML Ruby Markup Extensions Candidate Recommendation Snapshot。該規範修訂 HTML 的 ruby 結構，恢復 rb 與 rtc 的相容地位，並定義基文、注音單元、注音容器與多層注音的結構語意。它不是自動翻譯元件，也沒有解決所有螢幕閱讀器朗讀策略，面試時要區分語意標記、版面樣式與輔助技術行為。
面試官考察點
面試官會關注你是否把基文與注音建模為結構化配對，是否能解釋交錯標記與表格標記的取捨，是否使用 CSS Ruby Layout 控制視覺呈現而非把讀音寫進圖片。也要涵蓋語言標註、搜尋與複製、沒有 Ruby 版面時的 rp 回退、SSR/水合一致性、XSS 安全與螢幕閱讀器測試邊界。
回答前需要釐清的問題
- 內容來源已提供基文與注音配對，還是元件需要自行切分與產生？
- 一個基文是否有多個語言或層級的注音，例如注音符號與拼音同時存在？
- 瀏覽器不支援 Ruby 版面時，產品希望內聯括號、隱藏注音還是保留原始結構？
- 搜尋結果、複製到剪貼簿與文字轉語音分別需要保留哪些內容？
- 內容是否允許使用者提交，是否需要清理 HTML、限制屬性與 CSP？
30 秒回答框架
「我先把基文、注音範圍與語言作為資料模型，再輸出語意化 ruby、rb、rt、rtc、rp 標記。單層注音用交錯結構，多字元與多層注音用明確容器或表格結構，避免只依賴瀏覽器隱式配對。CSS 負責 ruby 位置、字級與回退樣式；rp 提供不支援版面時的可見括號。搜尋與複製按產品語意保留基文，螢幕閱讀器用真實裝置與輔助技術測試，不承諾規範沒有定義的朗讀順序。所有使用者內容先清理再渲染。」
分步驟深入解答
1. 先定義注音資料模型
每個片段包含基文範圍、一個或多個注音範圍、語言標籤與展示策略。日文可用假名，繁體中文可用注音符號或拉丁拼音；同一基文可有多個 rtc 層，但要明確哪個是預設層。資料模型與渲染器分離，避免把字串切分規則散落在元件裡。
2. 選擇符合語意的標記
ruby 是整體容器，rb 表示基文單元，rt 表示注音文字，rtc 表示注音容器，rp 提供內聯回退內容。簡單情境可讓文字直接作為隱式基文單元，但複雜多字元配對應使用明確的 rb，讓 DOM、複製與後續版面更可預測。
3. 處理多字元與多層配對
逐字交錯適合簡單一對一注音；表格標記先列多個 rb，再列對應的 rt，更能表達複合詞與多層注音。多個連續 rt 可由 rtc 組織，不同語言的層級應在 rtc 或 rt 上設定 lang。不要用 CSS 偽元素承載實際讀音，因為搜尋、複製與輔助技術看不到可靠文字。
<ruby lang="zh-TW">
<rb>美</rb><rtc><rt>ㄇㄟˇ</rt></rtc>
<rtc lang="zh-Latn"><rt>měi</rt></rtc>
</ruby>4. 用 CSS 做版面漸進增強
HTML 提供結構，CSS Ruby Annotation Layout 控制 ruby-position、字級、行高與對齊。預設樣式要保證注音不會遮擋基文，也要允許使用者放大文字。瀏覽器不支援 Ruby 版面時，rp 可以顯示括號或其他內聯提示；不要依賴 display: none 隱藏所有注音而讓資訊消失。
5. 設計搜尋、複製與文字擷取
規範專門討論搜尋與複製互動，但實作仍需在真實瀏覽器驗證。定義複製策略：通常複製基文，必要時追加注音；搜尋應能找到基文與注音，不要因 DOM 被注音打斷而漏詞。伺服器索引可保存結構化基文與注音欄位，客戶端不要用正規表示式從已渲染 HTML 猜測配對。
6. 評估輔助技術與國際化
Ruby 常用於幫助兒童、非母語者與識字困難者，但不同螢幕閱讀器可能採用不同朗讀啟發式。提供正確的 lang，保留有意義的文字順序，並用螢幕閱讀器、鍵盤縮放與高對比度模式測試。不要聲稱僅靠規範就能解決文字轉語音；把已知差異與回退策略記錄在可及性說明中。
7. 做安全、效能與相容性校驗
使用者提交的基文與注音必須經過 HTML 清理與屬性允許清單，禁止腳本、事件屬性與危險 URL。SSR 輸出與客戶端水合應使用同一配對演算法，避免注音閃爍或文字重排。對長文件使用結構化節點與按需渲染，快取資料模型而不是不安全的 HTML 字串，並用 WPT 與目標瀏覽器矩陣驗證。
高品質示範回答
我會先定義基文範圍、注音層、語言與展示策略，再由渲染器輸出語意化 ruby 標記。簡單一對一注音使用交錯結構，多字元或多層注音使用明確的 rb 與 rtc，不同語言在對應層標註 lang。CSS Ruby Layout 只負責位置、字級與行高，rp 為不支援 Ruby 版面的瀏覽器提供內聯回退。複製策略預設保留基文，搜尋同時索引基文與注音，具體行為在真實瀏覽器中測試。由於輔助技術朗讀沒有被這份規範完全統一，我會測試螢幕閱讀器、鍵盤、縮放與高對比度，並記錄差異與回退。所有輸入先清理，SSR 與客戶端共用同一資料模型與配對演算法，最後用 WPT 與瀏覽器矩陣驗證結構、版面、搜尋、複製與安全邊界。
常見錯誤
- 只用 CSS 偽元素顯示讀音 → 搜尋與輔助技術缺少文字 → 用語意化 Ruby 標記表達內容。
- 把每個字硬編碼成交錯節點 → 複合詞與多層注音難以維護 → 用結構化配對與
rtc容器。 - 把
rp當成必要視覺括號 → 支援版面的瀏覽器出現重複內容 → 只在回退情境顯示。 - 忽略
lang→ 朗讀與字型選擇錯誤 → 在基文與注音層標註準確語言。 - 承諾所有螢幕閱讀器順序一致 → 規範沒有定義完整 TTS 行為 → 做裝置測試並記錄差異。
- 直接渲染使用者 HTML → 產生腳本注入 → 清理元素、屬性與 URL。
追問及應對
什麼時候用 rb，什麼時候依賴隱式基文？
簡單單層注音可依賴隱式基文，但複合詞、表格標記與需要穩定 DOM 的應用應明確使用 rb，讓配對、複製與除錯更清楚。
同一基文有假名與羅馬字怎麼辦？
用多個 rtc 層或明確的注音容器，並在每層標註 lang；產品要提供預設層與切換策略，不讓 CSS 選擇承擔語意決定。
不支援 Ruby 版面時如何回退？
保留文字結構，用 rp 顯示括號或內聯分隔，確保基文與注音仍可讀；不要隱藏實際內容或產生一張不可選擇的圖片。
如何定義複製行為？
先按產品目標決定複製基文、基文加注音或兩者結構化匯出，再在 Chromium、Firefox、Safari 與行動端驗證；不要假設 DOM 順序就是使用者期望的字串。
如何證明注音沒有破壞可及性？
檢查語言標籤、焦點順序、縮放、鍵盤操作與螢幕閱讀器輸出，涵蓋無注音、單層、多層與回退模式，並公開記錄已知輔助技術差異。