網站無障礙設計（A11y）入門：別把使用者擋在門外

想像你開了一家店，門口卻擺了三階沒有扶手的樓梯。對大部分人來說，跨幾步就進去了；但對推嬰兒車的媽媽、坐輪椅的客人、提著大包小包的人來說，這三階就是一道牆。網站也是一樣，只是那道牆通常看不見——你滑得很順的頁面，對某些人來說可能根本進不去。

無障礙設計（accessibility，業界常縮寫成 a11y，因為 accessibility 這個字頭尾之間剛好有 11 個字母）講的就是怎麼把這些隱形的階梯拆掉。很多人一聽到「無障礙」就以為是給視障者的特殊功能、是做公益，跟自己的生意沒關係。但實際做下來你會發現，做好 a11y 受惠的遠不只身障者，連用手機在大太陽底下瞇眼看螢幕的你、暫時手受傷只能用鍵盤的同事，都一起受惠。這篇就用白話帶你入門，看完你會知道從哪幾件事開始做最划算。

什麼是網站無障礙設計（a11y）？

無障礙設計指的是讓所有人——包含視覺、聽覺、肢體或認知有障礙的使用者——都能順利感知、操作與理解網站內容的設計做法。它不是某個特定功能，而是一整套貫穿設計與開發的原則。

說得更白一點，a11y 的核心問題只有一個：「會不會有人因為某種限制而用不了我的網站？」這裡的「限制」範圍比你想的廣。除了天生的障礙，還包括暫時性的（手骨折只能單手操作）跟情境性的（在吵雜捷運上看不清也聽不到影片）。國際上最常被引用的標準是 W3C 制定的 WCAG（Web Content Accessibility Guidelines，網頁內容無障礙指引），目前主流版本是 WCAG 2.1 與 2.2，台灣政府的無障礙網頁規範也是以它為基礎。把它當成一份「讓網站更多人用得了」的檢查清單就對了。

WCAG 的四大原則是什麼？

WCAG 把無障礙濃縮成四個原則，英文縮寫剛好是 POUR：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）、穩健（Robust）。一個無障礙的網站，這四項缺一不可。

逐個拆開來看其實很好懂。可感知是指內容要能被使用者的感官接收到——圖片要有文字替代、影片要有字幕，不能只靠顏色傳達訊息。可操作是指介面元件都能被操作，最典型的就是「不用滑鼠、只靠鍵盤也能走完整個流程」。可理解是指內容跟操作方式要好懂，表單錯誤要講清楚錯在哪、怎麼修。穩健則是指網頁要寫得夠標準，讓螢幕報讀軟體等輔助科技能正確解讀。

WCAG 還分成 A、AA、AAA 三個達標等級。A 是最低門檻，AAA 最嚴格。實務上，AA 級是絕大多數網站該瞄準的目標，也是多數法規（包含台灣無障礙網頁規範）採用的等級。AAA 通常只有特定公部門或服務特殊族群的網站才需要追求。

色彩對比為什麼這麼重要？該設多少？

色彩對比決定了文字看不看得清楚，對視力退化、色弱或在強光下看螢幕的人尤其關鍵。WCAG AA 級要求：一般內文文字與背景的對比度至少要 4.5:1，大型文字（約 18pt 以上或粗體 14pt 以上）至少 3:1。

這是 a11y 裡最容易犯、也最容易修的問題。我們幫客戶做網站健檢時，色彩對比不足幾乎每次都上榜——最常見的就是設計師為了「質感」用了淺灰色的內文配白底，看起來很優雅，但對比度往往只有 2:1 出頭，遠低於門檻。我們審過一個品牌官網，光是把次要說明文字從 #AAAAAA 改成 #595959（對比度從 2.3:1 拉到 7:1），完全不動版面，可讀性就明顯改善，後台的平均停留時間在改版後一個月內也微幅上升。

實作上不用自己心算，丟進 WebAIM Contrast Checker 或瀏覽器開發者工具的對比檢查就會直接告訴你過不過。另外有一條鐵則：不要只用顏色來傳達訊息。例如表單錯誤如果只把欄位框變紅色，色盲使用者根本看不出來；正確做法是同時加上文字提示或圖示。配色這件事如果想做得既好看又達標，可以參考我們寫的網站配色方案設計指南。

鍵盤操作和螢幕報讀器要怎麼顧？

最實際的檢驗方法：把滑鼠收起來，只用 Tab、Enter、方向鍵能不能走完你網站的主要流程。如果中途卡住、跳到奇怪的地方，或根本看不出焦點在哪，那就是鍵盤可及性出了問題。

很多使用者（包含手部不便者與重度螢幕報讀器使用者）完全不靠滑鼠。要顧好鍵盤操作，有幾個重點：所有可點擊的東西都要能用 Tab 聚焦，而且 Tab 的順序要符合視覺上的閱讀順序，不能東跳西跳；聚焦狀態要看得見——很多人為了「乾淨」用 CSS 把 outline 拿掉，這是大忌，等於讓鍵盤使用者瞎著操作；長選單前面最好放一個「跳到主要內容」的略過連結，免得每次都要 Tab 過一整排導覽列。

螢幕報讀器（像 NVDA、VoiceOver）則是把網頁內容「念」出來給視障者聽。要讓它念得正確，關鍵在語意化的 HTML——標題用 h1～h6 照層級排、按鈕用 button 而不是套了點擊事件的 div、清單用 ul/ol。語意對了，報讀器自然就能正確導覽。這部分跟把網站架構寫乾淨是同一件事，延伸可以看SEO 友善的網站架構。

圖片 alt、ARIA 和表單標籤該怎麼做？

這三樣是 a11y 的日常基本功，做對了就解決一大半問題。圖片 alt 是替代文字，當圖片載不出來或被報讀器讀取時會用到——有意義的圖片要寫清楚它在傳達什麼（不是寫「圖片」兩個字），純裝飾性的圖片則用 alt="" 留空，讓報讀器直接略過。

ARIA（Accessible Rich Internet Applications） 是一組補強用的屬性，用來告訴輔助科技某個元件的角色或狀態，例如自訂的下拉選單、彈窗、分頁標籤。但這裡有個常被忽略的原則：能用原生 HTML 元素就別用 ARIA。原生的 <button>、<select> 本身就帶完整的無障礙行為，硬要用 div 加一堆 ARIA 去模擬，往往越補越錯。ARIA 是補丁，不是萬靈丹。

表單標籤 則是表單能不能用的關鍵。每個輸入欄位都要有對應的 <label> 並正確關聯（用 for 對上 id），這樣使用者點標籤文字就能聚焦欄位，報讀器也念得出「這格要填什麼」。光把提示文字塞進 placeholder 是不夠的——placeholder 會在你開始打字後消失，而且很多報讀器不會念它。表單是轉換的最後一哩路，這裡卡住客人就直接流失了，這也是表單設計優化時很值得一起檢查的環節。

做無障礙設計對 SEO 和生意有什麼好處？

最直接的好處是：a11y 跟 SEO 大量重疊，做好無障礙等於順手把一部分 SEO 也做了。語意化標籤、清楚的標題層級、圖片 alt、好讀的文字對比——這些 a11y 的要求，幾乎都是搜尋引擎喜歡的東西。

具體來說，圖片 alt 同時是報讀器的依據，也是 Google 圖片搜尋理解圖片的依據；正確的標題層級幫助報讀器導覽，也幫助搜尋引擎理解內容結構；文字版的內容（而非把字做成圖片）既讓報讀器念得到，也讓爬蟲抓得到。我們把無障礙改善納入幾個案子的健檢清單後觀察到，這類「同時利好 a11y 與 SEO」的調整，通常 CP 值最高。

除了 SEO，還有兩個現實考量。一是市場：依據國內身心障礙者統計，台灣領有身心障礙證明的人口超過 120 萬，再加上人口老化帶來的視力、操作退化族群，把他們擋在門外等於放掉一塊不小的市場。二是法規：台灣有「網站無障礙規範」（依循 WCAG），政府機關、公營事業及受補助單位的網站有達標要求，違規可能影響評鑑或補助。私人企業雖然多數沒有強制力，但隨著數位平權意識抬頭，把 a11y 做在前面總比事後被客訴或重做划算。如果你的網站從規劃階段就想把無障礙、SEO、速度這些底子一次打好，找一個懂這些的專業的網站架設團隊會省下很多後續補救的成本。

新手該從哪裡開始做 a11y？

從「不用花錢、馬上能改」的幾件事下手就對了：檢查色彩對比、補上圖片 alt、確認每個表單欄位都有 label、拔掉滑鼠用鍵盤走一遍主要流程。這四件事不需要重寫網站，卻能解決最常見的問題。

無障礙設計最大的迷思，是以為它要砍掉重練、要很多預算。其實對多數中小企業網站來說，先把上面那幾項基本功補齊，就已經跨過 60 分的及格線。我們的建議是：第一輪先用免費工具（瀏覽器內建的 Lighthouse 無障礙評分、WAVE 外掛）跑一次自動檢測，把紅字一條條清掉；第二輪再做人工測試，包括只用鍵盤操作、打開螢幕報讀器聽聽看。自動工具大約能抓出三到四成的問題，剩下的還是得靠人實際用過才知道。

說到底，a11y 不是一次性的專案，而是一種習慣——往後每次改版、每加一個新功能，都順手問一句「這個用不了滑鼠、看不清楚的人會卡住嗎？」把這個念頭內建進團隊，網站自然會越來越友善。

結語：把門打開，生意才進得來

無障礙設計講白了就是把擋路的階梯拆掉。它不是負擔，而是一種把網站做得更周到、同時又利好 SEO 跟市場的投資。

如果你正準備做網站或改版，我會建議從一開始就把 a11y 的觀念放進規劃裡，而不是等上線後才補。先從色彩對比、alt、表單 label 跟鍵盤操作這四件最划算的事做起，跑一次免費的自動檢測，就能立刻看到改善空間。想把無障礙放進整體建站流程一起考量，可以回頭看網站架設完整指南，把每一塊底子都打穩，網站才能真正替你把生意的門打開。