無障礙
這個分類下的問題與解答。點標題可以展開答案，也可以點右上角進到單題頁面。
無障礙不是只為身心障礙者做的
「網頁無障礙」聽起來像是為視障者做的特殊設計，實際上它處理的是一個更廣的問題：不論使用者用什麼方式操作、在什麼條件下瀏覽，都能取得網站上的資訊。
會受益的人比想像中多：
- 視力退化的中高齡使用者——字太小、對比不足就看不清楚
- 在戶外強光下用手機的人——低對比的文字直接消失
- 網路不穩、圖片載不出來的人——沒有替代文字就不知道那裡有什麼
- 手拿東西只能單手操作的人——按鈕太小就點不到
- 在安靜場合無法開聲音的人——影片沒字幕等於沒內容
- 習慣用鍵盤操作的人——包含許多行政與工程背景的使用者
換句話說，無障礙的多數要求，本質上就是好的可用性設計。
四個核心原則
國際規範以四個原則為架構，取其英文字首常稱為 POUR：
| 原則 | 意思 | 具體例子 |
|---|---|---|
| 可感知 | 資訊要能被察覺到 | 圖片有替代文字、影片有字幕、色彩對比足夠 |
| 可操作 | 介面要能被操作 | 可用鍵盤操作、按鈕夠大、有足夠的操作時間 |
| 可理解 | 內容與操作要好懂 | 語意清楚、行為可預期、錯誤訊息說明清楚 |
| 穩健 | 各種工具都能正確解讀 | 語法正確、能被輔助科技正確讀取 |
輔助科技怎麼「讀」網頁
理解這件事，很多要求就說得通了。
視障使用者常用螢幕報讀軟體，它會把網頁內容依序念出來。它讀的是網頁的文字與結構，不是畫面。所以：
- 圖片——沒有替代文字，就只會念「圖片」，使用者不知道那是什麼
- 標題層級——正確的標題結構可以讓使用者快速跳到想看的段落，就像目錄。如果只是把文字放大加粗而沒有標題結構，這個功能就失效了
- 連結文字——「請點此」念出來完全沒有資訊。應該寫「下載產品型錄」
- 表單欄位——欄位要有明確的標籤，否則使用者不知道該填什麼
鍵盤操作是最基本的檢驗
有一個測試方法，任何人都能做：把滑鼠移開，只用鍵盤的 Tab 鍵在網站上移動看看。
應該要做到：
- 能依合理的順序走過所有連結與按鈕
- 看得出目前停在哪裡——焦點要有明顯的外框或標示
- 選單能展開、彈出視窗能關閉
- 不會卡在某個元素出不來
如果按了幾下 Tab 就完全看不出焦點在哪，那這個網站對鍵盤使用者是不可用的。這是最容易發現、也最常見的問題。
與 SEO 的關係
兩者有相當的重疊，因為搜尋引擎的爬蟲跟螢幕報讀軟體一樣，讀的是文字與結構，不是畫面。
共同受益的項目：
- 圖片的替代文字
- 正確的標題階層
- 有意義的連結文字
- 清楚的頁面結構
- 不把重要文字做成圖片
所以把無障礙做好，搜尋能見度通常也會一併改善。圖片替代文字的寫法見圖片的替代文字與檔名該怎麼寫。
常見的三個誤解
「做了 RWD 就等於無障礙」
不是。RWD 處理的是版面在不同螢幕下的呈現，無障礙處理的是資訊能不能被所有人取得。兩者有重疊但不相同。
「無障礙網站一定很醜」
不會。多數要求與視覺設計無關——替代文字、標題結構、鍵盤操作都不影響外觀。唯一有影響的是色彩對比，但那是可以在設計階段就納入的條件，見網站配色與品牌識別怎麼定。
「裝一個無障礙外掛就好了」
市面上有宣稱一鍵解決的懸浮工具列外掛。它們可以提供字級調整等便利功能，但無法修正底層的結構問題——圖片沒有替代文字、標題階層錯亂，外掛都補不回來。
法規檢測看的也是網站本身的實作，不是有沒有裝外掛。
本文說明無障礙的概念與實務要點。我國規範版本與準則內容會隨國際標準更新而調整，實際適用的版本、等級要求與檢測方式，請以主管機關（數位發展部）之無障礙網路空間服務網公告為準。
法規要求的對象
我國依《身心障礙者權益保障法》相關規定，各級政府機關、機構與學校所建置的資訊服務網站，應通過無障礙檢測並取得認證標章。
主管機關為數位發展部，透過「無障礙網路空間服務網」辦理檢測、稽核與標章核發。
誰會被要求
- 政府機關與其附屬機構
- 公立學校
- 承接政府標案的網站——招標文件通常會明訂等級要求
- 接受政府補助的專案，視補助條件而定
民間企業網站原則上沒有強制要求，但若要投政府標案、或客群包含公部門，就會遇到。是否值得主動做，見一般企業網站需要做無障礙嗎。
標章的等級
依檢測結果分為三個等級，由基本到嚴格：
| 等級 | 相當於 | 常見要求對象 |
|---|---|---|
| A | 第一優先等級 | 法規的基本門檻 |
| AA | 第二優先等級 | 近年多數標案的要求 |
| AAA | 第三優先等級 | 特殊需求，較少見 |
實務上以 AA 為主。 承接標案前請詳閱招標文件的具體要求，不要假設 A 級就夠。
申請流程
- 依規範進行網站開發或改善——這是最花時間的部分，且應該在設計階段就納入，不要等做完再補
- 使用官方提供的檢測工具進行機器檢測，產出檢測報告
- 進行人工檢視——機器測不出所有問題，例如替代文字寫得對不對、標題結構是否合理
- 至無障礙網路空間服務網登錄會員並提出申請，上傳檢測報告
- 等待審核——包含人工審核階段
- 核發標章，於網站上顯示
實務上最常卡住的地方
人工審核階段
機器檢測通過不代表會過。人工審核會實際檢視內容品質——例如替代文字是否確實描述了圖片、標題層級是否合乎邏輯。有問題就會被退回，需要修正後重送。
如果反覆未通過又不確定原因，可以直接聯繫受理單位詢問。
時程要預留
從送件到取得標章需要時間，且可能需要來回修正。如果有明確的上線期限或標案交付期限，這段時間必須事先納入規劃，不要排在最後一週。
內容更新後可能失效
標章是針對送審當下的網站狀態。上線後如果同仁上傳了沒有替代文字的圖片、或貼上格式錯亂的內容，網站的實際符合度就下降了。
這是最容易被忽略的一點——取得標章不是終點，日常的內容維護才是。內容編輯該注意什麼，見內容編輯者的無障礙注意事項。
標章有時效
標章有有效期限，到期需重新檢測。續檢時會適用當時的最新規範版本——如果期間規範有更新，可能會有新增的準則需要處理。
建議做法：
- 把標章到期日納入公司的到期日總表，與網域、主機、SSL 一起管理
- 到期前半年就開始評估，預留修正時間
- 規範更新時，先請廠商做差異評估
發包時該怎麼寫
如果專案需要取得標章，建議在合約與需求文件中明確載明：
- 要求的等級（通常是 AA）
- 適用的規範版本——直接引用主管機關現行公告的規範名稱與版次
- 是否包含代為申請標章，以及審核未過時的修正責任
- 驗收依據——以取得標章為準，或以檢測報告為準
這幾項若沒寫清楚，驗收時很容易產生爭議——廠商認為交付了符合規範的網站，業主認為沒拿到標章就是沒完成。合約條款的完整說明見網站設計合約應該包含哪些條款。
成本與時程的實話
無障礙網站的開發與一般網站相比，需要額外的工時：結構要更嚴謹、每一張圖都要寫替代文字、每一個互動都要能用鍵盤完成、還要經過檢測與審核的來回。
因此報價會高於同規模的一般網站，時程也較長。這是合理的，發包時應把這部分預算與時間一併編列。
本文說明無障礙的概念與實務要點。我國規範版本與準則內容會隨國際標準更新而調整，實際適用的版本、等級要求與檢測方式，請以主管機關（數位發展部）之無障礙網路空間服務網公告為準。
不需要技術背景也能檢查的項目
無障礙的技術細節很多，但有一批項目是業主自己就能檢查的。這些也正是實務上最常出問題的地方。
以下依「自己就能測」到「需要請廠商確認」排列。
一、鍵盤操作
把滑鼠移開，只用鍵盤的 Tab 鍵移動、Enter 鍵選取，走一遍網站。
檢查點
- 看得出焦點在哪嗎？ 應該有明顯的外框或標示
- 移動順序合理嗎？從上到下、從左到右
- 選單能展開嗎？
- 彈出視窗能用鍵盤關閉嗎？
- 有沒有卡住出不來的地方？
焦點看不見是最常見的問題，通常是設計時為了視覺乾淨而把預設的焦點外框拿掉了。這是可以修正的，且不影響滑鼠使用者的體驗。
二、色彩對比
淺灰字配白底看起來很有設計感，但在戶外強光下、或年長使用者眼中可能完全看不清楚。
檢查點
- 內文與背景的對比是否足夠
- 按鈕上的文字是否清楚
- 放在圖片或影片上的文字，畫面變亮時還看得到嗎
- 是否只用顏色傳達資訊——例如「紅色代表缺貨」，色覺障礙者看不出來，應同時加上文字或圖示
有線上工具可以輸入兩個顏色的色碼，直接算出對比是否達標。設計階段就該納入，見網站配色與品牌識別怎麼定。
三、圖片的替代文字
在瀏覽器中對圖片按右鍵檢視原始碼，或使用瀏覽器的檢查工具，可以看到圖片是否有替代文字。
檢查點
- 有意義的圖片是否都有描述
- 描述是否確實說明了圖片內容，而不是「圖片」「未命名」
- 是否有堆砌關鍵字——把想排名的字全塞進去，螢幕報讀軟體會全部念出來，對使用者是干擾
- 純裝飾的圖片是否留空
寫法見圖片的替代文字與檔名該怎麼寫。
四、標題結構
螢幕報讀軟體的使用者可以用標題快速跳轉，就像用目錄找章節。前提是標題要有正確的層級結構。
常見錯誤
- 用放大加粗代替標題——看起來像標題，但結構上只是普通文字
- 層級跳號——大標題之後直接跳到第三層
- 為了字體大小而選標題層級——想要字小一點就用第四層，這是用錯了工具
正確做法是依內容的邏輯層次選擇標題層級，字體大小另外用樣式調整。
五、連結與按鈕的文字
螢幕報讀軟體可以列出頁面上所有連結供使用者選擇。如果一頁上有二十個「請點此」，這個功能就沒有用了。
- 不好：請點此、更多、閱讀更多、詳細內容
- 建議：下載產品型錄、查看空調設備規格、閱讀完整案例
這對搜尋引擎理解頁面也有幫助，屬於兩者共同受益的項目。
六、表單
- 每個欄位是否有明確的標籤，而不是只靠欄位內的提示文字
- 必填欄位是否有明確標示，且不只用顏色標示
- 錯誤訊息是否說明了怎麼修正——「格式錯誤」不夠，應該說「電話請輸入 10 碼數字」
- 錯誤發生時，焦點是否移到出錯的欄位
- 驗證碼是否有替代方案——只能看圖辨識的驗證碼，視障者無法通過
手機端的表單設計見手機版表單怎麼設計才不會流失客戶。
七、影音內容
- 影片是否有字幕
- 是否有自動播放的聲音——應避免，或提供明顯的暫停控制
- 影片承載的重要資訊，頁面上是否也有文字版本
八、點擊目標的大小
手指的接觸面積遠大於滑鼠游標。過小或過密的可點擊元素，會造成誤觸。
檢查方式很簡單：用手機實際點點看每個按鈕與連結，特別注意頁尾的連結群、文章內文中的連結、以及分頁的數字按鈕。
九、需要請廠商確認的項目
這些需要看程式碼或用專業工具才能確認：
- 頁面是否宣告了正確的語言
- 語意標記是否正確使用
- 動態內容變更時，是否會通知輔助科技
- 是否有「跳至主要內容」的捷徑連結
- 自訂的互動元件是否正確標示了角色與狀態
自動檢測工具測不出什麼
這一點很重要：機器只能檢查有沒有，不能檢查對不對。
- 它能檢查圖片有沒有替代文字，不能判斷描述得對不對
- 它能檢查標題層級有沒有跳號，不能判斷結構是否合乎內容邏輯
- 它能檢查對比數值，不能判斷疊在圖片上的文字實際看不看得清楚
所以自動檢測是必要的第一步，但不是全部。人工檢視與實際操作測試無法省略。
本文說明無障礙的概念與實務要點。我國規範版本與準則內容會隨國際標準更新而調整，實際適用的版本、等級要求與檢測方式，請以主管機關（數位發展部）之無障礙網路空間服務網公告為準。
先講結論
民間企業網站原則上沒有法規強制要求。但做到基本的無障礙水準，對多數企業是划算的——不是因為道德壓力，而是因為它處理的是實際的商業問題。
問題在於做到什麼程度。全面追求標章等級與只做基本改善，成本差距很大。
什麼情況該認真考慮
一、有政府或公部門客戶
要投政府標案，招標文件通常會明訂無障礙等級要求。這時不是「要不要做」，而是「不做就沒有投標資格」。
二、客群偏中高齡
視力退化是普遍現象。字太小、對比不足、按鈕太密，會直接影響這個族群能不能使用你的網站。
醫療、長照、保險、旅遊、傳統產業的 B2B，都值得特別注意。
三、屬於公共性質的組織
學校、協會、基金會、公益團體，即使沒有法規要求，做到基本水準也符合組織的定位與社會期待。
四、網站是主要的業務通路
如果訂單、預約、報名主要來自網站，那麼任何一種使用者無法完成流程，都是實際的營收損失。
可以只做基本的情況
- 純展示型的形象網站，主要靠業務與人脈接觸客戶
- 客群明確且年輕，網站互動單純
- 預算有限，需要優先處理其他問題
但即使如此，下一段的基本項目仍建議做到——因為它們幾乎不增加成本。
幾乎零成本的基本項目
這些在網站架設階段順手做，不會明顯增加費用；但事後補做的成本高得多。
- 色彩對比足夠——設計階段納入即可，不影響美感
- 圖片有替代文字——後台加一個欄位的事，且對搜尋也有幫助
- 標題結構正確——本來就該這樣做，對搜尋引擎同樣重要
- 連結文字有意義——把「請點此」改成具體描述
- 鍵盤焦點看得見——不要為了視覺乾淨而移除焦點外框
- 表單欄位有標籤、錯誤訊息說清楚
- 點擊目標夠大——手機時代本來就該注意
這七項做到，就已經涵蓋了實務上大部分的使用障礙。投報率最高的區間就在這裡。
成本會明顯上升的部分
如果要達到標章等級，額外的成本來自：
- 整站結構要更嚴謹，自訂元件要正確標示角色與狀態
- 每一個互動流程都要能純鍵盤完成
- 所有影音要有字幕與文字版本
- 機器檢測 + 人工檢視 + 送審 + 修正的來回工時
- 後續維護時要持續維持符合度
這些是真實的工時，因此報價會高於同規模的一般網站。發包時應把這部分預算與時程一併編列，見台灣的無障礙標章。
順帶得到的三個效益
搜尋能見度
替代文字、標題結構、有意義的連結文字，都是搜尋引擎判讀內容的依據。無障礙與 SEO 有相當的重疊。
可用性整體提升
對比足夠、按鈕夠大、錯誤訊息清楚——這些對所有使用者都是改善，不只是身心障礙者。
降低法律與形象風險
國際上已有企業因網站無法使用而遭提起訴訟的案例。台灣目前對民間企業沒有相同強度的要求，但趨勢值得留意，尤其是規模較大或具公共性的企業。
常見的錯誤投資
裝一個無障礙外掛就當作做完了
市面上有宣稱一鍵合規的懸浮工具列。它們能提供字級調整等便利功能，但無法修正底層的結構問題——圖片沒有替代文字、標題階層錯亂、鍵盤無法操作，外掛都補不回來。
法規檢測看的也是網站本身的實作。把預算花在外掛而不是實際改善，是常見的浪費。
做完就不管
網站上線時符合，不代表半年後還符合。同仁上傳沒有替代文字的圖片、貼上結構錯亂的內容，符合度就下降了。
這是最容易被忽略的持續成本，見內容編輯者的無障礙注意事項。
一個務實的建議
如果現在的網站沒有做無障礙，不必回頭全面整改——投入與效益不成比例。
建議的順序：
- 先做上面那七項基本項目，多數可以在既有網站上調整
- 從今天起新增的內容都做對——特別是圖片替代文字
- 下次改版時，在需求中就納入無障礙要求——建置階段做，成本遠低於事後補
這樣就能拿到大部分的效益，而不必承擔全面整改的成本。
本文說明無障礙的概念與實務要點。我國規範版本與準則內容會隨國際標準更新而調整，實際適用的版本、等級要求與檢測方式，請以主管機關（數位發展部）之無障礙網路空間服務網公告為準。
網站符合，不代表內容符合
這是最容易被忽略的一環：廠商交付了符合規範的網站，但上線半年後，符合度已經下降了。
原因不是程式壞掉，是內容。同仁上傳了沒有描述的圖片、從 Word 貼上帶著錯亂格式的文字、把整張活動海報當成公告發布——這些都會讓原本符合的網站變得不符合。
這一篇是給實際在後台發文的人看的。不需要技術背景，記住幾個習慣就好。
一、上傳圖片時填替代文字
最重要的一項，也是最常被跳過的。
怎麼寫
想像你在電話中向對方描述這張圖。如實說明圖片的內容或功能。
- 不好：圖片、照片1、未命名、DSC_0342
- 不好：網頁設計 網站設計 公司 桃園（堆砌關鍵字，報讀軟體會全部念出來）
- 建議：新產品發表會現場，總經理於台上致詞
純裝飾的圖片留空就好
背景花紋、分隔線、純視覺的裝飾元素，替代文字應該留空。這不是偷懶，而是讓報讀軟體跳過它，避免使用者被無意義的描述打斷。
判斷方式：如果這張圖不見了，資訊會不會缺少？ 不會的話就是裝飾。
二、不要把文字做成圖片
這是造成無障礙與搜尋雙重損失的做法。
常見情況：把活動說明做成一張海報圖直接發布、把價目表做成圖片、把公告內容截圖上傳。
圖片裡的文字，螢幕報讀軟體讀不到，搜尋引擎也讀不到。 對使用者而言，那則公告等於不存在。
正確做法
圖片可以放，但同時把內容打成文字放在頁面上。海報作為視覺呈現，文字作為實際內容。
三、用標題功能，不要用放大加粗
編輯器裡的「標題一」「標題二」不只是把字變大——它在頁面結構中建立了層次，讓報讀軟體的使用者可以像看目錄一樣快速跳轉。
常見錯誤
- 把文字放大加粗當標題——看起來像，結構上不是
- 為了字體大小而選層級——想要字小一點就用第四層
- 層級跳號——標題一之後直接用標題三
正確做法是依內容的邏輯層次選層級。覺得字太大想調整，那是樣式的問題，請廠商調整樣式，不要用錯層級來遷就。
四、連結文字要具體
報讀軟體可以列出頁面上所有連結供使用者選擇。一頁上二十個「請點此」，這個功能就失效了。
- 不好：詳細內容請點此
- 建議：請參閱115 年度招生簡章
另外，如果連結會開新視窗或下載檔案，最好在文字中說明——例如「產品型錄（PDF，2MB）」。
五、從 Word 貼上時要清除格式
直接從 Word 貼上，會帶入大量隱藏的格式碼，可能造成：
- 字體、大小、顏色與網站其他部分不一致
- 結構混亂，標題變成一般文字加樣式
- 在手機上版面跑掉
- 檔案冗長，影響載入
編輯器通常有「以純文字貼上」或「清除格式」的功能，貼完後再用編輯器本身的標題與清單功能重新整理。這是最實用的一個習慣。
六、表格只用來放表格資料
表格是用來呈現有列有欄的資料，不要用表格排版。
用表格排版的內容，在手機上會破版，在報讀軟體中會被念成一格一格的資料，完全無法理解。
另外，真正的資料表格應該設定標題列，讓報讀軟體知道每一欄是什麼。編輯器通常有這個選項。
七、影片與檔案
- 影片盡量提供字幕，或在頁面上附上文字重點
- PDF 要能選取複製文字——掃描成圖片的 PDF，報讀軟體與搜尋引擎都讀不到
- 提供檔案時註明格式與大小，讓使用者決定要不要下載
八、顏色不要單獨承載資訊
「紅色為已額滿」「綠色代表可報名」——色覺障礙的使用者看不出差別。
解法很簡單：顏色照用，但同時加上文字或符號。 例如「已額滿（紅色）」或在項目後加註文字。
發文前的三十秒檢查
- 圖片都填了替代文字嗎？裝飾圖留空了嗎？
- 有沒有把重要文字做成圖片？
- 標題是用標題功能，不是放大加粗？
- 連結文字看得出要去哪裡嗎？
- 從 Word 貼上的內容清除格式了嗎？
這五項養成習慣後幾乎不花時間，卻能維持網站的長期品質。
給管理者的建議
- 把這份清單做成後台的操作提示，或印出來貼在編輯人員的位置
- 新人交接時一併教學——這是最常斷掉的環節
- 後台的替代文字欄位可以設為必填，從源頭避免遺漏
- 定期抽查——每季看幾則最近發布的內容
如果網站有取得無障礙標章，這些習慣直接關係到續檢能否通過，見台灣的無障礙標章。
本文說明無障礙的概念與實務要點。我國規範版本與準則內容會隨國際標準更新而調整，實際適用的版本、等級要求與檢測方式，請以主管機關（數位發展部）之無障礙網路空間服務網公告為準。
準備好讓網站 開始幫你帶生意了嗎？
不論是要做新網站、救舊網站，還是只想先聊聊方向——先諮詢，不用先付錢，我們照實給你建議。