報告人：葉耀明 國立台灣師範大學資訊工程系 開南大學資訊學院

Presentation on theme: "報告人：葉耀明 國立台灣師範大學資訊工程系 開南大學資訊學院"— Presentation transcript:

1 報告人：葉耀明 國立台灣師範大學資訊工程系 開南大學資訊學院
國家通訊傳播委員會 「新版無障礙網頁開發規範」說明會 報告人：葉耀明 國立台灣師範大學資訊工程系 開南大學資訊學院 執行單位：中華民國資訊軟體協會

2 計畫背景 研考會推動網路服務資訊無障礙化，於民國92年擬訂「無障礙網頁開發規範」第一版。
為因應WCAG 2.0，研考會曾於99年10月參考WCAG 2.0重新檢視研修適用我國環境的「無障礙網頁開發規範二版（草案）」。 身心障礙者權益保障法於民國100年06月29日修訂完成，但產生「公共資訊無障礙」主管機關歸屬問題，後確認國家通訊傳播委員會主管(電信網站、新聞媒體網站)，研考會(政府網站)、教育部(學校網站)、金管會(銀行網站)、內政部(民間社團網站)、經濟部(電子商務網站)、衛福部(醫院網站)等各負責相關領域無障礙網路。 本計畫由國家通訊傳播委員會於民國102年10月委託中華民國資訊軟體協會執行。

3 無障礙網路標準 國際無障礙網路標準 台灣無障礙網路標準
訂定組織：W3C(World Wide Web Consortium)組的 WAI(Web Accessibility Initiative)委員會 WCAG 1.0: 1999/5公佈 WCAG 2.0: 2008/12公佈 台灣無障礙網路標準 訂定組織：行政院研考會，國家通訊傳播委員會 無障礙網頁開發規範第一版: 2003/3公佈 無障礙網頁開發規範第二版:2010/5開始訂定、2010/10/20草案公佈徵詢意見 本計畫修訂無障礙網頁開發規範第二版草案、無障礙網頁設計技術手冊、自我評量暨稽核手冊

4 身心障礙者權益保障法 民國 100 年 06 月 29 日 修訂 第52條:各級及各目的事業主管機關應辦理下列服務，以協助身心障礙者參與社會： 一、休閒及文化活動。 二、體育活動。 三、公共資訊無障礙。 四、公平之政治參與。 五、法律諮詢及協助。 六、無障礙環境。 七、輔助科技設備及服務。 八、社會宣導及社會教育。 九、其他有關身心障礙者社會參與之服務。 前項第三款所稱公共資訊無障礙，係指應對利用網路、電信、廣播、電視等設施者，提供視、聽、語等功能障礙國民無障礙閱讀、觀看、轉接或傳送等輔助、補助措施。前項輔助及補助措施之內容、實施方式及管理規範等事項，由各中央目的事業主管機關定之。 第一項除第三款之服務措施，中央主管機關及中央各目的事業主管機關，應就其內容及實施方式制定實施計畫。

5 規範設計比較 國際WCAG 1.0, 2.0標準和國內無障礙網頁開發規範的比較 WCAG 1.0 無障礙網頁開發規範 WCAG 2.0
無障礙網頁開發規範二版（草案） 組織架構 兩個主題概念 4項網頁可及性因素 4項原則 規範條文 14條規範 12條規範 規範細節 65項檢測點 90個檢測碼 61個成功準則；另額外提供充分技巧與技巧忠告 XH（軟體檢測碼）-29 CS（軟體檢測碼）-12 ME（軟體檢測碼）-1 EV（自我評量碼）-169 檢測方式 人工檢測為主 人工/機器檢測 軟體檢測/自我評量 檢測等級 3個檢測等級 認證標章 3個認證標章 4個認證標章 A、A+、AA、AAA 3個認證標章(待討論) A、AA、AAA

6 WCAG 2.0相對於WCAG1.0的優點 WCAG 2.0建立和其他標準更密切的關係
WCAG, ATAG, UAAG, WAI-ARIA, 各國翻譯版本等 WCAG 2.0為技術獨立，可適用於更多Web技術 目前Web技術(CSS…)、未來Web技術、非W3C標準等 WCAG 2.0強調”成功要素”，且更可精確測試 更容易做機器檢測，但仍需人工檢測 WCAG 2.0在不同技術下更有可調性(adaptability)和彈性(flexibility) 技術容許彈性更大，例如Script WCAG 2.0提供更多支援文件與實作導引 Intent, Techniques, FAQ, …

7 規範內文 一、規範層次 本規範為四項原則及十二條規範條文，依據Technique for WCAG 2.0，制訂HTML、XHTML、CSS、Media等四類軟體檢測碼與自我評量碼（註）。 二、檢測等級-不另外制訂A+等級（註）

8 不另外制訂A+等級（註） 「無障礙網頁開發規範二版（草案）」中，將不另外制訂A+等級，未來規範二版A等級將涵蓋現行A+等級檢測碼範圍。

9 一、二版A、A+比較表 一版規範 一版 A等級 A+等級 二版規範 二版 第1優先等級，合計有29條 ● 第1優先等級，合計有91條
6.5：H206104若網頁物件使用事件驅動時，確定勿僅使用滑鼠操作(AA，網頁瀏覽工具具有使用鍵盤設計，勿只設計僅能使用滑鼠點選) 5.1：EV 提供由鍵盤觸發的事件處理程式 9.2：H 對所有網頁內容元素，確保有滑鼠以外的操作介面(AA，網頁瀏覽工具具有使用鍵盤設計，勿只設計僅能使用滑鼠點選) 9.3：H 確保事件的啟發不要求一定得使用滑鼠(AA，網頁瀏覽工具具有使用鍵盤設計，勿只設計僅能使用滑鼠點選) 9.5：H 對經常使用的超連結，增加快速鍵的操作(AAA，定位點(:::)搭配鍵盤快速鍵(Accesskey)) 廢除，不適用 13.6：H 為你的網站提供網站地圖或整體性的簡介(AA，網站導覽功能(Sitemap)) 8.5：EV 提供網站地圖、導覽工具或機制、搜尋功能、網頁清單鏈結等功能，協助使用者尋找內容

10 四項原則 （一）可感知 （二）可操作 （三）可理解 （四）穩健的 資訊及使用者介面元件一定要以使用者能夠察覺的方式來呈現
使用者介面元件和導覽功能一定要可操作 （三）可理解 資訊及使用者介面的操作一定要可理解 （四）穩健的 內容一定要穩健，而能夠被各種不同的使用者代理及輔助科技來可靠地加以闡釋

11 十二條規範 規範一：為任何非文字的內容提供相等意義的替代文字，使這些內容能依人們的需求，轉變成大字版、點字、語音、符號或簡化過的語言等不同型態 規範二：針對時序媒體提供替代內容 規範三：建立能以不同方式（例如簡化的版面）呈現，而仍不會喪失資訊或結構的內容 規範四：讓使用者能更容易地看見及聽到內容、區分前景和背景 規範五：讓所有的功能都能透過鍵盤使用 規範六：提供使用者充分的時間來閱讀及使用內容 規範七：不要用任何已知會引發痙攣的方式來設計內容 規範八：提供協助使用者導覽、尋找內容及判斷所在的方法 規範九：讓文字內容可讀並可理解 規範十：讓網頁以可預期的方式來呈現及運作 規範十一：幫助使用者避開及更正錯誤 規範十二：針對目前及未來的使用者代理與輔助科技，最大化其相容性

12 第一版十四條規範 規範一：對於聽覺及視覺的內容要提供相等的替代文字內容 規範二：不要單獨靠色彩來提供特殊資訊
規範三：適當地使用標記語言和樣式表單 規範四：闡明自然語言的使用 規範五：建立編排良好的表格 規範六：確保網頁能在新科技下良好地呈現 規範七：確保使用者能處理時間敏感內容的改變 規範八：確保嵌入式使用者介面具有直接可及性 規範九：設計裝置獨立網頁 規範十：使用過渡的解決方案 規範十一：使用國際與國內官方訂定的技術和規範 規範十二：提供內容導引資訊 規範十三：提供清楚的瀏覽網站機制 規範十四：確保簡單清楚的網頁內容

13 軟體檢測碼與自我評量碼格式 XH 1 01 00 00 自我評量碼 軟體檢測碼 EV XH,CS,ES,SV,SM,ME
第四、五位數碼：規範細則 第一位數碼 ：檢測等級 XH 1 01 00 00 網頁語言：XH表示HTML,XHTML 第六、七位數碼：規範內的流水號碼 第二、三位數碼：十二條規範

14 軟體檢測碼與自我評量碼格式 檢測碼格式為二碼文字與七碼數字：XX3141099，這九碼字符共可分為四欄
軟體檢測碼前二碼文字：表示「網頁科技」，如下表 自我評量碼前二碼文字固定為EV 前二碼文字 網頁科技 XH HTML與XHTML CS CSS ES ECMA-262（ECMA Script）、 JavaScript、ActionScript SV 伺服器端科技 SM SMIL ME 純文字及其他媒體內容

15 軟體檢測碼訊息（部分） 檢測碼 訊息 檢測等級 對應規範 參考 Techniques for WCAG 2.0 XH1010101
影像地圖的區域組件需 有替代文字屬性，且其 值不得為空字串或空白 A 1.1 H24 XH 圖片組件之長描述屬性 值需為有效之URI，且 其目的資源末端能以超 連結回到此圖片組件 G73、G74、 H45 XH 任何已知的組件前景、 背景色彩配置，其對比 值均不會低於3:1 AA 4.3 G148 XH 任何已知的組件前景、 背景色彩配置，其對比 值均不會低於4.5:1 AAA 4.6

16 自我評量碼訊息（部分） 自我評量碼 訊息 檢測等級 對應規範 參考 Techniques for WCAG 2.0 EV1000003
在未能符合規範的網頁開頭提供鏈 結，指向符合規範的替代版本 A 整體 G136 EV 緊接著未符合規範的物件，或以關 連的方式提供鏈結，連往符合規範 的替代版本 G190 EV 為現場的同步媒體建立字幕 AA 2.4 G9 EV 為同步媒體中所有的視訊內容提供 具有音訊描述或額外音訊描述的電 影，或提供使用者可選取、且含有 音訊描述的第二音軌 2.5 G8、G78、 G173 EV 在視訊串流當中包含手語翻譯 AAA 2.6 G54 EV 提供可以在不同視埠播放、或由播 放軟體疊合在影像上的手語翻譯同 步視訊 G81

17 無障礙網頁設計與檢測六大步驟

18 無障礙檢測及標章申請流程 步驟一：至指定單位下載FreeGo II v1.0
國家通訊傳播委員會 指定網站 無障礙網頁開發規範二版下載 無障礙網頁設計技術手冊二版下載 自我評量暨稽核手冊下載 FreeGo II v1.0下載 申請無障礙標章核發 軟體檢測報告、自我評量報告上傳

19 步驟二：以FreeGo II v1.0進行軟體檢測 （模擬FreeGo II v1.0軟體執行時的畫面）
步驟： ① ② ③ 輸入檢測網址 檢測結果 儲存檢測報告 檢測設定 檢測網站層數設定： ○全網站 ●單頁 開始檢測 網站檢測等級設定： ●A ○AA ○AAA

20  ① ② ③ 步驟： FreeGo II v1.0 輸入檢測網址 檢測結果 儲存檢測報告 http://example.com
全網站通過A等級軟體檢測  檢視記錄 重新檢測

21  ① ② ③ 步驟： FreeGo II v1.0 輸入檢測網址 檢測結果 儲存檢測報告 http://example.com
全網站未通過A等級軟體檢測  檢視記錄 重新檢測

22 FreeGo II v1.0 步驟： ① ② ③ 輸入檢測網址 檢測結果 儲存檢測報告 儲存檢測報告 取消

23 軟體檢測報告內容 (1)軟體檢測報告（通過之範例） (2)自我評量檢核表（範例） (1)軟體檢測報告（未通過之範例） 檢測報告包含以下內容：
情況一：當通過軟體檢測時，包含 (1)軟體檢測報告（通過之範例） (2)自我評量檢核表（範例） 情況二：當未通過軟體檢測時，包含 (1)軟體檢測報告（未通過之範例）

24 軟體檢測報告（通過之範例）

25 自我評量檢核表（範例）

26 軟體檢測報告（未通過之範例）

27 步驟三：至指定單位申請無障礙標章 國家通訊傳播委員會 指定網站 無障礙網頁開發規範二版下載 無障礙網頁設計技術手冊二版下載
自我評量暨稽核手冊下載 FreeGo II v1.0下載 申請無障礙標章核發 軟體檢測報告、自我評量報告上傳

28 步驟四：指定稽核小組進行標章核發與抽查程序

29 無障礙網頁設計技術手冊(草稿) 參考WAI訂定的《Techniques for WCAG 2.0》， 配合中文網站設計需求來撰寫並製作示範網頁 依照12規範條文與61成功準則來編定內容 以HTML原始編碼範例為核心來說明正確的無障礙網頁設計技巧

30 無障礙網頁設計自我評量手冊(草稿) 參考WAI訂定的《Techniques for WCAG 2.0》， 配合中文網站設計需求來撰寫並製作示範網頁 依照12規範條文與61成功準則的結構來區分自我評量碼，並依169個自我評量碼個別編定內容 自我評量碼內文以範例網頁在各種瀏覽器及檢核工具呈現的內容為說明主體。

31 協助自我評量暨稽核作業執行的工具 為了評量無障礙網頁設計的情況，評量者需要準備並熟悉多種不同的工具： 桌面應用程式 瀏覽器搭配擴充套件
FreeGo, NVDA, VirtualBox, WebbIE,色彩對比分析程式 瀏覽器搭配擴充套件 Firefox, Complex Table Toolbar, Accessibility Toolbar 網頁服務 W3C Unicorn W3C協會提供的整合驗證器，可驗證各項網頁檔案是否符合規範。

32 網站整體評量 無障礙網頁設計的評量當中，有幾項整體性原則：
先檢測後評量 ：不論是何種檢測等級的評量程序，均先確認網站通過此檢測等級的軟體檢測；軟體檢測的設計是用來避免顯著的設計錯誤，並可根據網站的內容，預先排除不需要的評量項目。先通過檢測後再進行評量，有助於減輕評量程序的複雜性及操作成本。 檢測等級向下涵蓋 ：通過檢測等級A的評量程序後，方可進行檢測等級AA的評量程序；通過檢測等級AA的評量程序後，方可進行檢測等級AAA的評量程序。 替代版本 ：若網站任何一部分未能符合規範要求，但有以合適的方式提供符合規範要求的替代版本，則可以此替代版本之部分進行檢測與評量。但此規則僅適用於檢測等級A，不可適用於檢測等級AA與檢測等級AAA；任何欲通過檢測等級AA或檢測等級AAA之網站，均需全站通過。

33 新版規範 A級攻略 （一）可感知: （二）可操作 （三）可理解 （四）穩健的 1.1(A)替代文字,
2.1(A),2.2(A),2.3(A)視訊替代內容, 3.1(A),3.2(A),3.3(A)內容結構, 4.1(A),4.2(A)區隔前景背景 （二）可操作 5.1(A),5.2(A)鍵盤操作, 11.1(A),11.2(A)輸入更正 （三）可理解 6.1(A),6.2(A)充分時間, 7.1(A)避免引發痙攣, 8.1(A),8.2(A),8.3(A),8.4(A)導覽鏈結, 9.1(A)語言判讀, 10.1(A),10.2(A)預期順序呈現 （四）穩健的 12.1(A),12.2(A)輔助科技相容

34 試評總統府網站 www.president.gov.tw
一版A+認證通過 以自我評量碼來操作試評 網站內容: 影音 民眾信箱 活動訊息(資料庫) 中文版、英文版 兒童版、手機版 註:輸入CAPTCHA

35 自我檢測碼-EV1010109(規範一) EV1010109：任何CAPTCHA驗證均需提供描述CAPTCHA驗證目的的替代文字
評量條件 任何使用CAPTCHA驗證的網頁都必須要符合此規範 參考資源：

36 評量步驟 以瀏覽器檢視網頁 此網頁有使用到驗證碼

37 評量步驟 檢視網頁原始碼 按滑鼠右鍵，選擇”檢視網頁原始碼”

38 評量步驟 找出使用驗證碼的地方，檢查是否使用alt屬性加上替代文字

39 評量步驟 替代文字要能夠說明驗證碼的目的 結果：這裡的替代文字說明不夠明確，可以改成：”驗證碼，請輸入XXXX”

40 自我評量碼: EV1020101(規範二) EV1020101：提供預先錄製之純視訊內容的時序媒體替代內容（檢測等級A）
評量條件 任何純視訊內容的時序媒體，都必須要遵守此規範。 參考資源

41 評量步驟: 影音內容

42 播放影音(無字幕)，檢視替代內容

43 評量結果 替代內容可說明影音的主要內容通過A級認證 註1：若影音另外提供可讓NVDA等螢幕報讀軟體閱讀的同步字幕，即可通過AA級認證

44 自我檢測碼- EV1030101(規範三) EV1030101：使用色彩線索的時候就使用語意標記（檢測等級A）
評量條件 使用顏色改變文字時，須遵守此規範。 參考資源

45 評量步驟 使用Google Chrome瀏覽器開啟總統府網頁

46 評量步驟 2.點選右鍵檢視網頁原始碼

47 評量步驟 結果建議： color: blue 較好
從<span style="color:#02fcf4;">最佳解析度 1024 × 768 ，意思是可將文字最佳解析度 1024 × 768設為:#02fcf4 (類似青藍色)。 結果建議： color: blue 較好

48 自我檢測碼- EV1050100(規範五) EV1050100：提供由鍵盤觸發的事件處理程式（檢測等級A）
評量條件 任何事件無論是鍵盤還是滑鼠的事件皆可由鍵盤來完成，都必須要遵守此規範。 參考資源

49 評量步驟 使用chrome瀏覽器 打開網頁

50 評量步驟 這裡使用tab鍵可取代滑鼠點擊的功能。 舉例1:使用tab鍵按下數次，可致欲點選的項目進行點選。

51 評量步驟 按下enter鍵即可跳轉到網頁

52 評量步驟 舉例2，一樣使用tab鍵按下數次，可至欲點選的項目進行點選，此例換一個項目檢測。

53 評量步驟 按下enter，可跳轉到網頁 結果：通過(滑鼠、鍵盤可操作)

54 自我檢測碼- EV1080200(規範八) EV1080200：提供網頁的描述性標題（檢測等級A） 規範八，成功準則8.2，檢測等級A
評量條件 任何運用HTML或XHTML技術的網頁，皆能以此方法來做檢測。 參考資源

55 評量步驟 檢測瀏覽器網頁上所顯示描述性的標題

56 評量步驟 按右鍵->選擇檢視網頁原始碼

57 評量步驟 檢查title即可看到網頁的描述性標題內容:通過

58 自我檢測碼- EV1080401(規範八) EV1080401：針對脈絡中的鏈結，提供描述鏈結目的的鏈結文字（檢測等級A）
評量條件 任何在HTML或XHTML的網頁內存在鏈結，都需要遵守此規範。 參考資源

59 評量步驟 使用Google Chrome「檢視原始碼」顯示連結 (按下右鍵→檢視原始碼)

60 評量步驟 檢查是否有提供描述鏈結目的的文字，並點擊連結來驗

61 評量步驟 href="/Default.aspx?tabid=177

62 評量步驟 使用Google Chrome「檢視原始碼」顯示連結 (按下右鍵→檢視原始碼)

63 評量步驟 檢查是否有提供描述鏈結目的的文字，並點擊連結來驗證

64 通過! href="/Default.aspx?tabid=131&itemid=31412&rmid=514

65 自我檢測碼- EV1090100(規範九) EV1090100：明確指出網頁文字所使用的人類語言 規範九，成功準則9.1，檢測等級A
評量條件 網頁須明確指出為何種人類語言，皆需符合此規範。 參考資源

66 評量步驟1-1 以google chrome為例，用瀏覽器開啟欲檢測的網站，我們先檢測中文網頁。

67 評量步驟1-2 2. 在網頁上按右鍵點選“檢視網頁原始碼”。

68 評量步驟1-3 搜尋”lang”，找到lang裡即是此網頁的語言。以此例”zh－TW”，即為繁體中文網頁，檢查結果符合。

69 評量步驟2-1 1. 接著，我們將總統府網頁切換到英文版來檢測看看。

70 評量步驟2-2 2. 在網頁上按右鍵點選“檢視網頁原始碼”。

71 評量步驟2-3 搜尋”lang”，找到lang裡即是此網頁的語言。以此例”en-US”，即為英文網頁，檢查結果符合。

72 待解決問題 評量通過! 使用Chrome瀏覽器可正常評量，但使用IE瀏覽器來評量，無法搜尋到lang 屬性參數，因此用IE瀏覽器無法檢測出來，這問題有待解決。

73 自我檢測碼- EV1110200(規範十一) EV1110200：在使用者送出資料前，先描述會發生什麼事（檢測等級A）
評量條件 任何在HTML或XHTML的網頁內，出現需要使用者選擇項目或是提供資料並提交的按鈕時，都需要遵守此規範。 參考資源

74 評量步驟 1.檢查網頁內是否有出現需要使用者選擇項目或是提供資料並提交的按鈕

75 評量步驟 2.檢查按鈕上面使否有說明按下後會發生什麼事 通過

76 試評總統府網站初步結果 可通過新版規範A級認證 有小部份改善意見 驗證碼CAPTCHA替代說明 改變顏色使用語意標記 …

77 自我評量報告規劃方向 以整個網站為原則： 以十二條規範為說明主軸(第一階段)
具體說明網站功能模組，並以網頁為例，說明設計細節 以十二條規範為說明主軸(第一階段) 61條成功準則(第二階段) 169個自我評量碼(第三階段) 註：十二條規範至少取一個自我評量碼說明其符合無障礙設計，由官方網站規定一定要說明的自我評量碼，並擬分階段加多自我評量碼數量

78 FAQ 認證標章是否具有效期限? 網站內套裝系統未有無障礙設計，應如何處理? 目前規劃認證標章有效期限3年，在期滿前3個月可提新認證
治標做法：在進入套裝系統前可以使用替代內容來說明套裝系統中提供的服務與資訊 治本做法：要求套裝系統的開發廠商改善無障礙設計 註: google map等GIS系統的無障礙設計需要觸控螢幕和VoiceOver等功能，需由廠商另行開發

79 謝謝各位!