元伸科技
「為視障使用者做設計」聽起來像增加成本、無關營收。跟客戶聊時最常聽到的反應是：「我們又不是公部門，需要做到這種程度嗎？」老實說，三年前我也會說「優先級可以放後面」，但 AI 時代有個讓人意外的事實：a11y 與 AI-Ready 80% 重疊——做 a11y 同時拿 AI-Ready 紅利，ROI 極高，這也是元伸客製化網站設計從第一線稿就把 a11y 視為預設標準的原因。
實務上看到一個常見現象：很多老闆以為 a11y 是「加值服務」、要另外編預算；但只要在開案時就把它納入規格書，額外工程通常只佔總工時的一成左右，卻能同時拿到 SEO + AI-Ready + 法律合規三重保險。本篇整理兩者的 8 個重疊項目，與雙重達標的實作建議。
a11y 與 AI-Ready 為什麼重疊
兩者都需要「電腦能正確理解網頁結構」：
| 使用者 | 工具 | 共同需求 |
|---|---|---|
| 視障使用者 | 螢幕閱讀器（NVDA、JAWS） | 語意化 HTML、ARIA、alt |
| AI 爬蟲 | GPTBot、ClaudeBot | 語意化 HTML、Schema、alt |
| AI Agent | Operator、Computer Use | 語意化 HTML、ARIA、明確 label |
三者使用同樣的技術基礎——做了 a11y 等於把這三類使用者都照顧到。
8 個重疊項目
1. 語意化 HTML
<!-- ❌ 不好（div 大包大攬）-->
<div class="header">
<div class="title">標題</div>
<div class="nav">
<div onclick="...">首頁</div>
</div>
</div>
<!-- ✅ 好（語意化）-->
<header>
<h1>標題</h1>
<nav>
<a href="/">首頁</a>
</nav>
</header>
2. alt 文字
<img src="hero.webp" alt="AI-Ready 網站架構示意圖：含 Schema、llms.txt、CWV 三大要素">
視障使用者：螢幕閱讀器讀出 alt AI 爬蟲：把 alt 視為圖片內容描述 AI Agent：用 alt 識別圖片用途
3. ARIA 屬性
<!-- 動態載入 -->
<div role="status" aria-live="polite">處理中...</div>
<!-- 對話框 -->
<div role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">確認訂單</h2>
</div>
<!-- 錯誤訊息 -->
<div role="alert">Email 格式錯誤</div>
4. 鍵盤導覽
<button>正確（鍵盤可選取）</button>
<a href="...">正確</a>
<!-- ❌ 不好（鍵盤無法選）-->
<div onclick="...">點擊我</div>
<!-- ✅ 強制鍵盤可選 -->
<div onclick="..." role="button" tabindex="0">點擊我</div>
5. 表單 label
<!-- 完整 label -->
<label for="email">Email 地址</label>
<input type="email" id="email" name="email" required>
<!-- aria-label 替代 -->
<input type="search" aria-label="搜尋商品" placeholder="搜尋...">
6. 對比度
WCAG AA 級要求：
- 一般文字：對比度 ≥ 4.5:1
- 大文字（18pt+）：對比度 ≥ 3:1
- UI 元件（按鈕邊框、focus）：對比度 ≥ 3:1
對 AI 而言，對比度高代表 OCR 與圖片識別準確度高（雖然 AI 主要讀 HTML，但對比度好的網站整體品質訊號強）。
7. 跳轉連結（skip-to-content）
<a href="#main-content" class="skip-link">跳至主要內容</a>
<header>...</header>
<nav>...</nav>
<main id="main-content">
<!-- 主要內容 -->
</main>
視障使用者用鍵盤跳過 header 直達內容；AI 爬蟲也能用此標記識別主內容區，這個邏輯與 AI Overviews 時代的版面結構設計強調的「可切片內容」一致。
8. 明確的錯誤訊息
<!-- ❌ 模糊 -->
<div class="error">錯誤</div>
<!-- ✅ 明確 -->
<div role="alert" class="error">
Email 格式不正確：example.com 缺少 @ 符號
</div>
明確訊息讓視障使用者了解問題、讓 AI Agent 知道怎麼修正，這也是迎接 Operator 與 Computer Use 時代的網站設計考量所強調的核心。
雙重達標檢查清單
每頁交付前必檢：
- 用 axe DevTools 跑 WCAG 違規（目標 0）
- 用 Lighthouse 跑 a11y 與 SEO 分數（目標 90+）
- 用 WAVE 視覺化檢查
- 鍵盤 Tab 鍵走完所有互動元件
- 螢幕閱讀器（VoiceOver / NVDA）測試 5 分鐘
- 對比度檢查（用 WebAIM Contrast Checker）
- 表單欄位都有 label 或 aria-label
- 圖片都有 alt（裝飾用 alt=""）
- 動態內容有 aria-live
- 錯誤訊息明確
法律與商業價值
法律
- 美國 ADA：違反可被訴訟（Domino's vs Robles 案）
- 歐盟 EAA（2025 年生效）：B2C 網站強制 a11y
- 台灣：政府機關強制、民間建議
商業
- 市場機會：全球 13 億身障者、消費力 USD 7 兆
- 品牌聲譽：明確的社會責任訊號
- SEO + AI-Ready 紅利（本篇重點）
元伸客戶實戰
以桃園一家精密零件外銷的 B2B 工業客戶為例，老闆原本只是想改版讓網站「看起來不要那麼老」，討論時順手把 a11y 升級也排進去：
升級工程：
- 加 ARIA 屬性 + skip-link
- 補完整 alt 文字
- 對比度修正
- 鍵盤導覽優化
- 錯誤訊息明確化
雙重收益：
| 收益 | 改善 |
|---|---|
| Lighthouse a11y 分 | 大幅提升至綠色 |
| WCAG 違規 | 降至 0 |
| AI 引用率（同期） | 明顯提升 |
| 自然流量 | 顯著成長 |
| 法律風險 | 大幅降低 |
老闆原本最在意的是改版預算，後來最有感的反而是收到「歐洲買主用 ChatGPT 查詢時主動找上門」的詢問——單一投資、多重回報，這是 a11y + AI-Ready 結合的最大優勢。
老闆最常踩的 4 個坑
- ❌ 以為 a11y 只服務視障：忽略 AI 工具也用同樣標記，等於白白丟掉流量紅利
- ❌ 只為 SEO 做標記：缺少 ARIA 等 a11y 專屬項目，AI Agent 操作就會卡關
- ❌ 沒測試就上線：「我們有做 a11y」結果一跑 axe 一堆紅字——這是最常見的尷尬場面
- ❌ 以為要額外大量預算：與 SEO 重疊度高、額外成本可控，但常被當成「另外報價」項目而被刪掉
我會建議什麼時候該做？
實際上看下來，這幾種情況我會建議優先把 a11y 納入：
- B2B 出口型企業：歐美客戶會用 AI 工具搜尋供應商，a11y 越好 AI 越願意引用你
- 官網改版：改版工程一定動到 HTML 結構，順手做 a11y 邊際成本最低
- 電商或會員系統：表單流程一旦對鍵盤友善，AI Agent 自動結帳的時代你就準備好了
除非你的網站是純內部使用（如 ERP 後台），否則我不太建議「以後再說」。
結語：通用設計就是好設計
「為極端使用者設計，能讓所有使用者受益」——這是通用設計的核心理念。a11y 為視障使用者設計，意外地讓 AI 工具、行動使用者、低速網路使用者都受益。
元伸科技為客戶建置時，a11y 是預設標準而非加值項目——這是專業網站的最低門檻，也是 AI-Ready 最划算的紅利來源。針對 B2B 形象官網的雙重達標需求，可參考企業形象網站方案。
如果你正在規劃改版、或對自家網站的 a11y 體質還沒底，歡迎找我們聊聊。
📞 03-366-1000 ｜ 🌐 www.ozchamp.com ｜ 免費諮詢 24hr 回覆
