畫面・功能Web accessibility · a11y
網站無障礙
網站無障礙是讓視力不佳或手部不便的客人，也能毫無困難地使用網站。
就像在店門口加裝斜坡、把菜單字體放大。對所有人都更方便。
再多說一點
把畫面念出來的螢幕報讀軟體看不到照片，會改念照片的說明（alt）。沒有說明的話，那張照片就等於不存在。
文字和背景的顏色差異（對比度）要足夠。國際標準（WCAG）建議一般文字的對比度在4.5:1以上。
做好無障礙，年長的客人、在陽光下看手機的客人也會更方便，搜尋引擎也更能理解內容。依行業和規模，有時法律上也會要求無障礙，需要確認。
網站無障礙是用什麼標準來判斷？
網站無障礙是依國際標準WCAG（網頁內容無障礙指引），以及以此為基礎制定的韓國標準KWCAG（韓國型網頁內容無障礙指引）來判斷。WCAG由W3C制定，目前的建議版本是2.2版；韓國國內則使用KWCAG 2.2版。
兩種標準都是從四個原則出發。原則的名稱聽起來很難，但套到店家網站上，意思其實很簡單。
一般的店家網站也很適合參考這套標準。這樣就能和製作公司用同一套說法討論無障礙做到什麼程度，日後想再提高標準時，起點也很清楚。
表格可以左右滑動查看
| 原則 | 意思 | 在店家網站上 |
|---|---|---|
| 可感知 | 所有客人都要能看到或聽到內容 | 照片說明、足夠的文字對比、影片字幕 |
| 可操作 | 所有客人都要能使用按鈕和選單 | 用鍵盤也能預約、按鈕夠大 |
| 可理解 | 要能理解內容和使用方式 | 淺顯的文字、輸入欄位名稱、好懂的錯誤提示 |
| 穩健性 | 在各種裝置・輔助程式上都要能正常運作 | 符合標準的程式碼、相容螢幕閱讀器 |
小店家的網站也有法律義務要做無障礙嗎？
網站無障礙的法源是韓國《身心障礙者歧視禁止及權利救濟等相關法律》（簡稱《身心障礙者歧視禁止法》），適用對象和時間則由施行令分階段規定。所以很難一概而論說「所有店家義務都一樣」，會依經營型態和規模而有所不同。
自己的店是否適用，最準確的方式是到國家法令資訊中心查閱法律和施行令原文，或是請教專家。如果有參與公部門專案或標案，也可能被要求取得網站無障礙品質認證。
撇開法律義務不談，做好無障礙就是少流失客人。開始有老花眼的老客人、一手抱著小孩一手滑手機的客人，也一樣受惠。
網站無障礙品質認證和法律義務是兩回事，是接受審查、確認是否符合標準後取得認證的制度。如果是小店家，就算不去申請認證，參考標準把基本做好，就已經很有意義了。
文字對比度4.5:1要怎麼檢查？
對比度是用數字表示文字顏色和背景顏色的明暗差距，只要把兩種顏色輸入免費的對比度檢查工具，馬上就知道。WCAG 2.2成功準則1.4.3要求一般文字達到4.5:1以上，大字（18點以上，粗體則是14點以上）達到3:1以上。
設計上常卡關的地方，是淺灰色的提示文字、疊在照片上的白字，以及品牌色按鈕上的文字。照片上的文字在照片較亮的部分對比會不足，所以會把照片稍微調暗，或在文字後面墊一層半透明背景。
Logo和裝飾用文字不在這個標準的範圍內。但價格・營業時間・按鈕這類客人一定要看的文字，就必須一個不漏地檢查。
也要注意不要只靠顏色傳達資訊。像「紅色日期代表額滿」這樣只用顏色區分，不易分辨顏色的客人就看不懂，所以要一併加上「額滿」字樣或標示。
老闆可以自己做哪些無障礙檢查？
就算沒有專業工具，基本的問題也能自己找出來。下面的檢查只要有電腦和手機，20~30分鐘就能完成。
發現問題時，把位置截圖傳給製作公司就可以了。問題說得越清楚，修改也會越快。
如果螢幕閱讀功能在某些地方只念出「圖片」、「按鈕」，代表那裡缺少說明或名稱。對客人來說，這是不知道用途的按鈕，應該最優先修正。
- 01在電腦上不用滑鼠，只用Tab鍵在選單間移動，試著一路走到預約・詢問。
- 02用Tab鍵移動時，確認看不看得到外框之類的標示，知道目前停在哪裡。
- 03把瀏覽器放大到200%，看看文字有沒有重疊或被切掉。
- 04打開手機的螢幕閱讀功能（iPhone的VoiceOver、Android的TalkBack），聽聽看首屏的內容。
- 05確認預約・詢問表單的每個輸入欄位都有名稱，以及輸入錯誤時會不會告訴客人錯在哪裡。
- 06如果有影片，確認有沒有字幕，以及不開聲音也能看懂內容。
不同行業做無障礙時，特別要注意哪些地方？
每個行業客人一定要看的資訊不一樣，所以先檢查這些資訊是否人人都能取得就好。以下是小店家常常忽略的地方。
如果店裡年長的客人多，也要一併注意字體大小。很多客人會在手機設定裡把字調大，建議試試看放大文字後，按鈕上的字會不會被切掉或重疊。
要改的地方看起來再多，也不必一次全部做完。從預約・詢問・價格這類客人一定會經過的畫面開始，依序修改就行了。
- 咖啡廳・餐廳：菜單只放照片的話，螢幕閱讀器讀不出來，菜色和價格也要用文字寫出來。
- 美髮店：預約表單的日期・時間選擇不要只能用滑鼠操作，輸入欄位也要加上名稱。
- 工作室：課程介紹影片要加字幕，準備物品・所需時間也要用文字寫出來。
- 網路販售：一整張長圖做成的商品詳情頁，要把重點資訊（材質・尺寸・配送）一併用文字寫出來。
網站無障礙常見的錯誤有哪些？
最常見的錯誤是想在上線前一口氣把無障礙全部改好。顏色・字體大小・表單結構都是在設計階段決定的，一開始就定好標準會輕鬆得多。
只看自動檢測工具的分數就結束也很可惜。工具能告訴您照片說明「有沒有寫」，卻判斷不了「寫得對不對」，所以一定要有人親自確認。
無障礙不是調整一次就結束的事。每次上傳新照片、新的活動橫幅、新菜單時，都要再注意照片說明和文字對比，所以負責經營網站的人了解基本規則很重要。
網站無障礙要問製作公司哪些問題？
如果製作公司說「有做到無障礙」，請他們提供用什麼標準、怎麼確認的結果，並保存下來。日後要修改或交給別家處理時也派得上用場。
- 無障礙標準（WCAG・KWCAG）會做到什麼程度？
- 在設計稿階段會確認文字對比嗎？
- 只用鍵盤就能從頭到尾完成預約・詢問嗎？
- 上線後老闆上傳照片時，有方便填寫說明（alt）的欄位嗎？
舉例來說
- 在淺灰色底上用白字寫營業時間，很多客人都看不清楚。
- 與其寫「點這裡」，不如寫「查看完整菜單」，讓人只讀按鈕文字就能理解意思。
確認這幾點就好
- 每張照片是否都有說明（alt）
- 文字是否和背景明顯區分
- 在手機上放大畫面時，版面是否不會跑掉
- 只聽按鈕文字，是否就知道它的作用
我的店需要嗎？
所有網站都適用。年長客人多的店家更要多加留意。
在ISSYMO
為每張照片寫上說明（alt），已包含在搜尋・AI曝光基本設定中。無障礙標準要做到什麼程度，會在會議中一起決定。
常見問題
參考資料
最後更新日