🎛️ #123 校網無障礙 AA 遷移操作平台：把一本研習講義，變成 12 個能打勾的步驟
#123 校網無障礙 AA 遷移操作平台，把「舊校網搬到教育局共構平台、拿到無障礙 AA 標章」這件沒人說得清楚的事，拆成 12 個由上往下、做完打勾就好的步驟：要貼的內容一鍵複製、進度自動記住，還內建對比度小工具與會讓你秒退件的四大雷區清單。
「校網要搬家，順便拿無障礙標章」——然後呢？
如果你是學校的資訊組長或網管，這句話你大概聽過。聽完之後你會拿到：一本研習講義、一份無障礙規範 PDF、一個教育局共構平台的後台帳號，還有一個死線。
然後你會發現一個很現實的問題：這三份資料沒有任何一份告訴你「先做哪一件」。
- 講義是按功能分章的，不是按你該做的順序寫的。
- 規範寫的是「應符合對比度 4.5:1」，不是「你們學校的處室選單底色 #7e8f62 對比只有 3.50，改成 #5d6b47 就過了」。
- 後台可以改的地方有上百處，但真正會害你退件的只有那幾處。
更慘的是，這件事不是一個晚上做得完的。你今天改了三個頁面，隔週回來已經忘記做到哪、哪些改過、哪些還沒。等到要送審那天，只好從頭再掃一遍。
「有沒有一個東西，就照著它從上到下做，做完打勾，關掉明天再開還記得我做到哪？」
這就是 #123 校網無障礙 AA 遷移操作平台 的全部目的。
#123 怎麼解？把「知識」壓成「動作」
功能 A：12 個步驟、三個階段、每步都標時間 分成「送審前 8 步」「送審 3 步」「送審後 1 步」，每張卡片右上角標了預估時間——從「約 1 分」到「約 60 分」。你可以看著今天剩下的空堂，決定要吃掉哪幾步。分階段本身也是一種提醒：送審前只需要做完第一區塊，因為研習與中心都強調「做越多越容易被挑毛病，趁資料不多時送審」。
功能 B：進度自動記住 勾選狀態存在瀏覽器本機，關掉重開、隔天再打開、下週再回來，進度條都還在。頂部同時顯示完成度（0 / 12）與距離標章死線的天數，不用自己算。
功能 C：要貼的內容，一鍵複製整份
5 個首頁區塊的修正原始碼、要改的色碼、要跑的檢查指令，全部做成「複製」按鈕，整份進剪貼簿。這一步修掉的是 9 條從舊站沿用 /uploads/ 路徑、搬過去就會掉到共構平台首頁的死連結，加上一堆用詞不合規的 title——總共 55 處，靠手工一個一個找是找不完的。
功能 D：對比度問題，直接給你答案
不是告訴你「要 ≥ 4.5」，而是告訴你：處室選單底色 #7e8f62 對比 3.50 不合格，改成 #5d6b47 變 5.74，然後記得把後台右邊那個「複製顏色到所有處室」開關打開——7 個處室一次套用完成。一分鐘，27 處。
Bootstrap 那組也一樣：.text-secondary 是 #6c757d，在淺灰底上只有 4.45～4.48，就差那麼一點點。平台直接給你「原本 → 改成」的對照表，以後寫內容避開 .text-secondary 和 .text-muted，要淺灰質感就用 #495057。
功能 E：內建對比度小工具 頁尾附一個即時計算器。臨時想確認某組新配色過不過，輸入前景色與背景色就有答案（內文要 ≥ 4.5、大字 ≥ 3），不用另外開別的網站。
功能 F：送審四大雷區清單——踩到就秒退，還要等 7 天 這一段是整個平台最值錢的部分，因為這些事沒人會事先告訴你：
- 網址要是
https://，結尾不可有 index.php、後面不加斜線。 - 網站名稱要含縣市（例如「桃園市龍潭區石門國小 全球資訊網」），但絕不可含「無障礙」或「測試」。
- 一定要用機關代碼送審，用私人機構會直接退回。
- 標章等級選 AA（中間那個），很多人在這步選錯。
- 「網站導覽」四個字一字未改，改了直接退。
平台還補了一句很重要的判讀：收到「限期改善」其實是好消息，代表快過了，5 天內改完點「回覆人工檢測報告」就好；收到「退件」才要等 7 天。
功能 G：Freego 檢測的環境地雷也寫進去了
JRE 版本必須 17～21（太高太低都不行）、安裝時要把 JavaSoft registry keys 改成「安裝」、chromedriver 要去查 Stable 版本對版下載。還有一句能省你半小時的：掃描時 tad_login 那頁載入逾時是正常的，不影響送審。
真實技術棧
- 前端：純單檔靜態 HTML + CSS + 原生 JavaScript，無框架、無後端、無登入
- 進度保存：localStorage，勾選即存，關頁不掉
- 對比度計算：WCAG 相對亮度公式前端即時運算
- 主題：預設亮色，可手動切深色；未切過時才跟隨系統偏好
- 版面：桌機用
min(1320px, 94vw)容器搭配auto-fill卡片網格，螢幕越寬欄數越多，不會把內容擠成中間一條窄欄 - 部署：GitHub Pages，含 PWA manifest 與 apple-touch-icon，可加到桌面當獨立 App
有一個設計上的取捨值得說：含個人信箱與分機的成員批次資料，公開版一律不放。 頁面只標註本機資料夾位置，需要那份資料的人自己去電腦上開。可用性跟個資保護，這裡選了後者。
教學現場情境
情境一：資訊組長的下午空堂。 打開平台，看到「進度 3 / 12」，直接跳到第 4 步「改三個頁面的文字顏色（約 10 分）」。做完打勾，關掉。下週再開，進度還在 4 / 12。
情境二：把工作分出去。 第 2 步要上傳的 5 個檔案屬學務處、第 6 步的成員資料屬輔導室與幼兒園。清單本身就是分工表——把網址傳給承辦人，讓他們自己照著那張卡片做，連「批次輸入框只有在該處室還沒有任何成員時才會出現，所以先貼批次、不要先手動加人」這種細節都寫好了。
情境三：送審前一晚的最後檢查。 第 8 步「跑檢查確認全部歸零」給了三行指令，目標明確寫著：站內連結失效 0 項、對比度 0 組不合格。自己先掃過比等 Freego 掃全站快很多。
跟其他工具的關係
阿凱老師的工具集裡，資訊組長這條線已經有 #107 學生教育雲帳號更新工具 處理帳號、#82 教室資訊設備盤點系統 處理設備。#123 補的是第三塊、也是最難外包的一塊：校網本身。
這三個工具的共同設計哲學是一樣的——不是做一個更漂亮的後台，而是把「只有承辦人腦袋裡才有的順序」寫下來，讓下一個人接手時不用重新踩一次雷。
配對工具推薦
- #107 學生教育雲帳號更新工具 — 資訊組長的另一條例行流水線
- #82 教室資訊設備盤點系統 — 設備盤點也是一份「照著做就好」的清單
- #123 校網無障礙 AA 遷移操作平台 — 本篇主角
適用對象
- 資訊組長／學校網管：正在做校網遷移，或準備申請無障礙標章的第一線執行者。
- 各處室行政承辦人：教務、學務、總務、輔導都有自己要維護的頁面與要上傳的檔案。
- 已經有標章的學校：認證有效期 3 年、期間會不定期抽查，平台裡的撰寫紀律（公告不可只放海報圖、掃描件不可直接放、檔名要有意義的中文）是長期要守的。
- 國中、高中：無障礙規範與送審流程全國一致，步驟同樣適用，只有共構平台的後台細節依縣市略有差異。
想試試？
如果你手上也有一份翻不完的研習講義和一個逼近的死線，先打開它、把第一步的色碼複製起來——一分鐘修好 27 處，那種進度條動起來的感覺，會讓剩下的 11 步好走很多。