移動SEO網頁無障礙優化：提升行動版可及性的關鍵設定與檢測方法

先說結論

嗯...今天這個主題，行動版網頁的無障礙（Accessibility），很多人以為只是「做好事」，但其實跟 SEO 綁超緊。簡單講，讓網站對所有人（包括身心障礙者）都好用，Google 會給你加分。這不只是演算法，而是 Google Page Experience 核心概念的一部分。網站體驗好，排名自然有幫助。

為什麼現在行動版無障礙變這麼重要？

以前可能覺得這是給少數人用的，但現在手機流量早就超過電腦了。你想想，在外面單手滑手機、陽光下看不清楚螢幕、或是在很吵的地方聽不到影片聲音...這些都是「暫時性的障礙」。所以，無障礙設計其實是為了「所有人」在「所有情境」下都能好好用你的網站。

而且，Google 現在看的是「行動版優先索引」。意思是，它主要是爬你網站的手機版來決定排名。所以手機版要是亂七八糟、按鈕超小、顏色糊在一起...那不僅使用者跑掉，SEO 分數也會很難看。

怎麼做？幾個關鍵設定筆記

好，直接記重點。這不是完整的清單，但這幾點是基礎中的基礎。

語意化 HTML ：這超重要。不要再從頭到尾都用 `
` 了。標題用 `
`, `
`...導覽列用 `
`，主要內容用 `
`，按鈕就是 `
圖片要有替代文字 (alt text) ：老生常談了，但還是很多人忘記。所有有意義的圖片都要加 `alt` 描述。對螢幕報讀器來說，沒有 `alt` 的圖片等於不存在。對 SEO 來說，這也是讓 Google 了解圖片內容的關鍵。
夠大的點擊目標 (Tap Targets) ：手機螢幕就這麼小，按鈕或連結不要做那種要用指甲才能點到的尺寸。一般建議至少要有 48x48dp。手指粗的人、或是在公車上晃來晃去時，都會感謝你。
足夠的顏色對比 ：淺灰色配白色背景...這種文青設計很好看，但對比度不夠的話，在戶外或對視力不好的人來說，根本是隱形的。可以用很多線上工具檢查顏色對比度是否符合 WCAG 的標準。
允許縮放 ：不要限制使用者用兩指縮放網頁。有些長輩或視力不好的人，需要放大文字才能閱讀。如果鎖住縮放，等於是把他們關在門外。

標準好多種，要聽誰的？WCAG vs. 台灣 NCC 規範

這點要特別提一下。國際上最通用的標準是 W3C 的「網站內容無障礙指南」（WCAG），目前最新版是 2.2。它分成 A、AA、AAA 三個等級。一般來說，大部分網站都建議至少要符合 AA 等級。

不過，在台灣，如果你是政府機關或是一些大企業的網站，你可能更常聽到的是 NCC（國家通訊傳播委員會）的「網站無障礙規範」。其實 NCC 的規範也是參考 WCAG 來的，大方向基本一致。像是台灣高鐵網站頁尾就會標示他們通過了 AA 無障礙網頁檢測。所以，簡單的結論是：你如果以 WCAG 2.2 AA 為目標去優化，基本上就能同時滿足國內外的要求。

檢測方法：不要只信自動化工具

很多人會用 Chrome 內建的 Lighthouse 跑一下 Accessibility 分數，看到 90 分以上就覺得沒問題了。但這只是第一步。

自動化工具大概只能抓到 30-40% 的問題，而且都是比較表面的，像是有沒有 `alt` 文字、顏色對比夠不夠之類的。它沒辦法判斷你的 `alt` 描述得好不好、也沒辦法理解操作流程合不合邏輯。

所以，**一定要手動實機測試**。

不同檢測方法的優缺點比較
檢測方法	優點	缺點
自動化工具 (如 Lighthouse, axe DevTools)	很快，一鍵產生報告，適合開發初期快速檢查。	只能抓到皮毛，大概 3-4 成的問題。對操作邏輯完全沒輒。
手動實機測試 (VoiceOver/TalkBack)	最能模擬真實使用者情境。可以發現自動工具抓不到的流程問題、朗讀順序錯亂等。	花時間，而且你要先學會怎麼用螢幕報讀器才行，剛開始用會有點挫折。
真人使用者回饋	黃金標準。直接找身心障礙使用者來測試，他們的回饋最真實，能發現你從沒想過的問題。	成本最高，也最難組織。但效益絕對是最大的。