2026 OpenClaw 前端實戰:
遠端 Mac 解析 axe-core 無障礙 JSON,產出 PR 可讀摘要並回傳
無障礙迴歸在聊天串裡最難說清楚;在 遠端 Mac 的 CI 裡把 axe-core JSON 落成機讀報告,再交 OpenClaw 壓成單一 Markdown 區塊貼回 PR,審閱者不必開須先登入的第三方儀表板。建議與部署前品質敘事並讀:Lighthouse、連結與無障礙基線;若已統一自動化留言風格,可對照 視覺回歸 diff → PR 摘要 的同一套冪等與權限做法。
01 axe 執行方式與 JSON 輸出
axe-core 是引擎,不是單一 CLI。2026 年較耐用的做法是讓掃描發生在 UI 已能啟動的地方:Playwright 或 Cypress 測試步驟呼叫 injectAxe()/checkA11y(),或以腳本載入每個預覽 URL 並用 @axe-core/cli 寫結果。共用 遠端 Mac 時,請將 Chromium 或 WebKit 版本與 Node 一併鎖定,讓昨日與今日的 runner 行為一致。
務必持久化機讀 JSON,而非僅截圖開發者工具。設定 runner 輸出預設 axe 結果物件,或依 URL 合併為陣列。建議路徑如 .openclaw/reports/$GIT_SHA/a11y/,檔名例如 raw_home.json、raw_checkout.json,並附 manifest.json 記錄基底 URL、commit、瀏覽器 build 字串與 axe-core 版本。報告肥大時可 gzip 原始檔,旁邊保留未壓縮的正規化檔供代理讀取。
CI 應把無障礙當成閘道:違反政策時工作應非零退出,仍上傳工件供 OpenClaw 產出可讀摘要。部署後掃描請由預覽步驟觸發,JSON 來源須為穩定 HTTPS。
- 平行路由:大站可依路徑分片,最後一步以固定排序鍵合併 JSON。
02 OpenClaw 解析規則模板
OpenClaw 不應去爬 Git 主機的 HTML。請給它倉庫讀取權與報告目錄,再用白話寫死模板:「讀取 a11y_normalized.json;輸出 pr_a11y_summary.md,章節如下。」模板須區分自 JSON 抄錄的事實(規則 id、計數、選擇器)與標示為假設的修復建議。
實務章節順序可為:執行摘要計數(serious、moderate、minor)、熱門規則(先依 impact 再依次數)、代表節點(每規則至多三例並截斷 HTML)、WCAG 對照(payload 有則列)、複測指令(實際 npm script 或 Playwright tag)、豁免(無則留空,有則帶工單編號)。模板應與其他 OpenClaw 任務一併納版控,方便像程式一樣 diff 提示詞變更。
與效能或體積閘道對齊敘述方式時,可參考 bundle analyzer 閾值與 PR 摘要:把數字政策放在產生 Markdown 的腳本旁,減少在留言串裡吵數字。
03 摘要欄位與閾值
正規化 JSON 應暴露可供 OpenClaw(與 shell)聚合的欄位,而無需再解析 axe 內部結構:ruleId、impact、wcagRefs、helpUrl(僅公開文件)、failureSummary、targetSelectors、url、fingerprint(規則加選擇器陣列的雜湊)。勿塞整頁 HTML;片段建議壓在數 KB 內,避免個資流進 PR。
| 政策層級 | 範例閾值 | CI 行為 |
|---|---|---|
| Serious | 計數為 0 | 失敗工作;Markdown 列出完整規則清單。 |
| Moderate | 計數 ≤ 團隊預算(例如 3) | 視發布階段警告或失敗;豁免須附工單。 |
| Minor/僅審閱 | 僅報告 | 不擋合併;PR 摘要仍列前五則以利可見度。 |
| 不適用/通過 | 不適用 | 除非稽核覆蓋率,正文可省略;改提掃描 URL 數。 |
閾值表與 workflow YAML 同目錄版本化。產品政策變更時,在 a11y_normalized.json 內遞增 schemaVersion,讀者能一眼分辨舊留言已過期。
04 與 Git 供應方評論回傳(描述性整合、無登入態 URL)
對資安/合規審閱請描述為REST API 加儲存庫範圍憑證,而非「請開這個瀏覽器分頁」。GitHub 可使用 fine-grained PAT 或僅綁單一儲存庫的 GitHub App 安裝權杖,權限含 pull requests: write。GitLab 則用專案 access token,範圍 api 且僅該專案。整合順序建議寫進 runbook:以 Authorization: Bearer 或 PRIVATE-TOKEN 驗證,從 CI 已匯出的環境變數取得 MR/PR 編號,再建立或更新單一則含 OpenClaw 產出 Markdown 的留言。
避免內嵌假設互動工作階段的連結。若必須引用說明,請用 axe 或 WCAG 速查等穩定公開的 helpUrl。勿貼內部分析或審查後台會經 SSO 轉址的 URL。若政策禁止 Mac worker 直連 Git,可改將同一段 Markdown POST 到內部自動化 Webhook,由唯一持有憑證的元件代為寫入 PR。
冪等:在留言開頭放 HTML 註解,例如 <!-- openclaw-a11y:$SHA -->;重跑時先搜尋既有留言再就地更新,避免洗版。重試:對 HTTP 429、500、502 做指數退避加抖動,上限約五次;日誌只記權杖指紋,不列印祕密全文。
05 報錯 FAQ
違規為空但頁面明顯壞掉:axe 只看測試載入的 DOM。確認不是在資料抓取完成前的骨架殼上掃描;若元件依賴 shadow root,需為 open 才會被引擎看見。可延長等待或在網路閒置後再跑 axe。
次數在重跑間飄移:廣告、同意橫幅與計時器會改變 DOM。於 Playwright 凍結時鐘與語系、在政策允許下阻擋第三方主機,或在掃描前寫入可關閉橫幅的 cookie。
OpenClaw 捏造不存在的選擇器:收緊模板:「選擇器必須逐字來自 targetSelectors;不得臆測新路徑。」並為正規化檔提供 JSON Schema,在代理執行前於 CI 驗證。
Git API 回 403/401:多為權杖範圍錯誤,或機器人帳號看不見 fork 觸發的工作流程。對 GitHub Actions 的 fork 情境需慎用 pull_request_target,或改由受信內部服務留言。
留言本文過長:每規則縮減示例、改指到 CI 歸檔的 JSON 工件路徑,並在 PR 內只摘要熱門規則以符合供應商長度上限。
在應用實際執行處跑 axe-core,於 .openclaw/reports/$SHA/a11y/ 寫入 JSON 與清單,將違規正規化一次,套用嚴格的 OpenClaw Markdown 模板,在 CI 落實 serious/moderate 閾值,並以最小權限 Git API 冪等留言與退避重試。需要與 WebKit 鄰近環境並行手動驗證時,可透過 MacWww 租用 Apple Silicon 節點。
若要固定網路與映像跑完整鏈路,請至 購買頁免登入選用遠端 Mac,並參考 定價與 幫助中心對齊 SSH/VNC 與合規要求。