iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

前端不寫 Python,照樣 ship 一把網頁無障礙 CLI 系列

我前端出身,不寫 Python,卻用 AI 協作 ship 了一個 Python CLI:a11y-moda。它實作 MODA 公布的檢核碼,開源在 PyPI(MIT),並用它讓自家網站取得 AAA 標章。

AAA 自評問卷 20 題全是「人工判斷」的 E 碼。這 30 天拆解怎麼把它們變成程式跑得出結果的檢查:11 題純 DOM、5 題 LLM、3 題 Playwright、1 題 VLM。

另一條線講網頁無障礙真功夫:焦點順序、對比度、SPA、320px 重排。每篇都有可跑的程式碼與可驗證的數字,白老鼠是自家網站,包括被工具抓到的 fail。

本系列由 AI 協作撰寫。

鐵人鍊成 | 共 31 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21:九成的檢測碼要靠人判,LLM 補的不是聰明,是可重複

Day 21 · W3 · AI 線 + 無障礙線 · 難度 ★★★☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位...

2026-09-05 ‧ 由 Maple | 睞特 分享
DAY 22

Day 22:同一份 CSS,五月的工具沒話說,九月的工具報了一整排 fail

Day 22 · W4 · 無障礙線 · 難度 ★★★☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

2026-09-06 ‧ 由 Maple | 睞特 分享
DAY 23

Day 23:我沒教 AI 怎麼修,我教它怎麼證明修好了

Day 23 · W4 · AI 線 · 難度 ★★★☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

2026-09-07 ‧ 由 Maple | 睞特 分享
DAY 24

Day 24:把瀏覽器縮到 320px,我的網站有幾頁會橫著捲

Day 24 · W4 · 無障礙線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

2026-09-08 ‧ 由 Maple | 睞特 分享
DAY 25

Day 25:我讓 AI 先查規範再寫,差別只在它查到的那幾條

Day 25 · W4 · AI 線 · 難度 ★★★☆☆` 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與...

2026-09-09 ‧ 由 Maple | 睞特 分享
DAY 26

Day 26:每一件 AI 沒做到的事,都是我以為它會自己做的

Day 26 · W4 · AI 線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

2026-09-10 ‧ 由 Maple | 睞特 分享
DAY 27

Day 27:發版清單九步,我漏的那一步是使用者第一眼看的那頁

Day 27 · W4 · AI 線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

2026-09-11 ‧ 由 Maple | 睞特 分享
DAY 28

Day 28:審查回了三輪,每一輪我都先改工具,再改網站

Day 28 · W4 · 無障礙線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 內容、技術判斷、程式碼由 light-design 數位顧問團隊與 C...

2026-09-12 ‧ 由 Maple | 睞特 分享
DAY 29

Day 29:工具說「我不知道」的時候,你該怎麼辦

Day 29 · W4 · 無障礙線 · 難度 ★★☆☆☆ 本系列由 AI 協作撰寫。 本篇初稿與查證由作者和 Codex 協作,發布前由作者確認。完整系列協...

2026-09-13 ‧ 由 Maple | 睞特 分享
DAY 30

Day 30:三十天前答應的四樣東西,今天逐項對帳

Day 30 · W4 · AI 線 · 難度 ★☆☆☆☆ 本系列由 AI 協作撰寫。 本篇初稿與查證由作者和 Codex 協作,發布前由作者確認。完整系列協...

2026-09-14 ‧ 由 Maple | 睞特 分享