type
status
date
slug
summary
tags
category
icon
password
comment
前言：
在工作上曾接觸過關於WCAG的Figma設計，但因當初花了時間查了一些資料，所以彙整了一些筆記，在遇到這種設計就能更快速的上手。
WCAG （Web Content Accessibility Guidelines）
簡介
又稱為網頁內容無障礙指南，由W3C提議的無障礙國際標準規範。
主要是讓身心障礙也能夠操作Web。
核心原則
- 可感知性
- 可操作性
- 可理解性
- 穩健性
總結就是要能夠方便操作，避免身障無法使用觀看或是理解，且需要能在不同設備、環境或是技術都能夠兼容。
WCAG 評分
- A : 滿足最低的無障礙需求
- AA : 提升色彩對比等，更強調使用者體驗
- AAA : 最高標準，請詳閱公開說明書，這邊我就不講
MAI
動裝置無障礙應用
顧名思義，就是手機板的無障礙規範
測試工具
其實瀏覽器開發者工具Lighthouse就有，那還有Axe與WAVE兩個測試工具，Axe比較詳細，Wave則較為簡潔。還有一些NVDA之類的閱讀工具。
如何開發
一個簡單小例子，alt Text
EX :
Alt 除了能夠讓螢幕閱讀器讀出外，還能對SEO有直接影響。再來是顏色對比度，背景與文字顏色選擇對比度在 4.5:1 以上。若3A應該會更高
音訊或影片需要有字幕或是文本替代
總結
- 兼顧多樣性需求: 不同的身障，像是聽覺或視覺之類的。
- 減少過度干擾: 防止提供不必要資訊，影片也要注意，防止癲癇。
- 測試和優化：無障礙檢測工具（如 WAVE、Axe），檢測是否符合WCAG規範。
以上都Okay則透過FreeGo進行測試，確保網站通過檢測，且需要在7天內申請標章(到E政府網站上申請)，政府網站與教育網站等公共機構網站需要達到WCAG 2.0 Level AA標準
私人網站很像不接受申請標章的樣子
- Author:Aleng
- URL:https://www.aleng.blog/article/19b44072-b72d-8088-9496-d908589da209
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!