顏色與對比
檢測正文文字、連結、按鈕、佔位符、焦點指示器的對比度是否達到 4.5:1 / 3:1；色盲友好測試（紅綠、藍黃）。
檢測維度
對照 WCAG 2.1 AA 全部 50 項關鍵標準
Looo AI 把抽象的 WCAG 文件轉化為可讀的掃描結果，按嚴重級別（A / AA / AAA）分類輸出修復建議。
替代文字
所有圖片是否有 alt？裝飾圖是否標記 alt="" ？背景圖是否傳達了關鍵資訊卻沒有替代描述？圖示按鈕是否有 aria-label？
鍵盤可達性
Tab 順序是否合理？Enter / Space 是否能觸發？是否存在「焦點陷阱」？所有可點選元素是否有可見的 focus 樣式？
表單可用性
每個 input 是否有對應的 label？必填欄位是否有 aria-required？錯誤資訊是否實時反饋？密碼欄位是否提供顯示切換？
語義結構
H1-H6 層級是否完整？是否使用 main / nav / banner / contentinfo 等地標？跳過導航連結是否存在並可用？
多媒體替代
影片是否提供字幕、文字稿？自動播放是否可關閉？動畫 / 視差 / 閃爍是否遵循 prefers-reduced-motion？
合規與商業價值
無障礙不是法務問題，更是商業機會
全球約 15% 的使用者存在不同程度的視覺、聽覺或運動障礙。讓網站更可達，意味著：擴大潛在客戶、提升 SEO、降低法律風險（ADA Title III 集體訴訟每年增長）。
- 避免 ADA 集體訴訟（美國市場每年數千宗）
- 滿足公共採購合規（聯邦 Section 508）
- 更易被搜尋引擎抓取（語義結構對 SEO 友好）
- 提升老年使用者與視障使用者的轉化率
分級輸出
按 WCAG 嚴重程度生成可執行清單
| 級別 | 說明 | 處理優先順序 | 典型問題 |
|---|---|---|---|
| A | 核心可達性 | 必須立即修復 | 缺少 alt、鍵盤無法操作、語言未宣告 |
| AA | 主流合規標準 | 建議本季度完成 | 對比度不足、焦點不可見、表單未關聯 |
| AAA | 更高質量目標 | 持續打磨 | 額外字幕、複雜表單最佳化、閱讀級別控制 |
提升路徑
WCAG 2.1 AA 合規：從 60 分到 100 分
下面 6 條建議覆蓋 ADA Title III 與 WCAG 2.1 AA 的最常見違規點，按 WebAIM 的統計實際觸及 90% 以上無障礙問題。
1把對比度打到 4.5:1
正文 / 背景 ≥ 4.5 : 1，大字（≥ 18.66px 或 14px 粗體）≥ 3 : 1。底部灰字、footer 連結、佔位符、按鈕 hover 這些「次要文字」最容易踩坑。用 WebAIM Contrast Checker 驗。
2所有圖片、圖示按鈕加 alt / aria-label
裝飾性圖示用 aria-hidden="true"；含資訊的圖示按鈕用 aria-label="..."；產品/內容圖片用描述性 alt。空 alt（alt=""）也是有效宣告，比缺失好。
3鍵盤導航全鏈路打通
Tab 順序符合視覺順序；所有互動元素能 Enter/Space 觸發；自定義控制元件配 ARIA role；保留 :focus-visible 描邊樣式（千萬不要 outline:none）；提供「跳到主內容」連結。
4表單 label / input 一一對應
每個 <input>、<select>、<textarea> 都要有關聯的 <label for="...">；必填欄位加 required + aria-required="true"；錯誤資訊用 aria-live="polite" 實時反饋。
5語義標籤 + 唯一 H1 + 地標
每頁一個 <h1>，H2/H3 順序不跳；用 <main>、<nav>、<header>、<footer> 而不是隻用 <div>；<html lang="zh-Hant"> 必填。
6尊重動效偏好與縮放
動畫 / 視差包在 @media (prefers-reduced-motion: reduce)；影片不要自動播放；移動端 viewport 不鎖定縮放（不要 user-scalable=no），允許使用者放大到 200% 不破版。
建站平臺 · 客觀對比
哪些平臺的無障礙預設值比較好？
ADA 友好度看的是「主題/模板預設是否合規」+「平臺是否提供 alt、對比度的強制校驗」。下面客觀羅列主流方案。
主題驅動
WordPress（選無障礙主題）
主題決定 80% 的合規度。選用「Accessibility-ready」標籤的主題（如 Twenty Twenty-Four、Astra Pro Accessibility）。
優勢：可深度改造 ARIA 與對比度。
注意：第三方外掛易破壞可訪問性，需逐外掛評估。
設計穩健
Squarespace
模板字型可讀、對比度預設 OK，但部分元件鍵盤可達性弱。
優勢：開箱視覺合規度較高。
注意：自定義 CSS 時易破壞 focus 樣式。
設計自由
Webflow
提供 Accessibility 面板與 alt/對比度警告；可自定義 ARIA。
優勢：內建可訪問性提示、HTML 乾淨。
注意：設計自由度高也意味著要自己把關 focus、鍵盤流。
小企業
Wix
提供 Wix Accessibility Wizard，自動新增 alt / heading 順序檢查。
優勢：有內建審查工具。
注意：部分動畫 / 彈窗模板預設不符合 prefers-reduced-motion。
電商
Shopify
近期模板（Dawn、Sense）預設 WCAG 2.1 AA 友好。
優勢：主題質量穩定。
注意：第三方 App 注入的彈窗 / 聊天經常破壞鍵盤可達。
零技術快速上線
Tooo.ai
生成的網站預設透過 Lighthouse Accessibility ≥ 95：alt、對比度、ARIA、focus 全自動檢查。
優勢：無需手動校驗、合規預設達標。
注意：定製化彈窗 / 複雜表單仍需人工把關。
小結：選「Accessibility-ready」標籤的主題或模板是 0 成本起步；建站後再用 WAVE、Lighthouse Accessibility 或 Looo AI 做一次迴歸測試，把殘留違規清掉。