搜尋列（Search Bar）提供第二條路徑找到內容——不是每個人都能靠瀏覽選單找到東西
AI 也許幫你省了 80% 的時間。但剩下省不掉的，卻決定了誰能用你的產品。這份指南帶你認識那 20%。
你做的每一個設計決定，都在決定誰能用、誰不能用。
1. 打開你自己的網站，把滑鼠收起來，只用 Tab 和 Enter 操作 60 秒。
2. 把螢幕亮度調到最低，試著讀完一段文字。
3. 想像你的家人打開同一個頁面。他們找得到按鈕嗎？還是先被彈出廣告困住了？
如果任何一個讓你猶豫了——全球 95.9% 的網站都有這些問題（WebAIM 2025）。你做好了，就是那 4.1%：更多人能用你的產品、AI agent 可能更願意推薦你的頁面、進入國際市場少一道法律障礙。
很多時候我們不是不願意做，而是不知道要做、不知道能幫助到誰。台灣人在國際上的形象是友善的，但我們做出來的數位產品，對自己人卻不夠友善。要打入國際市場，無障礙更是基本門檻——歐盟 EAA 2025 年已經生效，不合規就進不去。但如果只是為了過關而做到最低標準，那不是友善，那只是合規。
我自己大量使用 AI 寫 code、做設計、跑測試。它確實幫我省下很多時間。但用了一陣子之後，我發現幾件事：
AI 已經幫我掃掉了最煩的 40%。省下來的時間，或許足夠我花時間思考如何把產品做得讓人用起來更舒服一點。然後把這些經驗建立成流程、建立成標準、建立成 skill，讓接下來每一個分享、服務、產品，都是以提供更多人幫助而非障礙為出發點。這份指南是我在嘗試的起點。
補充一個事實：AI agent 操作網站時依賴的是和螢幕閱讀器同一棵 accessibility tree（CHI 2026 實測：成功率從 78% 跌到 42%）。你的網站對人不友善，對 AI 也不友善。
試試右上角的深色模式切換。你大概每天都在手機上切深色模式吧？這就是無障礙。不是什麼特殊功能，是讓不同的人在不同情境下都能舒服地使用。
這段文字現在的對比度是正常的。勾選下面的選項，體驗對比度不足的感覺。想像你在大太陽下看手機、或者你的視力不太好——這就是低對比度文字帶來的閱讀障礙。全球超過 22 億人有視覺困難，其中 80% 不是全盲，而是「看不清楚」。
WCAG 2.2 AA 要求一般文字對比度至少 4.5:1。勾選後對比度降到約 2:1，這是很多網站實際的對比度。你覺得難讀嗎？低視力者、老年人、在戶外看手機的人，每天都在讀這樣的文字。
Accessibility / 無障礙 / 可及性 / 可達性 / 數位親和力
不是為了符合某個規範，而是確保每一個人，不論能力、年齡、處境、使用的工具，都能平等地取得資訊、完成操作、參與其中。
包括你 85 歲的奶奶、打石膏的上班族、在吵雜咖啡廳看沒字幕影片的你、瞇眼讀手機的大學生、被倒數計時器逼到無法思考的人、語言不通只能靠圖示猜的旅客、網路很慢只能等文字先載入的偏鄉使用者。也包括從來沒想過這些事的設計師、工程師、產品經理，他們不知道自己每天的決定，正在決定誰能用、誰不能用。
也包括正在讀這段文字、覺得眼睛開始不太舒服的你。
如果你覺得哪裡不對勁
無障礙不是某一個人的額外工作。它是我們每個人本來就在做的事的一部分——只是過去沒有意識到。當你寫一段文案、畫一個按鈕、寫一行 code，你都在決定某個人能不能用這個產品。
不是「誰該做什麼」，而是「我們一起確認什麼不能漏掉」。
不需要每個人都是專家，AI 補足技能缺口，但最終的判斷是人的。
AI 時代，每個人都在設計東西——網頁、app、簡報、表單、甚至一封 email。只要你做的東西會被別人用，以下這些就跟你有關。
無障礙設計可以從四個面向來理解。每一個面向做好了，同時幫到四種對象：
三件事：
但 AI 不能取代的是：與真實使用者的對話、對人類處境的同理心、以及「這個設計讓人感覺如何」的判斷。自動化能抓到約 30% 的無障礙問題，其餘 70% 需要人類的感知和判斷。
以下工具已安裝或可免費取得，涵蓋從寫 code 到上線前的完整檢測流程。
請勿相信「一鍵合規」「自動修復無障礙」這類術語
這類產品稱為「覆蓋層（Overlay）」——加一行 JavaScript 就宣稱讓網站符合 WCAG。實際上，使用覆蓋層的網站反而更容易被告：AccessiBe 在 2025 年被美國 FTC 以虛假宣傳罰款 100 萬美金；UserWay 在 2026 年遭集體訴訟；多家安裝了覆蓋層的企業仍被身障使用者提起 ADA 訴訟，因為覆蓋層根本沒有解決底層問題。美國全國視障者聯盟（NFB）公開反對這類產品，WebAIM 調查顯示 72% 的身障使用者認為它們無效甚至更糟——覆蓋層注入的 ARIA 經常跟原始 HTML 衝突，讓螢幕閱讀器更混亂。
在 AI agent 的時代，覆蓋層更加無意義：agent 讀的是底層的 accessibility tree，不是表面的 JavaScript 修飾。你花錢買的覆蓋層，AI 連看都不看。
字體大小、對比度調整這類使用者偏好 widget 本身無害。問題是把它包裝成「合規解決方案」——這不是無障礙，是行銷。
記住：所有自動化工具加總只能抓到約 30-40% 的無障礙問題。色彩語意、內容可理解性、操作流程合理性，仍需要人類判斷與真實使用者測試。工具是「第一道防線」，不是「唯一防線」。
不管是誰做的、用什麼方式做的，每個產出物在交付前必須通過對應的無障礙驗證。任何人（包括 AI）都可以執行這些檢查。
用 Tab 鍵在這個頁面上移動，注意每個元素周圍的橘色邊框——那就是 focus indicator。先勾選下面的選項把它關掉，再 Tab 到按鈕看看。Shift+Tab 可以退回前一個可聚焦的元素（例如按鈕或 checkbox）。
很多設計師覺得 focus 邊框「很醜」所以加上 outline:none。結果鍵盤使用者完全不知道自己在哪——就像在黑暗中走路，腳下沒有地板的感覺。
按下面的按鈕，你的焦點會被困在一個假的「訂閱」彈窗裡。Tab 怎麼按都出不來——這就是鍵盤陷阱（keyboard trap）。只有按 Esc 才能逃脫。
在 AI 時代，大多數人不只做一件事。選一個最接近你的角色，看看你每天的決定如何影響無障礙。
在這裡，你將親身體驗不同使用者面對網站的真實感受。每完成一個模擬，都會更深刻理解無障礙設計的價值。
模擬黃斑部病變、白內障等造成的視覺模糊。整個頁面將變得模糊，你能完成任務嗎？
全球約 8% 男性有色覺異常。啟動後請觀察頁面上的彩色按鈕、徽章、錯誤/成功提示——原本靠顏色區分的資訊會變得無法辨識。
螢幕全黑，只能用方向鍵逐一「聽」取頁面元素。體驗全盲者如何理解網頁。
你的游標會不受控制地顫抖。體驗帕金森症患者面對的精確操作挑戰。
WCAG 2.2 AA 要求觸控目標至少 24x24px，建議 44x44px。試試點擊下面兩組按鈕，感受差異。
太小（12x12px）：
夠大（44x44px）：
滑鼠完全停用。只能靠 Tab、Enter、方向鍵操作整個頁面。
倒數計時、彈出通知、自動捲動——覺得很煩嗎？這就是一個充滿廣告和彈窗的網頁。對 ADHD 使用者來說，每個網站都是這樣。ADHD 是神經多樣性的一種，不是「不專心」——是大腦對刺激的過濾機制不同，所有東西同時湧進來。
感覺過載只是自閉症譜系的一個面向。自閉症使用者也可能需要：可預測的導航（同樣的東西永遠在同樣的位置）、明確直白的語言（不用隱喻或模糊指示）、不突然改變的介面（動畫、彈窗、自動播放都是壓力來源）。這個模擬讓你體驗其中最直觀的部分——感覺過載。
閱讀障礙也是神經多樣性的一種——不是「不聰明」，是大腦處理文字符號的方式不同。字母互換、行距跳動、文字模糊。對中文使用者，相似字（人/入、的/得）和擁擠的排版是更大的問題。
對閱讀障礙者和低視力者，字距和行距的影響比字體本身更大。中文不存在 b/d 鏡像混淆問題，所以 OpenDyslexic 等特殊字體對中文無效——真正有幫助的是間距和大小。
在 AI 時代，每個人都可能是 builder。這段文字讓你體驗字距、行距、字體大小對閱讀舒適度的影響。對閱讀障礙者和低視力者來說，這些不是美學選擇，是能不能讀完一段話的差別。試試「擠在一起」——這是很多網站的實際狀態。
沒有字幕的音訊，你能理解多少？體驗聾人面對無字幕影片的真實處境。
焦慮症不是「想太多」。倒數計時、模糊的錯誤訊息、不確定按鈕有沒有按到——這些設計對一般人是小困擾，對焦慮症使用者是真實的恐慌來源。清楚的回饋、充足的時間、明確的確認，就能大幅降低壓力。
手臂骨折、大太陽下看手機、一手抱小孩——每個人都可能成為臨時障礙者。微軟的包容性設計框架指出：永久、臨時、情境障礙的設計解方往往相通。
無障礙設計的四大原則：可感知（看不到的用聽的，聽不到的用看的）、可操作（鍵盤能做的事滑鼠也能，反之亦然）、可理解（清晰語言、一致導航）、穩健性（相容各種輔助技術）。出自 WCAG 2.2。
全球約 13 億人（16%）有某種形式的障礙。台灣約 120 萬持有身心障礙證明。但任何人在任何時刻都可能經歷臨時或情境障礙。
螢幕閱讀器（NVDA、VoiceOver）、螢幕放大鏡、語音控制、頭部追蹤、眼球追蹤、特殊鍵盤、單指操作切換——了解使用者如何使用你設計的產品。
試著在下面兩個欄位打字，看看差異。
錯誤做法：用 placeholder 當 label
打字後提示消失了——你還記得這欄要填什麼嗎？
正確做法：用 label + placeholder
label 永遠在，placeholder 只是補充提示。
色盲使用者看不到紅色。哪一種他們讀得懂？
只有顏色：
顏色 + 圖示：
顏色 + 圖示 + 建議：
第三種加了 role="alert"，螢幕閱讀器會自動念出錯誤訊息。
尚未開始任何體驗。每完成一個模擬，你對使用者的理解就會更深一步。（共 10 個沉浸體驗）
測試你對 WCAG 標準與無障礙實務的理解。答對越多，離「知識達人」徽章越近！
每個步驟都小到不好意思不做。從最上面開始，做到你覺得夠了為止——回頭一看，你會發現自己做了不少。
點選任一階段查看詳細任務、各角色職責與無障礙關鍵行動。