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 11

Day 11:我的工具把整個部落格當成訊息日誌

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

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

Day 12:被我掃的網頁,可以叫我的工具說它通過

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

2026-08-27 ‧ 由 Maple | 睞特 分享
DAY 13

Day 13:`outline: none` 我一行都沒寫,焦點還是有兩個地方看不見

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

2026-08-28 ‧ 由 Maple | 睞特 分享
DAY 14

Day 14:我列了一份「不准按」的清單,然後發現送出鍵不在上面

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

2026-08-29 ‧ 由 Maple | 睞特 分享
DAY 15

Day 15:我幫大部分的圖決定了它不用被唸出來

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

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

Day 16:我的連結沒有一個「了解更多」,問題在另一頭

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

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

Day 17:我一行 CSS 都沒改,同一個顏色在深色模式下變成不合格

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

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

Day 18:我把三顆按鈕從 Tab 順序裡拿掉,鍵盤才算走得對

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

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

Day 19:我的表單焦點跳對了,畫面上卻沒有一個字說明原因

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

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

Day 20:CLI 能跑,不等於 AI 會用對

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

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