為什麼需要工具
HTML 的問題大多靜默——重複 id 不報錯、缺少 alt 不影響渲染、hreflang 設錯 SEO 慢慢劣化。靠肉眼 review 很難全部抓到，工具補這個缺口。
五個工具各有職責，不互相取代：
W3C Validator — HTML 語法合法性
用途：找 invalid HTML——non-void 元素自閉合、非法巢狀（<p> 包 <div>）、重複 id、缺少必要屬性。
使用方式：
- 網頁版：validator.w3.org，貼 URL 或直接貼 HTML
- 本地端：
npx vnu --format json index.html（需 Java） - CI 整合：搭配
html-validate套件（純 Node.js，不需 Java）
npm install --save-dev html-validate
npx html-validate "dist/**/*.html"什麼時候跑：每次 build 後，或 CI pipeline 裡。新專案剛建時跑一次，之後只要有 HTML 異動就跑。
axe DevTools — 無障礙稽核
用途：找 a11y 問題——缺少 alt、label 未關聯、顏色對比不足、ARIA 使用錯誤、tab order 問題、鍵盤陷阱。
使用方式：
- Chrome 擴充套件：axe DevTools（免費版已經很夠用）
- DevTools 整合：Chrome DevTools → Lighthouse → Accessibility（用的是同一個引擎）
- Playwright / Cypress 測試整合：
@axe-core/playwright
// Playwright 測試裡加 axe 掃描
import { checkA11y } from 'axe-playwright';
test('首頁無障礙', async ({ page }) => {
await page.goto('/');
await checkA11y(page);
});axe vs Lighthouse：axe 更詳細，每個問題有完整說明和修正建議；Lighthouse 給分數，適合監控趨勢。
Lighthouse — 綜合評分與 CWV
用途：Performance（LCP / CLS / FID）、Accessibility（axe 子集）、SEO（meta 完整性）、Best Practices 四個面向的評分。
使用方式：
- Chrome DevTools → Lighthouse 分頁，選 Categories 跑
- CLI：
npx lighthouse https://example.com --output json - CI：
@lhci/cli（LHCI）可以設定分數門檻，低於門檻 fail build
npm install -g @lhci/cli
lhci autorun什麼時候看：
- SEO 分頁：確認 meta、canonical、robots 沒問題
- Accessibility 分頁：快速掃一次，90 分以下看哪裡扣分
- Performance 分頁：LCP 超過 2.5s 或 CLS 超過 0.1 要處理
HTMLHint — 靜態 lint
用途：程式碼層面的 HTML 規範檢查，可以加進編輯器和 CI，在寫的當下就提示。
npm install --save-dev htmlhint
npx htmlhint "src/**/*.html".htmlhintrc 設定範例：
{
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
"doctype-first": true,
"id-unique": true,
"src-not-empty": true,
"alt-require": true,
"title-require": true
}VSCode 安裝 HTMLHint 擴充套件，存檔時即時顯示問題。
Rich Results Test — 結構化資料驗證
用途：驗證 JSON-LD / Microdata 格式正確、確認符合 Google Rich Results 資格。
使用方式：
- search.google.com/test/rich-results
- 貼 URL 或貼 HTML 片段，自動告訴你：
- 哪種 Rich Result 資格（Article / FAQ / Product / BreadcrumbList）
- 有哪些必填欄位缺失
- 有哪些警告（不影響資格但 Google 建議補上）
加完 JSON-LD 之後一定要跑這個，錯誤的 schema 比沒有還糟。
工具速查
| 工具 | 主要用途 | 使用時機 |
|---|---|---|
| W3C Validator / html-validate | HTML 語法合法性 | CI build 後 |
| axe DevTools | a11y 詳細稽核 | 每次新功能完成 |
| Lighthouse | 綜合評分 + CWV | 定期監控、上線前 |
| HTMLHint | 編輯時靜態 lint | 開發中即時 |
| Rich Results Test | JSON-LD 驗證 | 加完結構化資料後 |
相關文章
- HTML Anti-patterns — 工具會抓到的問題清單
- ARIA 和原生語意 — axe 報的 ARIA 問題怎麼修
- Schema.org + JSON-LD 實戰 — Rich Results Test 驗什麼