Day 01 · W1 · AI 線 + 無障礙線 · 難度 ★☆☆☆☆
這 30 天系列由 AI 協作撰寫
內容、技術判斷、程式碼，皆由 light-design 數位顧問團隊與 Claude（Claude Code）共同產出，最終由作者驗證後 publish。
我們做的事：無障礙與規範的領域判斷、拿自家網站送官方審查當測試、trade-off 決定、ship 與否。
AI 做的事：Python 實作（我前端出身，不寫 Python）、文章初稿、提多種方案。
把關方式：自家網站實跑驗證、同事獨立 review、真實使用者回饋。為什麼一開頭就講：討厭 AI 生成內容的讀者可以現在就離開，省下雙方時間；而且我們公司的業務本質，就是教企業怎麼這樣用 AI，這 30 天本身就是 case study。
這 30 天的協作哲學是一句話：AI 寫，人選；AI 做手，人做腦。
下面這份報告，是用一行指令跑出來的：
a11y-moda site https://www.light-design.com.tw --level AAA --render
真實輸出，未經修飾。2026-08-16 對自家網站跑的 8 頁 AAA 全站掃描。報告可切換「依規則 / 依 WCAG 指引 / 依頁面」三種視角，給工程師、給稽核、給 PM 看的其實是同一份資料的不同切面。
它掃過整個網站，逐頁檢查 146 條對應台灣數位發展部（MODA）無障礙規範的檢核項目，然後吐出一份 HTML / Markdown / JSON 任選的報告。整套可以塞進 CI，PR 不合規就擋下來。
而這 30 天要談的，從頭到尾都是網頁的事：
這些題目掛在「無障礙」名下，但它們同時就是使用者體驗的地基。差別只在於：以前我們一頁一頁手動看，現在我們把它變成一把能跑在 pipeline 裡的工具。
我們是 light-design（睞特），一間數位顧問公司。不是 AI 顧問公司。客戶找我們，買的是數位轉型、系統整合、使用者體驗、無障礙認證輔導。AI 對我們來說不是商品，是交付速度的祕密武器。
然後是那個不太體面的部分。
我前端出身，做網頁十幾年。我不寫 Python。
但這篇文章開頭那個指令，是一個 Python 套件。它叫 a11y-moda，版本 0.5.0，MIT 授權，程式碼全部公開：
任何人現在就可以 pip install a11y-moda 把它裝起來，也可以打開原始碼檢查這 30 天講的每一句話。
我們公司用它跑完自家網站，然後送件申請 MODA 無障礙標章，
AAA 等級，2026 年 5 月 26 日核發。
從第一個 commit 到標章核發，中間隔了 26 天。
「不寫 Python 的人，怎麼 ship 一個 Python 套件？」這就是接下來 30 天的主題。
而且我想先說清楚：這不是一個「AI 好神奇」的故事。AI 寫了大約九成的實作，但它也把我坑過很多次，第 26 天那篇會專門講那些坑。
先講清楚無障礙檢測難在哪，不然後面 29 天你會覺得我在小題大作。
MODA 的無障礙規範，每一條檢核項目都有一個編碼，結尾是 C 或 E：
alt 屬性」，程式一掃就知道。alt 寫得好不好」，得有人看過才知道。C 是選擇題，E 是申論題。
機器很會改選擇題，一秒改完一千張。但申論題傳統上只能靠人改：一個人、一頁一頁、一題一題看。
申請 AAA 標章要填一份自評問卷，20 題。我實際去對了一遍：這 20 題的檢核碼，全部都是 E 碼。 一題選擇題都沒有，全是申論題。
這代表什麼？代表你網站有 200 頁的話，這 20 題你得看 200 遍。而且「看過了」跟「看對了」是兩回事。人會累，會漏，第 150 頁的時候標準就跟第 1 頁不一樣了。
這裡要講句公道話：這不是官方工具做得不好。 官方的 Freego 把 C 碼處理得很完整，那本來就是機器該做的部分。E 碼被歸類成人工判斷，是因為在規範制定的年代，那些題目機器真的判不了。
變的是這幾年。LLM 和 VLM 出現之後，「這個 alt 寫得好不好」這種題目，機器開始有機會判了。我們做的不是取代誰，是去補那塊本來就空著的位置。
這是這 30 天最核心的一個數字：
AAA 自評的 20 題，我們全部做出了可執行的程式判斷。
不是「大概處理了幾題」，是 20 題都有對應的規則檔跑得出結果。但拆開來看，用了四種完全不同的機制：
四種機制，不是四個模型。判斷所需的「能力」決定了該用哪套機具。底下那條 20 格的長條，一格就是自評問卷的一題。
四種機制的比例本身就說明了一件事：「AI 自動化」不是一招打天下。
11 題其實用最樸素的 DOM 解析就夠了，這種題目丟給 LLM 是浪費錢也不穩定。5 題是真的需要語意理解。3 題你必須把瀏覽器開起來，因為 CSS 算出來的顏色跟原始碼寫的顏色不是同一回事。剩下 1 題，連 DOM 都不夠，得看渲染後的畫面。
選對機制，比選對模型重要太多。 這件事我們是撞牆撞出來的，W2 會整週講這個。
寫這篇的時候，我又跑了一次完整掃描。本來想放一張漂亮的全綠截圖，結果是這樣：
| Pages | fail | info | caveat |
|---|---|---|---|
| 8 | 2 | 54 | 2 |
| 檢核碼 | WCAG | 問題 |
|---|---|---|
FA2241100E |
2.4.11 · AA | 鍵盤焦點落在元件上時，整個被固定元素（sticky / fixed）蓋住，使用者看不到焦點在哪 |
CS3241200E |
2.4.12 · AAA | 同一處，焦點有部分被固定元素覆蓋（AAA 加強版要求：一點都不能被蓋） |
工具抓到作者自己的站，這比 0 fail 有說服力。
而且它證明了一件事：這 30 天不會是一路順風的成功故事。
剩下 54 個 info 是建議等級（長字串沒設 word-break、小螢幕沒解除 sticky、重複區塊可以加跳過連結之類），不算違規，但都是真的可以再好一點的地方。caveat 有 2 個，那是工具在說「這題我沒把握，請人看一下」。為什麼要有一個會承認自己沒把握的檢測工具，第 24 天會專門講。
講再多不如你自己跑一次。這 30 天我承諾每一篇都會有可以複製貼上執行的東西。 從今天開始：
# 安裝
pip install a11y-moda
playwright install chromium # 需要實際渲染量測時才用得到
# 掃單一頁面，最快
a11y-moda scan https://example.com --level AA
# 掃整站，出一份 HTML 報告
a11y-moda site https://example.com \
--level AAA --max-pages 30 --render \
--format html -o report.html
# 只看原始碼層級、不開瀏覽器（適合 pre-commit / CI）
a11y-moda lint src/
# 不確定某個檢核碼在管什麼，直接問工具
a11y-moda rules search 焦點
a11y-moda explain CS2240700E
跑起來長這樣，這是上面那份報告的真實輸出：
$ a11y-moda site https://www.light-design.com.tw --level AAA --render --max-pages 8
discovered 8 URL(s)
[1/8] https://www.light-design.com.tw
[2/8] https://www.light-design.com.tw/about-us
[3/8] https://www.light-design.com.tw/pricing
[4/8] https://www.light-design.com.tw/contact
[5/8] https://www.light-design.com.tw/works
[6/8] https://www.light-design.com.tw/blog
[7/8] https://www.light-design.com.tw/sitemap
[8/8] https://www.light-design.com.tw/search
wrote reports/d1_report.html
8 頁、96 秒，含 Playwright 實際渲染每一頁。
還有一件對接案的人很重要的事：它可以完全跑在你自己的機器上。 LLM 端接的是 OpenAI 相容 API，意思是你可以指向本機的 Ollama 或任何自架模型，客戶的網站內容不需要送出你的網路。這對我們做顧問的來說不是加分項，是能不能用的前提。
合理的疑問：顧問公司不是應該去接案嗎，做工具幹嘛？三個理由，我全部攤開講。
我們自己要用。 幫客戶做無障礙輔導，如果每個案子都靠人工看 20 題乘以幾百頁，這門生意根本不成立。工具是為了讓服務規模化。
它是最誠實的能力證明。 講一百次「我們懂無障礙」，不如把工具開源出來讓人看程式碼，再加上一張官方核發的 AAA 標章。能被外部驗證的東西，比簡報上的形容詞值錢。
這 30 天本身就是方法論展示。 一間不寫 Python 的顧問公司，怎麼用 AI 把一個構想推到 PyPI、推到政府認證。這個流程可以複製到客戶的任何領域，那才是我們真正在賣的東西。
工具是副產品，方法才是產品。
30 天，兩條線。一條講「AI 怎麼幫一個非該語言使用者蓋出工具」，一條講「網頁無障礙的技術細節到底在講什麼」。中間兩週各自純化，頭尾則交織在一起。
| 週 | 主題 | 你會看到什麼 |
|---|---|---|
| W1（D1–7） | 為什麼要蓋這把刀 | 痛點、規範長什麼樣、現有工具的邊界在哪 |
| W2（D8–14） | AI agent 怎麼生規則 | 技術核心：prompt 工程、AI 友善的架構設計、LLM/VLM 怎麼判、還有安全防線 |
| W3（D15–21） | 網頁無障礙的真功夫 | AI 比例下降，Playwright 上場。每天拆一個前端常見的誤解 |
| W4（D22–28） | 真的有用嗎 | 拿真實網站跑、AI 協作的翻車實錄、進 CI、標章送審到核發全紀錄 |
| D29–30 | 收尾 | 還缺什麼、社群召集、完整復盤 |
跟很多 30 天系列不一樣的地方：這裡每一篇都有可以跑的程式碼，跟可以驗證的結果。 白老鼠是我們自家網站，包括今天這兩個 fail 在內，修壞的部分全部公開。
明天 Day 2，我們從一個很多接案工程師都熟悉的場景開始：網站送無障礙審查被回了意見，然後呢？
iThome鐵人賽
看影片追技術