2026 年靜態 HTML 用 inert 凍結背景互動：模態堆疊、Safari WebKit 焦點與雲端 Mac mini 驗收

活動頁、文件庫與品牌官網在 2026 年仍大量倚賴靜態 HTML：快取命中高、CDN 成本可控、發佈流程單純。但模態一打開，鍵盤使用者仍能 Tab 到頁尾連結，螢幕閱讀器也可能讀到背景標題——這不是只靠半透明遮罩能解的題。inert 能把整棵子樹標成不可互動：指標事件穿透、焦點無法進入，同時內容仍看得見，比手動把每個連結設成 tabindex="-1" 穩得多。

本文把 inert 與 Popover API 的層疊實務、@layer 級聯策略與 多頁 View Transitions 串起：先釐清語意邊界，再談 Safari WebKit 的走查細節，最後用清單把風險壓在發佈前 30 分鐘內。若本地缺硬體，可用 MacHTML 公開定價約 $16.9/天 的雲端 Mac mini 做 WebKit 真機回歸。

inert 的語意與作用域

可把 inert 視為瀏覽器內建的「互動凍結層」：標記節點及其後代不再接收命中測試與焦點走訪，但文字仍存在於畫面。靜態站沒有框架執行緒時，建議把頁首、主內容、頁尾包進 #page-shell，模態作為兄弟節點置於外殼之外；開啟時 pageShell.inert = true，關閉時還原。這樣不會把模態自己也凍結。

與只能作用於表單的 disabled 不同，inert 適用於任意標記。對 Eleventy、Astro 或純手寫頁面，用少量原生腳本封裝狀態機即可；若要把開啟狀態寫進網址，亦可搭配 hash 或 history.pushState，並保留無 JS 的退化行為。

與 aria-hidden="true"、原生 <dialog> 的差異

aria-hidden 主要影響輔助樹，並不保證阻止點擊；若 z-index 或 pointer-events 出錯，行動版 Safari 仍可能出現「看不到卻能點」的幽靈熱區。inert 同步處理命中與焦點，較貼近使用者對模態的期待。若可接受瀏覽器預設樣式，dialog.showModal() 還提供頂層與 ESC 關閉；若需高度自訂動畫，inert 常作為過渡方案。

若頁面含第三方 iframe（客服、地圖、廣告），請牢記：跨域 iframe 不在 inert 的可控範圍，合約應要求對方提供 tabindex 與可見性 API 鉤子。把此條寫進 RFC，可在採購審查少打 兩輪補丁。

Safari、旁白與視網膜縮放

在 2026 年的 WebKit 路線中，inert 已廣泛可用，但仍有三個常見回報：旁白可能對 inert 邊界與 aria-modal 組合重複播報；backdrop-filter 與兄弟節點的層疊可能在 2x 視網膜出現亞像素抖動；Safari Technology Preview 往往領先穩定版，建議同時保留 STP 與穩定版兩條測試紀錄。

量化指標：模態開啟後 120 毫秒內應收到主按鈕首次 pointerdown（冷快取），逾時多半代表透明覆蓋層搶事件。把此指標與 LCP、CLS 並列，非前端職能也能理解風險。若需長期維護品牌站，租用固定雲 Mac mini 跑 nightly WebKit，通常比共用筆電省 三成以上協調時間。

抽屜、行銷嵌入與 z-index 預算

真實頁面同時存在 Cookie 條、行銷浮層、影片燈箱與客服氣泡。請把 z-index 預算寫進設計系統：例如內容 0–99、黏性導覽 100–199、模態 1000+，禁止任意使用極大整數。需要暫停行銷熱區時對行銷根節點加 inert，法遵條保持可操作；反向則把主內容 inert，只留同意按鈕可點。

若使用多頁 View Transitions，請在動畫 Promise 完成後再移除 inert，否則焦點可能落在即將被移除的節點。對 prefers-reduced-motion: reduce 使用者，把動畫收斂到 1 毫秒級透明度轉場，確保焦點順序穩定。

埋點、工作階段錄影與回歸護欄

許多工作階段錄影會在 body 頂端掛透明捕獲層，若未與模態協同，會出現「背景已 inert，但錄影層仍吃事件」的矛盾。解法：把統計腳本放進會被 inert 的外殼內以便暫停，或在開啟模態時卸載探頭。E2E 應在開啟狀態對首屏 CTA 斷言 0 次意外點擊。

開發期可加輕量 focusin 日誌列印 document.activeElement，上線前移除；保留五分鐘可用的緊急開關供事故復盤。把 Safari 的 CFBundleShortVersionString 與 macOS 次版本寫進發佈說明，客服才能對齊使用者環境。

決策矩陣

情境	首選	理由
單頁行銷模態	inert 外殼 + role="dialog"	腳本少、命中測試清楚
多步精靈	原生 dialog 或 popover	頂層與輕觸關閉語意完整
第三方 iframe	合約 + 獨立 tabindex	inert 不穿透跨域
事故「關閉所有浮層」	快捷鍵統一移除 inert 與隱藏類別	維運可自救

極簡原生切換

const shell = document.querySelector('#page-shell');
const dlg = document.querySelector('#modal');
function openModal() {
  shell.inert = true;
  dlg.hidden = false;
  dlg.querySelector('button[data-close], [autofocus]')?.focus();
}
function closeModal() {
  dlg.hidden = true;
  shell.inert = false;
}

發佈前驗收清單

1. 模態開啟時，鍵盤正向、反向各走一次全頁，焦點不得逃逸到背景。
2. 開啟旁白重複路徑，逃逸次數目標 0。
3. 在 320px、768px、1280px 寬度檢查捲動鏈與點擊穿透。
4. 主 CTA 暫掛 pointerdown 計數器，開啟模態時應為 0。
5. 錄製 Safari 穩定版與 Chromium 操作影片，工單附件至少 90 天。

企業採購方越來越要求輔助技術測試證據，僅有 Lighthouse 分數往往不足。若本地缺硬體，短期租用雲 Mac mini 專項回歸，通常比延期發佈便宜一個數量級的機會成本。

從資訊架構角度，建議把「模態開啟」視為短暫路由事件：在狀態表標明哪些第三方腳本可在 inert 期間運行（例如支付 SDK），哪些必須暫停（例如自動播放預覽）。把表放在 README 頂部，新成員 15 分鐘內能懂邊界。若需同時支援繁簡，可共用 inert 切換邏輯，只在文案層地區化。

最後，把鍵盤快捷鍵寫進說明文件：Esc 關閉、平台等效的強制卸載浮層組合鍵。靜態站沒有全域事件匯流排時，快捷鍵是事故復原的救命繩；在雲 mini 上錄示範影片，比十頁文字更能說服業務方。

常見問題

inert 會讓螢幕閱讀器完全忽略背景文字嗎？

不會自動「靜音」文字；若需隱藏大段內容，應另搭配設計策略。

能每幀切換 inert 配合動畫嗎？

可行但會觸發配置抖動，建議只在開啟/關閉事件各切一次。

shadow DOM 會繼承 inert 嗎？

會，宿主在 inert 子樹內時，shadow 內亦不可互動，需提前規畫 slot。

Apple Silicon Mac mini 仍是驗證 WebKit 最安靜的桌面形態：風扇噪音低、閒置功耗常在 12 瓦左右，適合長時間開著 Safari 手測或 WebDriver。MacHTML 雲節點提供 SSH 與可選 VNC，讓設計與工程在不寄送實體機的情況下共用 macOS；專案結束即停租，不必把硬體折舊攤在 36 個月帳上。

模態與可及性不是「發佈一次就結束」，行銷改嵌入、Safari 小版本、第三方腳本升級都會讓焦點路徑漂移。把 WebKit 真機驗證變成可按日計費的雲 mini 習慣，用約 $16.9/天 的公開價位做預算錨點，比每次臨時借機器更能保護靜態站的節奏。