無障礙設計跟 SEO 其實是同一件事
很多人以為網站無障礙設計只是為了「符合法規」或「對身障者友善」。這兩個目的當然重要，但大部分商家不知道的是——你為了無障礙所做的很多事情，同時也在幫你的 SEO 加分。
想想搜尋引擎是怎麼理解你的網站的。Google 的爬蟲不會「看」你的網頁，它只能讀程式碼。它看不到圖片裡的內容、聽不到影片裡的聲音、也不會用滑鼠去點選下拉選單。從某個角度來說，搜尋引擎爬蟲就是一個「看不見」的使用者。
而無障礙設計做的事情，就是確保「看不見」的使用者也能完整地理解和操作你的網頁。你寫的 alt 文字讓螢幕閱讀器知道圖片是什麼，同時也讓 Google 知道圖片是什麼。你用語意化的 HTML 標籤讓輔助技術理解頁面結構，同時也讓 Google 理解頁面結構。
根據 WebAIM 在 2025 年的調查，全球排名前 100 萬的網站中，有 96.3% 至少有一個 WCAG 2 的違規項目。這代表絕大多數的網站都有無障礙的問題，而這些問題很可能也在拖累他們的 SEO 表現。
圖片 alt 文字：最被低估的 SEO 機會
圖片的 alt 文字（替代文字）是無障礙設計中最基本的要求之一，也是最常被忽略的。
alt 文字的原始目的是讓視障使用者透過螢幕閱讀器了解圖片的內容。但對搜尋引擎來說，alt 文字是理解圖片內容的主要依據。
根據 Google 的圖片 SEO 指南，Google Images 的流量佔所有 Google 搜尋的將近 20%。如果你的圖片沒有 alt 文字，Google 就很難在圖片搜尋中顯示你的圖片。
好的 alt 文字寫法
不是隨便寫就好。以下是幾個原則：
描述圖片的實際內容，而不是塞關鍵字。「台北信義區的 A13 大樓外觀，暖黃色的燈光照亮玻璃帷幕」比「台北建築設計建築公司推薦」好得多。
保持簡潔但有描述性，通常 125 個字以內。
如果圖片純粹是裝飾用途（像是分隔線或背景圖案），用空的 alt 屬性（alt=""），讓螢幕閱讀器跳過它。
如果圖片包含文字（像是資訊圖表），alt 文字要包含那些文字的內容。
常見的錯誤
很多內容管理系統（CMS）在上傳圖片時，會自動用檔案名稱當作 alt 文字。結果你的 alt 文字就變成「IMG_20260305_143022.jpg」或「photo-1.png」這種完全沒有意義的東西。
另一個常見錯誤是每張圖片都用一模一樣的 alt 文字。這不只對無障礙沒幫助，Google 也可能把它當作關鍵字堆砌。
語意化 HTML：告訴搜尋引擎你的頁面結構
語意化 HTML 是指使用有意義的 HTML 標籤來描述內容的結構和功能。這是無障礙設計的核心概念之一，也是 SEO 的基礎。
標題層級（Heading Hierarchy）
<h1> 到 <h6> 標籤不只是字體大小的選擇，它們代表的是內容的層級結構。螢幕閱讀器的使用者常常用標題來快速瀏覽和跳轉頁面內容，就像視力正常的使用者用目錄來找章節一樣。
對 SEO 來說，Google 用標題標籤來理解頁面的主題和子主題。如果你的 <h1> 跟頁面的實際主題不符，或是標題層級混亂（從 h1 跳到 h4 再回到 h2），Google 就很難正確理解你的內容結構。
正確的做法是每頁只有一個 <h1>（通常是頁面標題），然後用 <h2> 作為主要章節標題，<h3> 作為子章節，以此類推，像一個清楚的大綱。
語意化標籤
HTML5 提供了一系列語意化標籤：<nav>（導航）、<main>（主要內容）、<article>（文章）、<aside>（側邊欄）、<footer>（頁尾）等等。
這些標籤讓螢幕閱讀器的使用者可以快速跳到頁面的特定區域。同時，Google 也能用這些標籤更準確地理解頁面的不同部分分別是什麼功能。
有些開發人員喜歡所有東西都用 <div> 套上 CSS class，反正視覺效果一樣。但對無障礙和 SEO 來說，一個 <nav> 傳達的資訊比 <div class="navigation"> 多得多。
連結文字
「點擊這裡」「了解更多」「more」——這些是最常見的連結文字，也是對無障礙和 SEO 最不友善的寫法。
螢幕閱讀器的使用者可能會瀏覽頁面上的所有連結。如果每個連結都叫「了解更多」，他們完全不知道每個連結會導向哪裡。搜尋引擎也是一樣——連結文字（anchor text）是 Google 判斷被連結頁面主題的重要線索。
好的連結文字應該描述目的地的內容，像是「查看 2026 年 SEO 排名因素分析」而不是「點擊這裡」。
頁面導航和網站結構
清楚的導航和網站結構，對無障礙使用者和搜尋引擎都很重要。
鍵盤導航：所有的互動元素（連結、按鈕、表單欄位）都應該可以用鍵盤的 Tab 鍵來切換和操作。如果你的網站有一些花俏的互動效果（像是滑鼠懸停才會出現的下拉選單），確保這些功能用鍵盤也能操作。
鍵盤導航不只是對使用輔助技術的人重要。很多進階使用者也偏好用鍵盤操作。而從 SEO 的角度來說，如果某些內容或連結只能透過滑鼠互動才能看到，搜尋引擎爬蟲可能也「看」不到它們。
麵包屑導航：麵包屑（Breadcrumb）是指在頁面上方顯示的層級路徑，像是「首頁 > 產品 > 電子零件 > 電阻器」。它幫助使用者了解目前在網站的什麼位置，也幫助搜尋引擎理解網站的階層結構。
Google 特別喜歡麵包屑。如果你在麵包屑上加了 BreadcrumbList 的結構化資料，Google 搜尋結果中可能會直接顯示你的頁面路徑，而不是純粹的網址。這讓搜尋結果看起來更有組織感，也能提升點擊率。
跳過導航連結：在頁面最上方加一個「跳到主要內容」的隱藏連結，讓螢幕閱讀器使用者可以跳過重複的導航選單，直接到達頁面的主要內容。這是 WCAG 2.1 Level A 的要求，也是對所有鍵盤使用者友善的設計。
影片和多媒體的無障礙處理
影片內容在網站上越來越普遍，但大部分的影片都缺乏無障礙的處理，同時也浪費了 SEO 的機會。
字幕和逐字稿
影片加上字幕（Captions）是最基本的無障礙要求。聽障使用者需要字幕才能理解影片內容。但字幕對 SEO 也有好處——搜尋引擎不能「看」或「聽」影片內容，但它們可以索引字幕文字。有字幕的影片比沒有字幕的影片，在搜尋結果中出現的機會更高。
更進一步，在影片下方提供完整的逐字稿。這些文字內容可以被搜尋引擎索引，等於你的影片內容同時也以文字的形式存在於網頁上，大幅增加了相關關鍵字排名的機會。
影片播放器的無障礙
影片播放器的控制按鈕（播放、暫停、音量、全螢幕）都需要可以用鍵盤操作，也需要有適當的 ARIA 標籤讓螢幕閱讀器知道每個按鈕的功能。
自動播放的影片是無障礙的大忌。它們會打斷螢幕閱讀器的朗讀，對所有使用者來說也很惱人。如果你一定要用自動播放，至少預設靜音，並提供明顯的停止按鈕。
色彩對比和可讀性
色彩對比度是無障礙設計中很重要但常被忽略的一環。
WCAG 2.1 要求一般文字的對比度至少要 4.5:1，大字體至少 3:1。這不只是為了色覺障礙的使用者——在戶外強光下看手機螢幕、或是在老舊螢幕上看網頁的人，都會受到色彩對比度的影響。
根據 WebAIM 的數據，低對比度文字是最常見的無障礙問題，出現在 83.6% 的首頁中。淺灰色文字配白色背景、或是在繁複的背景圖上放文字，都是常見的設計美學與可讀性衝突的例子。
對 SEO 的影響是間接的但確實存在的。如果使用者進到你的網站，因為文字太難閱讀而快速離開，Google 會把這個行為信號（高跳出率、低停留時間）列入排名考量。好的對比度讓使用者更願意閱讀你的內容，延長停留時間，降低跳出率。
幾個實用的建議：
- 用 WebAIM Contrast Checker 等工具驗證你的色彩組合
- 不要只用顏色來傳達資訊（例如錯誤訊息不要只用紅色，要加上圖示或文字說明）
- 確保連結除了顏色之外還有其他視覺區分（底線或粗體）
- 在圖片上放文字時，加上半透明的背景遮罩確保可讀性
表單的無障礙設計
表單是網站上最重要的互動元素之一，也是無障礙問題最多的地方。
標籤（Label）：每個表單欄位都必須有對應的 <label> 標籤，而且要用 for 屬性正確連結。很多設計師喜歡用 placeholder 文字代替標籤——就是在輸入框裡面顯示灰色的提示文字。但 placeholder 在使用者開始輸入後就消失了，使用者不確定自己到底在填哪個欄位。螢幕閱讀器對 placeholder 的支援也不一致。
錯誤提示：表單驗證的錯誤訊息要清楚說明哪個欄位出了什麼問題，以及怎麼修正。不要只是在欄位旁邊放一個紅色的驚嘆號。用文字明確描述錯誤，像是「請輸入有效的 Email 地址」而不是「此欄位有誤」。
表單的結構化資料：如果你的表單是用來收集客戶資訊或提供服務預約，可以考慮加上相關的結構化資料。雖然這不是直接的排名因素，但它幫助搜尋引擎理解這個頁面的功能。
好的表單設計讓所有使用者都能順利完成操作，轉換率自然就會提升。一個網站如果因為表單的無障礙問題而流失了潛在客戶，那可是實打實的業績損失。
從現在開始把無障礙融入設計流程
無障礙設計不是網站做完之後再來「修補」的東西，而是應該從設計的第一天就融入流程。
實際操作的建議：
設計階段：確定色彩對比度達標、確認互動元素有足夠的觸控區域大小（至少 44x44 像素）、規劃清楚的標題層級。
開發階段：使用語意化 HTML、確保鍵盤導航正常、為所有圖片和多媒體加上替代文字、表單欄位加上標籤。
測試階段：用 Lighthouse、WAVE、axe 等工具做自動化檢測。但自動化工具只能發現大約 30-40% 的無障礙問題，你還需要手動測試——試著只用鍵盤操作整個網站、用螢幕閱讀器瀏覽一遍。
持續維護：每次新增內容或功能時，都要檢查無障礙。新上傳的圖片有沒有 alt 文字？新的互動元素能不能用鍵盤操作？
從商業的角度來看，無障礙設計不只是道德責任。它擴大了你的潛在受眾（全球約有 10 億人有某種形式的身心障礙）、改善了所有使用者的體驗、提升了 SEO 效果。如果你的團隊對無障礙標準不熟悉，可以找具備無障礙經驗的網頁設計公司協助。這是一筆投入有多重回報的投資。
