查網站電商媒體電商數據榜單中心數據速報 工具箱小教室電商健檢比較清單對手對戰API關於
轉換與優化

電商網站無障礙設計:讓長輩與視障者也買得下去,還能順便加分 SEO

電商網站無障礙設計:讓長輩與視障者也買得下去,還能順便加分 SEO|ECPRO 電商博士
字級
ChatGPT 摘要 Claude 摘要 Perplexity 摘要
林克威導讀

很多人以為無障礙是做公益,其實它同時幫你擴大客群、討好 Google。這篇用最白話的方式教你怎麼做。

本文重點
  • 破迷思:無障礙是擴大市場,不是成本
  • 記住 POUR 四原則:可感知、可操作、可理解、穩健
  • 可感知:對比、字級、可縮放
  • 可操作與可理解:鍵盤、標籤、清楚的文字
  • 無障礙其實就是 SEO:一魚兩吃
  • AI 應用:自動檢測是起點,不是終點

先破一個最大的誤會:無障礙設計不是做公益,是做生意。很多老闆一聽到「無障礙」就想成「幫少數視障者,做了也沒幾個人用」,於是永遠排在待辦清單最後一項。但真相是:無障礙幫的是每一個在大太陽下瞇眼看手機的人、戴老花眼鏡的媽媽、一手抱小孩一手滑手機的爸爸、以及網路很慢圖片載不出來的顧客。台灣正快速高齡化,銀髮族的購買力驚人,一個長輩看不清、按不到、看不懂的網站,等於把一群最有錢有閒的顧客擋在門外。更棒的是,讓機器(螢幕報讀軟體)讀得懂的網站,Google 也特別愛。這篇教你怎麼做。

破迷思:無障礙是擴大市場,不是成本

把無障礙當成法規義務或慈善,格局就小了。正確的看法是:無障礙做得好,等於同時擴大可觸及的客群、降低跳出率、提升信任,還附贈 SEO 好處。想想看,一個對比清楚、字夠大、可以放大、按鈕好按、圖片有文字說明的網站,受惠的絕不只是身障者,而是所有在非理想環境下購物的一般人,也就是幾乎所有人。而且台灣的消費者結構正在老化,五十歲以上族群線上購物的比例逐年攀升,他們的眼睛、手指、耐心都需要你多體貼一點。無障礙不是為某個小眾加的功能,而是把「所有人都能順利買東西」當成基本盤。

記住 POUR 四原則:可感知、可操作、可理解、穩健

國際通用的無障礙標準(WCAG)可以濃縮成四個好記的字:POUR,也就是可感知、可操作、可理解、穩健。可感知,是指資訊要能被看到或聽到,例如顏色對比要夠、圖片要有替代文字讓報讀軟體念出來;可操作,是指所有功能都能被使用,不只靠滑鼠,也要能用鍵盤操作,觸控目標要夠大;可理解,是指介面與文字要清楚一致,別讓人猜;穩健,是指用標準、乾淨的程式碼寫,讓各種瀏覽器與輔助科技都能正確解讀。把這四個字當檢查框架,你就不會漏掉重點。以下用它逐項拆成可落地的做法。

可感知:對比、字級、可縮放

這是電商最常出包、也最好改的一塊。具體做法:確保文字與背景的顏色對比足夠(一般內文建議對比度至少 4.5 比 1,別再用淺灰字配白底這種「很有設計感但看不清」的組合);內文字級至少 16 像素,並允許使用者放大到兩倍而不會破版;不要單靠顏色傳達資訊(例如「紅色是缺貨」,色盲的人分不出來,要同時加上文字或圖示)。每一張有意義的商品圖、圖示都要加上替代文字(alt),簡潔描述圖片內容,這樣報讀軟體才念得出來,圖片載不出來時也有文字頂替。純裝飾用的圖則設成空的替代文字,避免報讀軟體念一堆無意義的檔名干擾使用者。

可操作與可理解:鍵盤、標籤、清楚的文字

接著顧好操作與理解。整個購物流程要能只用鍵盤完成(用 Tab 鍵在連結、按鈕、欄位間移動,並且看得到目前焦點在哪),因為很多視障或行動不便者不用滑鼠;每個表單欄位都要有清楚的文字標籤(label),別只靠欄位裡會消失的提示文字,否則使用者填到一半就忘了這格要填什麼;錯誤訊息要講清楚「哪裡錯、怎麼改」,而不是紅框了事。連結文字要能獨立看懂,把「點這裡」「更多」改成「查看尺寸表」「閱讀退換貨政策」,這對報讀軟體使用者和 Google 都友善。標題階層要照順序、有邏輯,讓內容像大綱一樣層層分明。整體用詞一致、流程可預期,顧客才不會因為看不懂而放棄。

無障礙其實就是 SEO:一魚兩吃

這是最多老闆沒意識到的甜蜜點:你為「人」做的無障礙,幾乎同時就是為「搜尋引擎爬蟲」做的優化,因為爬蟲跟螢幕報讀軟體一樣,都是「看不到畫面、只能讀程式碼與文字」的使用者。圖片的替代文字既幫視障者,也幫 Google 理解圖片內容、帶來圖片搜尋流量;清楚的標題階層既幫報讀軟體導覽,也幫搜尋引擎抓到內容重點;有意義的連結文字既幫報讀軟體,也是很好的內部連結錨點;乾淨、語意化的 HTML 既讓輔助科技正確解讀,也讓爬蟲更好收錄;而快速、對比清楚、好操作帶來的低跳出率,本身就是搜尋排名的正面訊號。換句話說,把無障礙做好,是少數能同時討好顧客與 Google 的投資。

AI 應用:自動檢測是起點,不是終點

要不要導入無障礙,別再用「不會寫」當藉口,AI 能幫你降低門檻。你可以用線上的無障礙自動檢測工具掃描網站,找出對比不足、缺替代文字、標籤缺失等問題;也能用生成式對話工具批次產替代文字。提示詞範例:「我會貼上幾張商品圖的說明,請幫每張生成一句 20 字內、適合放進 alt 屬性的繁體中文替代文字,具體描述商品外觀與用途,不要用『圖片』『照片』開頭。」或請它「檢查這段表單的 HTML 是否每個欄位都有正確關聯的標籤,並指出缺漏」。但要非常誠實地認清限制:自動檢測工具通常只能抓出約三到四成的無障礙問題,很多關鍵體驗,例如鍵盤操作順不順、報讀出來的內容合不合理、焦點看不看得見,只有真人實測才驗得出來。AI 產的替代文字也可能不精準甚至寫錯商品。把 AI 當第一道快篩,最後仍要用鍵盤走一遍、有條件的話請真實使用者測試。

檢查清單與重點整理

幫你把可以今天就動手的項目列成清單:文字與背景對比足夠、內文至少 16 像素且可放大、不單靠顏色傳達資訊、每張有意義的圖都有替代文字、整個結帳流程可用鍵盤完成且焦點可見、表單欄位都有清楚標籤、錯誤訊息講清楚怎麼修、連結文字看得懂、標題階層有邏輯、用語意化乾淨的程式碼。三句話收尾:第一,無障礙不是成本或公益,是擴大客群又加分 SEO 的生意;第二,用 POUR 四原則當檢查框架,別漏重點;第三,AI 自動檢測只是起點,真正的無障礙要靠鍵盤實測與真人回饋。在高齡化的台灣,讓更多人買得下去,就是最務實的成長策略。

電商博士小教室

本文相關的 KPI 公式

購物車放棄率Cart Abandonment
放棄率 = 1 −(完成結帳人數 ÷ 加入購物車人數)

把東西加進購物車卻沒結帳的比例。是漏斗末端最關鍵、最該救的破口。

退貨率Return Rate
退貨率 = 退貨訂單數 ÷ 總出貨訂單數 × 100%

出貨後被退回的比例。高退貨率會吃掉毛利,還是商品/期待落差的警訊。

看完整電商 KPI 公式庫 →
ECPRO 數據觀察

用真實數據延伸這個主題

ECPRO 電商博士實測逾 10 萬個台灣電商網站。想用數據驗證本文觀點,延伸閱讀這幾份實測報告:

覺得有用?分享出去
LINE Facebook X Threads

常見問題

無障礙設計對電商實際有什麼好處?

好處是三重的。第一,擴大客群:讓長輩、視障者、以及在強光下或網路慢等非理想環境的一般顧客都能順利下單,尤其台灣高齡化,銀髮購買力可觀。第二,提升體驗與信任,降低跳出率。第三,加分 SEO:替代文字、清楚標題階層與語意化程式碼同時討好搜尋引擎爬蟲。等於一份投資同時服務顧客與 Google。

我沒有工程背景,第一步可以先做什麼?

先從最好改、最有感的三件事下手:一、把淺灰配白底的低對比文字改深,確保內文對比度足夠、字級至少 16 像素;二、幫每張有意義的商品圖加上簡潔的替代文字;三、拿掉只靠顏色傳達的資訊,例如缺貨除了變紅字也加上缺貨文字。接著用線上免費無障礙檢測工具掃一遍,照報告逐項修,門檻其實不高。

無障礙標準的 POUR 是什麼?

POUR 是國際無障礙標準 WCAG 的四大原則縮寫:可感知(資訊看得到聽得到,如對比與替代文字)、可操作(功能能用鍵盤完成、觸控目標夠大)、可理解(介面文字清楚一致)、穩健(用乾淨語意化程式碼讓各種瀏覽器與輔助科技都能正確解讀)。用這四字當檢查框架就不易漏掉重點。

訂閱電商情報每週一封,台灣電商數據與經營洞察。
相關文章