有人提醒我，這個網站可以對視障者再友善一點
2026.06.12
有好朋友跟寶店長提醒：
「這個網站可以對視障者再友善一點。」
寶店長，登愣了一下，
對，視障者，
對，所有族群，
哎呀，果然寶店長還是見識淺薄，
沒有注意到這件事，
真是太失禮了！
萬分抱歉！
這真是寶店長自己的不對，
怎麼沒有考慮到每一個人的需求。
這個世界上，
有一群人，是用「聽」的在瀏覽網頁的。
根據AI的說法，
如果有錯誤請糾正寶店長，
他們用的是「螢幕閱讀器」（Screen Reader）—
一種會把網頁內容大聲唸出來的輔助工具。
然後，裡面有好多的細節喔。
我朋友給了一個概念：
WCAG
非常好，那是什麼，
真是對不住，我真是學藝不精。
WCAG 是什麼
帶著這個問題，寶店長去查了一下，
發現：
網頁的無障礙設計，有一套國際規範，叫做 WCAG。
全名是 Web Content Accessibility Guidelines，
直譯是「網頁內容無障礙指引」。
目標說起來很簡單：
讓每一個人，不管是否有身心障礙，都能好好使用網頁。
WCAG 把規範分成 A、AA、AAA 三個等級，
一般網站的標準是達到 AA 級。
喔，老天鵝啊，
寶店長居然不知道，
慚愧慚愧，
內心真的很內疚。
不過亡羊補牢，猶未晚矣，
趕緊來更新網站。
WCAG 的四大核心原則：POUR
WCAG 的設計邏輯，建立在四個核心原則上，縮寫叫做 POUR。
1. Perceivable 可感知
使用者要能「接收到內容」。
| 項目 | 意思 |
|---|---|
| 圖片要有替代文字 | 視障者可用螢幕閱讀器理解圖片 |
| 影片要有字幕 | 聽障者也能理解內容 |
| 文字與背景對比足夠 | 色弱、長者比較容易閱讀 |
| 不只靠顏色傳達資訊 | 例如錯誤欄位不能只標紅色 |
2. Operable 可操作
使用者要能「操作介面」。
| 項目 | 意思 |
|---|---|
| 可用鍵盤操作 | 不依賴滑鼠 |
| 焦點狀態清楚 | Tab 到哪裡要看得出來 |
| 不設計會閃爍的內容 | 避免誘發癲癇或不適 |
| 表單、選單、按鈕容易點擊 | 對手抖、行動裝置使用者重要 |
3. Understandable 可理解
使用者要能「看懂、預期、修正錯誤」。
| 項目 | 意思 |
|---|---|
| 文字清楚 | 避免過度艱澀 |
| 表單錯誤提示明確 | 不只寫「格式錯誤」 |
| 導覽邏輯一致 | 不要每頁選單位置都不同 |
| 重要操作要可確認或復原 | 例如付款、刪除資料 |
4. Robust 強健
內容要能被不同瀏覽器、輔助科技正確讀取。
| 項目 | 意思 |
|---|---|
| HTML 語意正確 | 標題用 h1/h2，不只是放大字體 |
| 按鈕要用 button | 不要用 div 假裝按鈕 |
| 表單標籤正確連結 | 螢幕閱讀器才知道欄位用途 |
| ARIA 使用正確 | 不能亂加，否則更糟 |
靈食雜貨舖做了什麼更新
把這些規範拿來對照靈食雜貨舖，
發現有幾個地方是之前沒有想到的：
一、圖片的「替代文字」（alt text）
螢幕閱讀器讀不了圖片，
它讀的是圖片上的 alt 說明。
如果沒有寫，它只會唸「image」。
如果是我聽到，真的是會翻白眼。
幸好現在 網站幾隻小貓而已，不幸中的萬幸。
二、表單欄位有沒有標籤
網站上的「寫信給寶店長」功能，
有幾個輸入框只有提示文字（placeholder），
但螢幕閱讀器可能讀不到。
後來把每個輸入框都加上了正式的 label。
突然覺得沒什麼讀者的時候，還挺好的。
三、標題層級不能跳
標題要照順序走：h1 → h2 → h3，
不能從 h1 直接跳到 h3。
螢幕閱讀器的使用者，常常靠「標題導航」瀏覽頁面，
跳層會讓他們迷路。
結果，發現自己寫文章會亂跳，
太尷尬了，趕緊改過來。
四、連結顏色的對比
文章裡的連結，對比度要夠高，
才能讓視力不好的人也看得清楚。
WCAG 的要求是對比度至少 4.5:1。
啊，這真的是，我看不見的世界，
卻是別人的全世界。
深自反省。
五、動態訊息要能被「聽」到
例如按下「收藏」之後會出現的提示訊息，
要用 aria-live 標記，
螢幕閱讀器才知道這裡有新內容需要唸出來。
講到這，我實在是覺得，
幸好我那個好朋友跟我說這件事，
幸好現在小貓兩三隻來店裡逛而已，
幸好有發現問題，
ㄧ切都幸好。
一個以前沒想過的角度
做完這些改動，不禁讓寶店長好好反 思了一下。
靈食雜貨舖，本來是想讓每個人都能進來，
找到屬於自己的靈食。
但「每個人」，其實包含了很多種人。
有人用大螢幕，有人用手機，
有人視力很好，有人需要輔助工具。
這世界的人，如此多元，多彩又多姿，
但也代表著，
心胸要容納高山與大海，
見識要上至星空下至深淵，
涵養要通透古今中外，
果然，開一間通往偉大航道的店，
不是那麼容易。
總之，感謝那個提醒寶店長的人。
有人願意提醒，就是一種愛。
| 項目 | 等級 | 說明 |
|---|---|---|
| 圖片有 alt 說明 | A | 非文字內容需有替代文字 |
| 標題結構合理 | A | 需有語意結構（h1 → h2 → h3） |
| 表單有 label | A | 欄位名稱需可被輔助工具辨識 |
| 鍵盤可操作 | A | 不依賴滑鼠 |
| 不只靠顏色傳達資訊 | A | 錯誤需搭配文字說明 |
| 文字對比 ≥ 4.5:1 | AA | 一般文字要求 |
| 大字對比 ≥ 3:1 | AA | 18pt 以上或 14pt 粗體 |
| 焦點可見 | AA | Tab 時可看出目前位置 |
| 錯誤訊息可辨識 | AA | 表單錯誤需清楚提示 |
| 網頁語意結構正確 | — | header、nav、main、footer |
| aria-live 動態訊息 | — | 狀態通知需讓輔助工具讀到 |
📝 這一次，寶店長學到什麼
做網站，技術層面一直在學，
但這件事讓寶店長學到了一個更底層的東西：
你設計的東西，是為誰設計的？
如果心裡想的是「每一個人」，
那「每一個人」就應該真的包含每一種人。
這不是規範的問題，
是用心的議題。
祝福大家，今日的身心靈，一切安好。
🧩 延伸閱讀
© 2026 Spirit & Savor 靈食雜貨舖
系列：精選靈食・寶店長・寶店長的學習筆記
📧 spiritandsavor@gmail.com