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 協作撰寫。

參賽天數 22 天 | 共 22 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 01:前端不寫 Python,照樣 ship 一把網頁無障礙 CLI

Day 01 · W1 · AI 線 + 無障礙線 · 難度 ★☆☆☆☆ 這 30 天系列由 AI 協作撰寫 內容、技術判斷、程式碼,皆由 light-des...

2026-08-16 ‧ 由 Maple | 睞特 分享
DAY 2

Day 02:我們的工具說「全綠」,人工審查回來 9 條

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

2026-08-17 ‧ 由 Maple | 睞特 分享
DAY 3

Day 03:一個晚上,AAA 自評覆蓋率從 12/20 跑到 20/20

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

2026-08-18 ‧ 由 Maple | 睞特 分享
DAY 4

Day 04:20 秒裝好,然後它抓到自己

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

2026-08-19 ‧ 由 Maple | 睞特 分享
DAY 5

Day 05:axe-core、pa11y、Lighthouse 都跑過了,為什麼還要再蓋一把

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

2026-08-20 ‧ 由 Maple | 睞特 分享
DAY 6

Day 06:規範換版對齊 WCAG 2.2,我以為要補 109 條,實際只有 7 條

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

2026-08-21 ‧ 由 Maple | 睞特 分享
DAY 7

Day 07:六個魔術數字都是我拍板的,所以我把程式碼送出去

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

2026-08-22 ‧ 由 Maple | 睞特 分享
DAY 8

Day 08:Python 一行都不是我寫的,那我到底在做什麼

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

2026-08-23 ‧ 由 Maple | 睞特 分享
DAY 9

Day 09:同一條規則我寫了兩次,因為 lint 跟瀏覽器看到的不是同一個東西

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

2026-08-24 ‧ 由 Maple | 睞特 分享
DAY 10

Day 10:漸層背景上的白字,公式要吃哪一個顏色

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

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