缺席的無障礙設計，原來網路購物這麼難
我們習以為常的電商介面，其實正悄悄「排擠」了某些使用者？
你聽過 A11y 嗎？
A11y 是 Accessibility（無障礙）的縮寫，由開頭的 A、中間省略的 11 個字母，以及結尾的 y 組成。聽起來像是設計領域的專有名詞，但其實離我們的生活非常近，甚至可以說每個人都可能在某個時刻需要它。
談到無障礙設計，許多人第一時間想到的可能是盲人、聽障等身心障礙者才需要使用到。但其實，每個人都可能在某個情境下成為需要無障礙的使用者。人生會經歷不同的階段，當年紀漸長、視力退化時，原本輕鬆看見的螢幕文字，可能變得難以辨識；也可能因為成為新手爸媽，需要一手抱著嬰兒，或因意外受傷，暫時無法使用其中一隻手，讓我們不得不改變原本使用電腦或手機的方式。因此，無障礙設計並不只是針對特定族群去做設計，而是在為「所有人」設計，讓更多人都能順利使用產品，降低被排除的機會。這也呼應了 UX 設計的重要核心之一：更接近真正的「平等」(Equity)。
2025 年 12 月底，在德國知名電商 Zalando 擔任產品設計師的敏瑜，於郭子舉辦的線上活動「服務設計真心話」中，分享了無障礙設計的基礎與實務應用，以及歐盟無障礙法規 (European Accessibility Act, EAA) 的重點。與臺灣相較，歐洲在無障礙設計的規範與推動上更成熟，透過 EAA 要求企業在特定產品與服務上，必須符合無障礙相關規範，讓無障礙不只是 Nice to have 的加分項，而逐漸成為 Must have 的基本門檻。
回到臺灣：我們的電商無障礙做得如何？
快速審視臺灣的電商 — momo 與 PChome，使用者體驗與視覺設計偏向「資訊密度高、節奏快」，這種設計邏輯或許看起來很有效率，但從無障礙的角度審視，發現了 5個常見「不友善的」設計：
1. 刻死在圖片裡的文字 (Image of text)
臺灣的電商網站上，「一張圖片包含品牌、促銷標語、價格」非常常見，所有的文字資訊直接嵌在圖片裡，製作素材上雖然方便快速，卻只有視力毫無問題的人才能接收資訊；甚至首頁有一大部分都以「大圖切圖」後，在多個小圖中嵌入連結，拼組而成（如以下影片展示）。
這時，網購服務開時排擠了以下使用者：
仰賴輔助工具與螢幕閱讀器(vioce reader)的人，無法順暢瀏覽
年長或視覺障礙者，無法放大閱讀或調整字距／行距
非中文語系者，無法翻譯成可理解的語言
符合無障礙設計的做法是：
讓圖片與文字成為獨立個體，有以下2個方式：
圖片只保留視覺元素，將文字以「獨立文字層」疊加於上方，如下方參考範例1-Apple。
圖片下方以文字區塊重述同等資訊，這樣一來，使用者就能依需求調整文字縮放、切換語言，如下方參考範例2-MUJI。
參考範例1-Apple 官網首頁的橫幅（Banner）文字「馬年送祝福，事事都飛躍」
就是採用「獨立文字層」呈現，使用者可以直接用滑鼠或鍵盤選取文字，代表這些文字並不是「刻在圖片裡」，而是以真正的文字元素放在版面上。
這樣的做法使內容更容易被螢幕閱讀器讀取、使用者能依需求放大字級或縮放頁面而不影響清晰度，並且更有利於翻譯。
參考範例2-MUJI 官網首頁的門市報名活動區塊
「香氛體驗會」與「小小運動員」除了字刻在圖片上的視覺圖室外，下方仍以文字呈現活動的完整名稱，閱讀器就會朗讀出正確的資訊，既簡單又友善。
2. 缺席的替代文字 (Alt text)
螢幕閱讀器 (Voice reader) 會依據圖片的替代文字 (Alt text) 朗讀內容，讓視障者、閱讀困難者，或是在移動中不方便盯著螢幕的人，能夠輕易理解網站內的資訊並完成任務。
閉著眼睛聽聽以下影片，猜猜你能買到什麼？
就算有幸終於聽到商品區的優惠，949美元的牙膏（台幣約2萬9千元）一般人真的是很難買下去啊！
在建置網站時，尤其是由大量圖片組成的電商，替代文字常常被忽略或省略，但它卻是無障礙設計中非常關鍵的一環。當頁面以多個小圖組成一個大圖，且皆沒有alt text情境下，螢幕閱讀器讀出的資訊可以說雜亂無章也毫無準確性，有一群人是完全無從得之品牌與商品的折價資訊，更別說下單自己需要的商品了。
符合無障礙設計的做法是：
區分「裝飾性」與「含有意義/資訊性」的視覺元素
裝飾性(Decorative) 意指純粹為美觀與版面平衡，拿掉完全不影響資訊理解或任務完成性的視覺元素。例如：背景的幾何圖與漸層、純裝飾用的icon或插圖、分隔線等。
資訊性(Informative) 用來傳遞資訊或補充內容，對理解頁面或完成任務是必要的圖片。例如：同一商品在外觀與材質上有多個款式、圖片內涵關鍵的流程與步驟等。
補上替代文字（Alt text)
資訊性圖像一定要補上替代文字，例如「東京車站限定 PISTA & TOKYO 開心果＋覆盆莓夾心餅乾禮盒，免稅特賣新台幣 699 元，今日限定」，傳遞圖片中所要呈現的商品與優惠資訊。
裝飾性圖片則使用空 alt（alt=”“）標記，避免螢幕閱讀器多唸反而干擾。
3. 讓人迷路的按鈕與連結名稱
延續alt text用來傳遞重要的視覺資訊，螢幕閱讀器也會讀出頁面中可點擊的按鈕與連結，以告知使用者「這裡可以點擊」與「點擊後的結果」。
當按鈕與連結名稱沒有妥善被標注，閱讀器往往只能朗讀「按鈕」、「連結」或直接念出一長串網址（例如 http://www.abc…）。使用者無從判斷這些按鈕或連結會通往哪裡，只能逐一點開確認內容，在反覆嘗試的過程中，操作難度與挫折感都會大幅上升。
符合無障礙設計的做法是：
與工程師確認，為按鈕加上「可被朗讀的文字標籤」
讓螢幕閱讀器使用者能清楚理解「點擊後會發生什麼事」，例如：<button aria-label=”更多商品分類”>
使用精準的按鈕&連結名稱，清楚表明點擊後的結果
避免使用「限搶、加入、確認」等語意不完整，或需高度仰賴上下文的詞彙。用「查看限時優惠」、「加入購物車」、「確認付款」作為關鍵行動Call to actions的用詞。
4. 動輒數十頁的輪播 (Carousel)
momo 和 PChome 兩個電商入口網站，大量使用「輪播圖（Carousel）」來展示商品與活動資訊。從行銷角度來看，輪播圖的目的是在使用者不需要做任何操作的情況下，讓更多商品與促銷訊息輪流曝光，持續吸引注意、提高點擊機會。
但從無障礙設計的角度，輪播圖相對不友善，常見的問題包括：
自動輪播打斷注意力，畫面可能會在使用者閱讀或聆聽到一半時切換，對使用螢幕閱讀器或閱讀速度較慢的使用者特別不友善
焦點與內容不同步，有時輪播切換後，鍵盤焦點或螢幕閱讀器的焦點仍停留在原本的按鈕／連結上，使用者可能會突然不知道自己正在操作哪一張
多個元件的堆疊與層級，螢幕閱讀器的閱讀順序易混淆
符合無障礙設計的做法是：
重要資訊避免僅以輪播的方式呈現，同主題的資訊一起閱讀完畢後，再換個別的分類。
提供清楚的「暫停／播放按鍵」或「上一張／下一張的按鍵」，讓使用者能夠自行操作。
使用者在輪播元件內互動時（如點擊按鍵、鍵盤聚焦）停止自動播放，避免畫面在閱聽到一半時突然被切走。
設計師與工程師協作，明確定義螢幕閱讀器的閱讀順序。
5. 不足的色彩對比度（Colour contrast）
色彩對比度通常指文字顏色與元件及其背景色的對比度，在無障礙設計中，色彩對比度的常見建議標準是 4.5:1。
達到這個標準時，色盲、色弱、甚至是一般人在視覺敏感或光線不足的情境下，能順利地閱讀頁面的內容；反之，對比度不足，在閱讀上會變得吃力，甚至可能導致關鍵資訊無法被辨識。
色彩對比是最廣為人知的無障礙設計重點之一，同時也是Chrome 的擴充工具 Lighthouse 在檢測頁面無障礙的核心項目。
實際檢測 momo 與PChome網站首頁的對比度，可以看見多處顯示「背景和前景顏色沒有足夠的對比度」。不過近看會發現未通過的元素清單，多以「商品原價」、「熱度標示」、「搜尋分類選項」等相對次要的文字與標題。此外，由於Lighthouse無法檢測「嵌在圖片中的文字與視覺元素」的實際色彩對比度，所以對比度問題量極有可能被低估。
老實說，相較於前面提到的4個無障礙設計議題，色彩對比度在這兩個電商平台顯得是急迫性較低，偏後期處理的無障礙挑戰。
整理 momo 與 PChome 的案例，目的不是要評斷哪一家做得好或不好，而是希望讓更多人意識到，我們每天使用的電商網站裡，確實存在許多「看起來沒問題、但其實會卡住某些人」的設計細節。
延伸資源：
無障礙設計測試工具- Lighthouse與Stark Accessibility Checker
可以把原本抽象的「不夠友善」、「感覺怪怪的」轉化為具體可追蹤的問題清單，讓團隊更容易對齊共識並安排改善。
設計階段檢測工具- Stark Figma Plugin 與 Adobe Colour Analyzer
提前檢查色彩對比與易讀性，降低後期修正成本，設計師就是色彩對比度的第一線把關者。
當歐盟透過 EAA 把無障礙推向基本門檻，回到臺灣，我們可以把無障礙視為產品品質的一部分。在一開始設計時，就盡可能將更多使用者和情境納入考量，讓更多人（包含未來的我們自己）都能更順利、更有尊嚴地完成日常生活中的每一次使用。
此篇由正在努力申請海外研究所的小編 Michelle 🐚＆郭子慢慢創辦人心喻共同編輯
專案合作請洽:kuosdrawing@gmail.com
IG郭子慢慢 ｜1對1諮詢 ｜Podcast 漫談海歸 Apple Podcast Spotify