Скачать презентацию 國家通訊傳播委員會 新版無障礙網頁開發規範 說明 會 報告人 葉耀明 國立台灣師範大學資訊 程系 Скачать презентацию 國家通訊傳播委員會 新版無障礙網頁開發規範 說明 會 報告人 葉耀明 國立台灣師範大學資訊 程系

cb259b124017f61ede8347a3362dcbd5.ppt

  • Количество слайдов: 79

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

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

無障礙網路標準 • 國際無障礙網路標準 – 訂定組織:W 3 C(World Wide Web Consortium)組的 WAI(Web Accessibility Initiative)委員會 – 無障礙網路標準 • 國際無障礙網路標準 – 訂定組織:W 3 C(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草案 公佈徵詢意見 – 本計畫修訂無障礙網頁開發規範第二版草案、 無障 礙網頁設計技術 手冊 、 自我評量暨稽核 手冊 3

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

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

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

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

不另外制訂 A+等級(註) • 「無障礙網頁開發規範二版(草案)」中, 將不另外制訂 A+等級,未來規範二版 A等 級將涵蓋現行 A+等級檢測碼範圍 。 原 A+等級 變更為 A等級 不另外制訂 A+等級(註) • 「無障礙網頁開發規範二版(草案)」中, 將不另外制訂 A+等級,未來規範二版 A等 級將涵蓋現行 A+等級檢測碼範圍 。 原 A+等級 變更為 A等級 8

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

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

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

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

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

軟體檢測碼 與自我評量碼格式 • 檢測碼格式為二碼文字與七碼數字: XX 3141099,這 九碼字符共可分為四欄 – 軟體檢測碼 前二碼文字:表示「網頁科技」,如下 表 前二碼文 – 自我評量碼 軟體檢測碼 與自我評量碼格式 • 檢測碼格式為二碼文字與七碼數字: XX 3141099,這 九碼字符共可分為四欄 – 軟體檢測碼 前二碼文字:表示「網頁科技」,如下 表 前二碼文 – 自我評量碼 前二 碼 文字固定 為 EV 網頁科技 字 XH HTML與 XHTML CS CSS ECMA-262( ECMA Script)、 ES Java. Script、 Action. Script SV 伺服器端科技 SM SMIL ME 純文字及其他媒體內容 14

軟體檢測碼訊息(部分) 檢測碼 訊息 影像地圖的區域組件 XH 1010101 需有替代文字屬性,且 其值不得為空字串或 空白 圖片組件之長描述屬 性值需為有效之 URI, XH 1010102 軟體檢測碼訊息(部分) 檢測碼 訊息 影像地圖的區域組件 XH 1010101 需有替代文字屬性,且 其值不得為空字串或 空白 圖片組件之長描述屬 性值需為有效之 URI, XH 1010102 且其目的資源末端能 以超連結回到此圖片 組件 任何已知的組件前景、 XH 2040300 背景色彩配置,其對比 值均不會低於 3: 1 任何已知的組件前景、 XH 3040600 背景色彩配置,其對比 值均不會低於 4. 5: 1 檢測等 級 對應規範 參考 Techniques for WCAG 2. 0 A 1. 1 H 24 A 1. 1 G 73、 G 74、 H 45 AA 4. 3 G 148 AAA 4. 6 G 148 15

自我評量碼訊息(部分) 自我評量 碼 訊息 檢測等 級 對應規 範 參考 Techniques for WCAG 2. 0 自我評量碼訊息(部分) 自我評量 碼 訊息 檢測等 級 對應規 範 參考 Techniques for WCAG 2. 0 EV 1000003 在未能符合規範的網頁開頭提供 鏈結,指向符合規範的替代版本 A 整體 G 136 緊接著未符合規範的物件,或以 EV 1000004 關連的方式提供鏈結,連往符合 規範的替代版本 A 整體 G 190 EV 2020400 為現場的同步媒體建立字幕 AA 2. 4 G 9 為同步媒體中所有的視訊內容提 EV 2020500 供具有音訊描述或額外音訊描述 的電影,或提供使用者可選取、 且含有音訊描述的第二音軌 AA 2. 5 G 8、 G 78、 G 173 AAA 2. 6 G 54 AAA 2. 6 G 81 EV 3020600 在視訊串流當中包含手語翻譯 提供可以在不同視埠播放、或由 EV 3020601 播放軟體疊合在影像上的手語翻 譯同步視訊 16

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

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

步驟二:以Free. Go II v 1. 0進行軟體檢測 (模擬 Free. Go II v 1. 0軟體執行時的畫面) Free. 步驟二:以Free. Go II v 1. 0進行軟體檢測 (模擬 Free. Go II v 1. 0軟體執行時的畫面) Free. Go II v 1. 0 步驟: ① ② ③ 輸入檢測網址 檢測結果 儲存檢測報告 http: //example. com 檢測設定 檢測網站層數設定: ○全 網站 ●單 頁 網站檢測等級設定: ●A ○AAA 開始檢測 19

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

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

Free. Go II v 1. 0 步驟: ① ② ③ 輸入檢測網址 檢測結果 儲存檢測報告 取消 Free. Go II v 1. 0 步驟: ① ② ③ 輸入檢測網址 檢測結果 儲存檢測報告 取消 22

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

軟體檢測報告(通過之範例) 24 軟體檢測報告(通過之範例) 24

自我評量檢核表(範例) 25 自我評量檢核表(範例) 25

軟體檢測報告(未通過之範例) 26 軟體檢測報告(未通過之範例) 26

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

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

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

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

協助自我評量暨稽核作業執行的 具 • 為了評量無障礙網頁設計的情況,評量者 需要準備並熟悉多種不同的 具: • 桌面應用程式 – Free. Go, NVDA, Virtual. Box, 協助自我評量暨稽核作業執行的 具 • 為了評量無障礙網頁設計的情況,評量者 需要準備並熟悉多種不同的 具: • 桌面應用程式 – Free. Go, NVDA, Virtual. Box, Webb. IE, 色彩對比分析程式 • 瀏覽器 搭配擴充 套件 – Firefox, Complex Table Toolbar, Accessibility Toolbar • 網頁服務 • W 3 C Unicorn – W 3 C協會 提供的整合驗證器,可驗證各項網頁檔案是 否 符合規範。 http: //validator. w 3. org/unicorn/ 31

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

新版規範 A級攻略 • (一)可 : 感知 – – 1. 1(A)替代文字 , 2. 1(A), 2. 新版規範 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)輔助 科技相容 33

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

自我檢測碼 -EV 1010109(規範 一) • EV 1010109: 任何 CAPTCHA驗證均需提供描 述 CAPTCHA驗證目的的替代文字 • 規範一,成功準則 1. 自我檢測碼 -EV 1010109(規範 一) • EV 1010109: 任何 CAPTCHA驗證均需提供描 述 CAPTCHA驗證目的的替代文字 • 規範一,成功準則 1. 1, 檢測 等級 A • 註 : CAPTCHA驗證 碼為近年來網站登錄與輸 入操作的必備功能。 • 評量 條件 – 任何使用 CAPTCHA驗證的網頁都必須要符合此 規範 • 參考資源: – http: //www. w 3. org/TR/WCAG-TECHS/G 143. html 35

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

評量步驟 • 檢視網頁原始碼 – 按滑鼠右鍵,選擇 ”檢視網頁原始碼 ” 評量步驟 • 檢視網頁原始碼 – 按滑鼠右鍵,選擇 ”檢視網頁原始碼 ”

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

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

自我評量碼 : EV 1020101(規範二 ) • EV 1020101:提供預先錄製之純視訊內容 的時序媒體替代內容(檢測等級 A) • 規範二,成功 準則 2. 自我評量碼 : EV 1020101(規範二 ) • EV 1020101:提供預先錄製之純視訊內容 的時序媒體替代內容(檢測等級 A) • 規範二,成功 準則 2. 1, 檢測等級 A • 評量條件 – 任何 純視訊內容的時序 媒體 , 都必須要遵守 此規範。 • 參考資源

評量步驟 : 影音內容 評量步驟 : 影音內容

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

評量結果 • 替代內容可說明影音的主要內容 級認證 通過 A • 註 1: 影音另外提供可讓 NVDA等螢幕 若 報讀軟體閱讀的同步字幕,即可 通過 評量結果 • 替代內容可說明影音的主要內容 級認證 通過 A • 註 1: 影音另外提供可讓 NVDA等螢幕 若 報讀軟體閱讀的同步字幕,即可 通過 AA 級 認證 • 註 2: 若影 音再另外提供手語畫面, 即可 通過 AAA級認證

自我檢測碼 - EV 1030101(規範 三) • EV 1030101:使用色彩線索的時候就使 用語意標記(檢測等級 A) • 規範三,成功 準則 3. 自我檢測碼 - EV 1030101(規範 三) • EV 1030101:使用色彩線索的時候就使 用語意標記(檢測等級 A) • 規範三,成功 準則 3. 1, 檢測等級 A • 評量 條件 – 使用 顏色改變文字時,須遵守此規範 • 參考 資源 。 – http: //www. w 3. org/TR/WCAGTECHS/G 138. html – http: //www. w 3. org/TR/1999/REC-html 40119991224/struct/text. html#h-9. 2. 1 44

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

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

最佳解析度 1024 × 768 ,意思 是可將文字最佳解析度" src="https://present5.com/presentation/cb259b124017f61ede8347a3362dcbd5/image-47.jpg" alt="評量步驟 • 從 最佳解析度 1024 × 768 ,意思 是可將文字最佳解析度" /> 評量步驟 • 從 最佳解析度 1024 × 768 ,意思 是可將文字最佳解析度 1024 × 768設為 : #02 fcf 4 (類似青藍色 )。 • 結果建議: color: blue 較好

自我檢測碼 - EV 1050100(規範 五 ) • EV 1050100:提供由鍵盤觸發的事件處 理程式(檢測等級 A) • 規範五,成功 準則 自我檢測碼 - EV 1050100(規範 五 ) • EV 1050100:提供由鍵盤觸發的事件處 理程式(檢測等級 A) • 規範五,成功 準則 5. 1, 檢測等級 A • 評量條件 – 任何事件無論是鍵盤還是滑鼠的事件皆可 由鍵盤來完成,都必須要遵守此 規範。 • 參考資源 – http: //www. w 3. org/TR/WCAGTECHS/G 90. html 48

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

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

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

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

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

自我檢測碼 - EV 1080200(規範 八 ) • EV 1080200:提供網頁的描述性標題(檢 測等級 A) • 規範 八 自我檢測碼 - EV 1080200(規範 八 ) • EV 1080200:提供網頁的描述性標題(檢 測等級 A) • 規範 八 , 成功 準則 8. 2, 檢測等級 A • 評量條件 – 任何運用 HTML或 XHTML技術的網頁,皆能 以此方法來做檢測 。 • 參考 資源 • http: //www. w 3. org/TR/WCAG-TECHS/G 88. html • http: //www. w 3. org/TR/WCAG-TECHS/H 25. html • http: //www. w 3. org/TR/html 401/struct/global. html#h-7. 4. 2 54

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

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

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

自我檢測碼 - EV 1080401(規範八 ) • EV 1080401:針對脈絡中的鏈結,提供描 述鏈結目的的鏈結文字(檢測等級 A) • 規範 八 , 自我檢測碼 - EV 1080401(規範八 ) • EV 1080401:針對脈絡中的鏈結,提供描 述鏈結目的的鏈結文字(檢測等級 A) • 規範 八 , 成功 準則 8. 4, 檢測等級 A • 評量條件 – 任何在 HTML或 XHTML的網頁內存在鏈結, 都需要遵守此規範 。 • 參考 資源 – http: //www. w 3. org/TR/WCAG-TECHS/G 91. html 58

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

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

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

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

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

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

自我檢測碼 - EV 1090100(規範九 ) • EV 1090100: 明確 指出網頁文字所使用的人類 • 規範九,成功 準則 9. 自我檢測碼 - EV 1090100(規範九 ) • EV 1090100: 明確 指出網頁文字所使用的人類 • 規範九,成功 準則 9. 1, 檢測等級 A • 評量條件 – 網頁 須明確指出為何種人類語言,皆需符合此規範 語言 。 參考 資源 http: //www. w 3. org/TR/WCAG-TECHS/H 57. html http: //www. w 3. org/TR/html 401/struct/dirlang. html#h-8. 1 http: //www. rfc-editor. org/rfc/bcp 47. txt http: //www. w 3. org/TR/1999/REC-html 40119991224/struct/dirlang. html#h-8. 1. 2 • http: //www. w 3. org/International/tutorials/language-decl/ • http: //www. w 3. org/TR/i 18 n-html-tech-lang/ • http: //www. w 3. org/International/articles/languagetags/Overview. en. php 65 • • •

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

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

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

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

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

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

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

自我檢測碼 - EV 1110200(規範十 一) • EV 1110200:在使用者送出資料前,先描述 會發生什麼事(檢測等級 A) • 規範十 一 , 自我檢測碼 - EV 1110200(規範十 一) • EV 1110200:在使用者送出資料前,先描述 會發生什麼事(檢測等級 A) • 規範十 一 , 成功 準則 11. 2, 檢測等級 A • 評量條件 – 任何在 HTML或 XHTML的網頁內,出現需要使用者 選擇項目或是提供資料並提交的按鈕時,都需要遵 守此規範。 • 參考 資源 • http: //www. w 3. org/TR/WCAG-TECHS/G 13. html 73

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

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

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

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

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

謝謝各位 ! 79 謝謝各位 ! 79