替一個社福單位改版時，理事長講了一句我到現在還記得的話：「我們的會員很多是長輩跟視障朋友，網站一定要他們也能用。」那天回程我一直在想，我們做網站的人，是不是太習慣拿一個眼睛很好、手很穩、滑手機很順的自己，去代入所有使用者？無障礙設計講白了不玄，就是把那扇本來只對一種人開的門，改成對每個人都開。這篇想講深一點——不只告訴你要做，還告訴你背後怎麼運作、標準改了什麼、哪裡最容易做錯。
無障礙到底在服務誰——絕對不是一小撮人
很多老闆第一個反應是：「會用到無障礙的人有多少？值得花這個錢嗎？」數字會讓你重新想一次。世界衛生組織估計，全球約有十三億人、也就是大約每六個人裡就有一個，帶著某種顯著的功能障礙生活。而且這個比例還在往上走，因為人越活越長。
速度、轉換率與維護成本的改善幅度會受網站內容、流量來源、裝置與技術架構影響。先量目前的 Core Web Vitals、錯誤率與轉換漏斗，變更後用同一期間及相同口徑比較，不拿未附樣本與日期的比例當保證。
無障礙設計還有一個常被忽略的好處，業界叫它「路緣石坡道效應」：當年為了讓輪椅過馬路，在人行道邊緣切出一道小斜坡，結果受惠的遠不只輪椅使用者——推嬰兒車的、拉行李箱的、騎腳踏車的，全都用上了。網站也一樣：你為視障者排的清楚標題結構，讓每個趕時間的人都更快抓到重點；你為手抖的人放大的按鈕，讓公車上單手操作的人都少按錯。無障礙從來不是替少數人做犧牲，而是把整體體驗的底線一起墊高。
WCAG 是什麼，現在的標準走到哪了
WCAG（網頁內容無障礙指引）是全球資訊網協會 W3C 制定的國際標準，也是全世界談網站無障礙時共同的那把尺。最新的 WCAG 2.2 已經在 2023 年 10 月 5 日正式成為 W3C 的推薦標準（Recommendation），在 2.1 的基礎上再補了九項成功準則。
WCAG 分 A、AA、AAA 三個符合等級。A 是最低門檻，缺了它有些人根本進不來；AAA 是理想中的滿分，實務上很難全站達成，也不是每種內容都適用；真正被國際法規與業界當成標準線的，是中間的 AA 級——你可以想成 A 是「能用」，AA 是「好用、不刁難人」，AAA 是「盡善盡美」。絕大多數企業與機構，把目標訂在 AA 就對了。
先搞懂機制：螢幕報讀軟體到底怎麼「看」你的網站
要真的把無障礙做對，得先知道輔助科技怎麼運作，否則很容易做出「看起來有做、實際沒用」的東西。這裡講一個工程師該懂、卻很少被教的觀念——無障礙樹（Accessibility Tree）。
當瀏覽器讀你的 HTML 時，會建兩棵樹。一棵是大家熟悉的 DOM，負責畫面渲染；另一棵就是無障礙樹，它是 DOM 的精簡版，只留下對輔助科技有意義的資訊——每個元件的角色（按鈕還是連結）、名稱、狀態（勾了沒、展開了沒）與彼此的關係。作業系統把這棵樹透過無障礙 API 對外開放，螢幕報讀軟體再去查詢這些 API，最後轉成語音或點字輸出給使用者。
這條路徑解釋了為什麼「語意正確的 HTML」是無障礙的地基。當你老實用 button 標籤做按鈕、用 h1 到 h6 標出標題層級、用 label 綁定表單欄位，瀏覽器就能自動在無障礙樹裡填好角色與名稱，報讀軟體一唸就對。反過來，如果你拿一個 div 加一堆 JavaScript 硬湊出一個「按鈕」，畫面上看起來一樣，但無障礙樹裡它什麼都不是——報讀軟體只會唸出一團空白，鍵盤也跳不進去。
那 ARIA 呢？很多人以為它是無障礙的萬靈丹，這是最大的誤解之一。ARIA 是用來補充語意、不是取代語意的，第一守則就是：能用原生 HTML 元素解決的，就別動用 ARIA。它只在原生標籤真的表達不了的複雜互動（像自訂分頁、樹狀選單）才上場，而且一旦用了就得自己補齊所有鍵盤行為與狀態同步，用錯反而比不用更糟。
四大原則 POUR：抽象的字，落地都是日常小事
WCAG 整套標準圍繞四大原則打轉，英文縮寫剛好是 POUR。
- 可感知（Perceivable）：資訊要能被感官接收到。圖片要有替代文字讓報讀軟體唸得出來、影片要上字幕、文字與背景要有足夠對比。這裡有個硬指標——AA 級要求一般內文的文字對比至少 4.5:1，大字級放寬到 3:1。那種在白底放淺灰小字的「文青風」，長輩跟低視力者常常整段讀不到。
- 可操作（Operable）：所有功能都要能操作得了。核心是「只靠鍵盤就能走完全程」，因為很多人不用滑鼠——手部障礙者、只能用替代輸入裝置的人都是。不能有滑鼠移過去才出現、鍵盤永遠碰不到的隱藏功能。
- 可理解（Understandable）：介面要好懂、可預測。導覽位置要一致、同樣的元件行為要一樣、表單填錯要明確告訴人錯在哪、要怎麼改，而不是紅一片了事。
- 穩健（Robust）：程式碼要夠正確、夠標準，好讓現在與未來各種輔助科技都能正確解析。這條正好呼應前面講的無障礙樹——地基穩，上面的輔助科技才接得住。
四條原則聽起來抽象，落地都是小事：只放圖片的聯絡資訊，視障者讀不到；對比太低的淺灰字，長輩看不清——無障礙在修的，往往就是這些。
WCAG 2.2 新增的九條，到底在補哪些破口
2.2 這九條新準則，幾乎都在補「行動裝置」與「認知、動作障礙」這兩塊過去比較弱的地方。挑幾條工程上最有感的講：
- 焦點不被遮蔽（2.4.11，AA）：當使用者用鍵盤 Tab 到某個元件時，它不能整個被固定的頁首、浮動的客服視窗或 cookie 橫幅蓋住。很多網站加了 sticky header 之後，鍵盤使用者根本看不到焦點跑到哪，這條就是在治這個病。
- 拖曳動作要有替代（2.5.7，AA）：任何用「拖」來完成的功能，都要能改用單指點擊完成，除非拖曳是本質必要。手抖、用觸控筆、只能單指操作的人，做不出精準的拖放。
- 目標尺寸（2.5.8，AA）：可點擊的目標至少要 24×24 CSS 像素（有例外條款）。擠在一起的小圖示、間距太窄的連結，對粗手指跟手部障礙者都是酷刑。
- 可及的身分驗證（3.3.8，AA）：登入流程不能強迫使用者通過「認知功能測驗」——像是辨認扭曲文字的驗證碼、憑記憶輸入一串東西。它要求提供不靠記憶或解謎的替代方式，例如允許密碼管理器自動填入、用電子郵件連結登入。長輩與認知障礙者常常就卡在這一步。
- 一致的求助方式（3.2.6，A）與冗餘輸入（3.3.7，A）：求助入口（客服、聯絡方式）在各頁要放在一致的位置；同一個流程裡已經填過的資訊，不要逼使用者再填一次。這些都是替記憶負擔重、操作吃力的人減摩擦。
落地怎麼做：一份不玄的工程檢查清單
把原則翻成每天寫程式時真的會碰到的動作，大致是這幾件：
- 用語意標籤搭骨架：標題只標層級不調字級，清單用 ul／ol，按鈕用 button，連結用 a，別全部 div 到底。
- 有意義的圖都給替代文字；純裝飾的圖給空替代文字讓報讀軟體略過，別唸一堆檔名。
- 對比先量再上：設計稿階段就驗過 4.5:1，別等上線被檢舉才回頭改配色。
- 全程用鍵盤自己走一遍：Tab 到得了每個功能、焦點看得見、順序合理、Esc 關得掉彈窗。
- 表單欄位一律綁 label，錯誤訊息講清楚「哪一欄、錯什麼、怎麼修」；可點區塊撐到 24 像素以上。
三個最常見的誤區，先講清楚免得白花錢
誤區三：以為無障礙是上線前最後才加的一道手續。越晚補越貴。語意結構、鍵盤流程、對比配色，都是從設計與架構階段就該長在裡面的東西，事後硬補往往得把版面拆掉重來。把無障礙當成需求的一部分，成本會差非常多。
台灣的法規現場：不是做心安的，是有規矩的
在台灣，網站無障礙不只是善意，是有明文規範的。主管權責一路從早年的研考會，轉到國家通訊傳播委員會（NCC），現在由數位發展部接手。現行的網站無障礙規範主要參採 WCAG 2.1，由 4 大原則、13 條指引、78 項成功準則構成，並訂出三個檢測等級。
對政府機關、公立學校及其附屬單位來說，這是硬性要求：網站至少要通過第一優先等級（A），而且自 106 年度起，凡是新設或改版的網站，都要以 AA 等級為設計標準。通過軟體檢測加人工評量後，可向認證機構申請對應等級的無障礙標章，分為 A、AA、AAA 與更嚴格的 A+。承接公部門標案的廠商，這一關過不了，案子就交不了。
民間企業目前雖然沒有一體適用的強制罰則，但方向很清楚——超高齡社會加上數位服務全面上網，無障礙正在從「加分項」變成「基本盤」，金融、醫療、電商這些高度倚賴線上的產業，越早跟上越省事。
一舉兩得的紅利：SEO 與更大的市場
講一件會讓老闆眼睛一亮的事：很多無障礙的做法，跟搜尋引擎優化根本是同一套動作。你給圖片寫的替代文字，報讀軟體要唸、搜尋引擎也拿去理解圖片內容；你排的語意化標題結構，輔助科技靠它導覽、搜尋引擎靠它抓重點。把網站做到無障礙，等於順手把基礎 SEO 的地基一起打好了。
繞了一圈，回到那位理事長的要求。無障礙從來不是替某一小群人做慈善，它是承認一件事：你的使用者，本來就長得千百種樣子。廷皓科技在高雄、台南、屏東協助企業與機構打造符合 WCAG 2.2 AA 精神的無障礙網站，從語意結構、鍵盤操作到對比與標章，把法規、體驗與搜尋友善一次顧到。想知道你的網站現在對所有人友不友善，歡迎找我們做一次體檢。
