行政院研究發展考核委員會 【網頁無障礙設計】說明會 如何建置無障礙網站 凌網科技 黃婷鈺 99年6月28日 1

大綱 1.無障礙網頁相關規範說明 2.如何自我檢驗 3.無障礙網頁標章申請流程與注意事項 4.機關申請無障礙網頁標章常見問題

無障礙網頁相關規範說明

無障礙網頁標章定義 第1優先等級(A)：符合第1優先等級為網站符合無障礙設計最基本的要求，以 標章代表。 定位點(:::)搭配鍵盤快速鍵(Accesskey)-原第3優先等級 網站導覽功能(Sitemap)-原第2優先等級 網頁瀏覽工具具有使用鍵盤設計，勿只設計僅能使用滑鼠點選-原第2優先等級 第2優先等級(AA)：符合第1及第2優先等級之無障礙設計規範，以 標章代表。 第3優先等級(AAA)：符合第1、第2及第3優先等級之無障礙設計規範，以 標章代表。 註：行政院研究發展考核委員會目前要求各政府行政機關網站要符合A+等級。

無障礙網頁開發規範 14條規範（90條檢測碼) 如何看懂檢測碼 1.1H101000-圖片需要加上替代文字說明 編號、一個字母、和六位數：X999999 可分為六欄 1.1H101000-圖片需要加上替代文字說明 起始字母：網頁語言 (H：HTML|X：XML) 檢測碼編號 (1.1~14.3,90條) 第一位數碼：優先等級 (1|2|3) 第二、三位數碼：十四條規範(Guideline) 01~14 第四位數碼：檢測狀態(Status)(0|1|2) 五、六位數碼：規範內的流水號碼 5

檢測狀態說明(機器/人工檢測) 機器辨識 / 機器檢測(0)--可透過檢測工具辨識、檢測。 機器辨識 / 人工檢測(1)--可透過檢測工具辨識，但還需由人工的方式去檢測是否符合規範。 人工辨識 / 人工檢測(2)--完全需要人工的方式來辨識、檢測。 需要人工檢視 6

第1優先等級(A) 第1優先等級：網頁內容開發者在開發網頁時必須滿足這個檢測碼。否則，某些使用者或團體將會發現不可能使用此文件的資訊。滿足這個檢測碼對一些使用網頁文件的團體來說，是一種基本的需求。 1.1：H101000 圖片需要加上替代文字說明 有意義(非裝飾用)的圖示應提供清楚正確的圖說投影片 11 使用＊或null替代裝飾用圖示投影片 13 資訊型圖示(組織圖、流程圖、位置圖)應額外提供詳細文字說明投影片 15 資料表格的行/列標題請使用正確的TH 標籤投影片 31 驗證碼圖片以語音提供替代方式投影片 17 7

A+等級 A+等級：通過第1優先等級無障礙設計，且具有定位點(:::)搭配鍵盤快速鍵(Accesskey、網站導覽功能(Sitemap) ，及網頁瀏覽工具具有使用鍵盤設計。 定位點(:::)搭配鍵盤快速鍵(Accesskey)投影片 23 網站導覽功能(Sitemap)投影片 19 網頁瀏覽工具具有使用鍵盤設計，勿只設計僅能使用滑鼠點選投影片 21 8

第2優先等級(AA) 第2優先等級：網頁內容開發者在開發網頁時應該滿足這個檢測碼。否則，某些使用者或團體將會發現有困難來使用此文件的資訊。滿足這個檢測碼，將可對網頁文件移除重要障礙。 3.5：H203004 要使用相對尺寸(如%)而非絕對尺寸(如像素)投影片 32 5.6：H205105 資料表格須提供標題說明投影片 30 10.1：H210100 除非使用者知道將會開啟一個新視窗，不要隨便開啟一個新視窗 投影片 14 12.6：H212005 在表單控制項上，以label標籤提示資訊 投影片 26 13.5：H213004 為你的網頁加上標題投影片 18 9

第3優先等級(AAA) 第3優先等級：網頁內容開發者在開發網頁時可以納入這個檢測碼的要求。否則，某些使用者或團體將會發現有可能有困難來使用此文件的資訊。滿足這個檢測碼，將可對網頁文件改善可及性。 5.5：H305004 表格須提供表格摘要說明(如summary屬性)投影片 28 10.5：H310004 在網頁文字輸入區中須有預設值投影片 27 11.4：H311203 允許使用者依照個人喜好設定網頁呈現方式與內容投影片 35 13.10：H313209 若有群組超連結，在群組之前增設一項繞過此區域的超連結投影片 20 下一頁 10

有意義(非裝飾用)的圖示應提供清楚正確的圖說 選單、非裝飾用的網頁圖示，應提供正確的替代文字說明 下一頁

多媒體播放資訊提供替代文字說明 讓瀏覽者控制播放操作 提供播放軟體連結 提供播放訊息的內容簡述 top

使用*或null替代裝飾用圖示 項目符號可使用＊或null替代，清楚簡潔。 語法：<img src=“icon.gif” alt=“*” >或 <img src=“icon.gif” alt=“” > 替代文字呈現 alt以”＊”替代 top

以「連結」文字告知，並加上開啟新視窗說明 以「連結」文字告知一個連結他網的超連結圖示，並加上開啟新視窗說明，讓使用者瞭解資訊將會在另一個新網頁中。 語法： <img src=”icon.gif” alt=”連結到我的e政府(另開新視窗)”> 替代文字呈現 清楚說明連結他網及開新頁面 top

資訊型圖示應額外提供詳細文字說明 無法充分表達資訊型圖片內容時，在網頁上再額外說明。 位置圖 流程圖 組織圖 在圖片上或下方提供詳細文字描述 下一頁

人物相片之說明 行政院院長 劉兆玄頒發國網中心團隊(由左至右為蔡育欽、 孫振凱、劉兆玄、蕭志榥、王耀聰)傑出科技貢獻獎獎盃 top

驗證碼圖片提供替代語音 使用語音方式來彌補無法看見圖形檢測碼的註冊方式 除了圖片的呈現外,另提供語音驗證的註冊方式 top

設定符合網頁內容主旨的標題 網頁內容與標題相符 top

提供清楚的網站導覽功能 以編號方式清楚呈現標題層次，並加上連結，方便瀏覽者快速進入網站 放置首頁，且鍵盤移動能於3個游標內能到達 top

跳過群組超鏈結 在此設定隱藏錨點，若想直接跳過右側群組，可按Enter直接進入下方連結 top

提供滑鼠與鍵盤皆可操控介面 網頁瀏覽功能應同時提供滑鼠與鍵盤同時可操控的介面 彈跳式選單應提供可使用鍵盤操控或替代選單 提供可使用鍵盤操作播放的介面 下一頁

鍵盤游標有規則的移動順序 遵循『由上而下』及『由左而右』的原則設定游標移動順序，使用者操作更便利。 top

依版面提供適當的定位點(:::)與快速鍵設計 上方、中央、右側 定位點係使用連續三個:號形成:::，有搜尋及定位的用途。 左側、中央、右側 上方、中央 下一頁

設計隱藏式定位點 利用網頁背景色隱藏定位點  將定位點設計與網頁背景色相符，既美觀又不失其效果 下一頁

將定位點說明放置sitemap中 將選單及內容區搭配快速鍵設定定位點，方便瀏覽者快速跳到所需資訊區 提昇網站的親和力及可及性 top

使用LABEL標籤與ID相對應 LABEL FOR與Input ID內容相對應 top

表單輸入欄位內容需有預設值 設定預設值說明欄位內容。 預設值設計注意，勿與可能填答內容相同。 例如：XXX@hotmail.com top

表格摘要說明(summary屬性)-資料表格 資料性表格需提供敘述性摘要說明。 因相關輔具能夠讀取Summary資訊，使用輔具之瀏覽者可事先得知表格內的資料種類，增加閱讀網頁便利性 下一頁 資料來源：財政部稅務入口網http://www.etax.nat.gov.tw/wSite/lp?ctNode=10815&xq_xCat=F

表格摘要說明(summary屬性)-排版表格 若表格為排版用，表格摘要說明可以「版型表格」或「＊」表示 語法: <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" summary="版型表格"> top

表格標題 提供瀏覽者在未閱讀表格資料前了解表格提供的資訊主題 使用Caption標籤 使用caption標籤表示表格標題 top

表格行列設計 認識表格行列標題 top 提供瀏覽者了解表格行與列的主題內容為何 行列標題使用th標籤 網頁呈現效果 <table width="94%" border="0" summary="活動預告表格中..."> <tr align="center"> <th>活動時間</th> <th>活動主題</th> <th>主辦單位</th> <tr> <td>95/06/09-95/07/09</td> <td>2006世界盃足球賽</td> <td>德國</td> ... </table> 網頁呈現效果 top

使用相對尺寸(%)方式設計網頁元素 一般視窗大小呈現 視窗變小呈現 以相對尺寸(%)設計表格，無論視窗大小，表格中的文字內容會隨著改變，且不會被切割 下一頁

使用相對尺寸(%)設計網頁文字 以相對尺寸設計，網頁的文字大小會依需求調整明顯放大縮小。 下一頁

使用絕對尺寸(如像素)方式設計網頁元素 視窗變小呈現 一般視窗大小呈現 程式碼 top

提供共通性的瀏覽環境 ◆網頁內容可正常顯示於各種瀏覽器 Internet Explorer FireFox 未標示網頁語言 我的E政府網站 http://www.gov.tw/ 11.4：H311203 允許使用者依照個人喜好設定網頁呈現方式與內容 下一頁

提供共通性的瀏覽環境 各項文件檔案下載請提供二種以上下載格式。 如：PDF、DOC、TXT、XLS、HTML…等 ◆同時提供多樣化的下載檔案格式 各項文件檔案下載請提供二種以上下載格式。 如：PDF、DOC、TXT、XLS、HTML…等 未標示網頁語言 我的E政府網站 http://www.gov.tw/ top 11.4：H311203 允許使用者依照個人喜好設定網頁呈現方式與內容

如何自我檢驗

網站負責人： 檢測小組： 登錄標章資料檢查 機器檢測 人工抽測 寄送通知

機器檢測：Freego單機版機器檢測軟體 人工檢測：請參考”無障礙標章人工抽測應注意事項”

網站Demo

無障礙網頁標章申請流程與注意事項

無障礙網頁標章申請流程 無障礙網頁標章申請流程圖 流程圖

無障礙網頁標章申請注意事項 標章申請登錄資料不正確者，將退回標章申請 上傳報告錯誤情況者，將退回標章申請 其它情況者，將退回標章申請 建議

基本登錄資料檢查 檢查項目 正確情況 標章機關代碼 政府機關需填寫相關的機關代碼 申請單位 需為該單位人員 申請人 需以網站負責人全名登錄 電子信箱 檢查是否為網站負責人信箱 網站名稱 登錄不清楚。如登錄成網址、資訊中心等 網址 網址登錄錯誤。例如以local端網址登錄 標章等級 需與機器檢測報告相符 登錄日期 與機器檢測報告受測日期不可相差過久

檢測紀錄通知信 下一頁

標章資訊列表 下一頁

填寫修正回覆紀錄 請參閱最新消息【檢測結果】受測網站未通過抽測之網站回覆流程 top

刪除標章通知信 top

機關申請無障礙網頁標章常見問題

常見Q&A Q：請問我是不是需先以機器檢測再將檢測 報告函送研考會做人工檢測呢？ 50

常見Q&A Q：何時可取得標章呢？ A：完成前述動作，經研考會抽驗沒有發現重大問題，即可取得標章。 51

常見Q&A Q：申請標章的同時可否繼續做網頁的修正呢？ 52

常見Q&A Q：網頁需正式營運才可人工檢測嗎？還是提 供廠商目前做的網址即可？ A：申請標章需以正式網址申請，不可用廠商暫時網址申請。 53

常見Q&A Q：Flash選單的替代連結設計 A：可參考 澎湖縣政府環境保護局兒童網 http://www.phepb.gov.tw/child/index.asp 東沙環礁國家公園兒童版 http://dongsha.cpami.gov.tw/child/index.html 嘉義市政府稅務局兒童版 http://www.citax.gov.tw/core/teenager/index.php 54

常見Q&A Q：網站導覽頁，並未說明定位點搭配快速鍵之設計。 A：請將定位點搭配快速鍵說明放置sitemap上方，以便瀏覽，並建議將sitemp放置首頁，且鍵盤移動能於3個游標內能到達。 55

常見Q&A Q：網站選單需能確保鍵盤操作者可方便使用？ http://www.taroko.gov.tw/zhTW/ http://gm.coa.gov.tw/web/index.aspx

常見Q&A Q：同網站之不同語言版網頁，可否個別申請標章？

常見Q&A Q：網站可以另闢無障礙版個別申請標章嗎？

常見Q&A Q：網站定位點及快速鍵說明應放在何處？ A：基於使用者習慣考量，建議放置網站導覽(SITE MAP)網頁內容上方為宜。

常見Q&A Q：同網域下之子網站，可分開申請標章嗎？（Ex：學校全球網，於同網域下之各系所 & 政府機關，於同網域下之各所屬子網站。）

諮詢服務專線 客服信箱：webguide@hyweb.com.tw 1. 04-27064012 2. 04-27063968#4320 3. 04-27063968#4323 客服信箱：webguide@hyweb.com.tw

簡報完畢 敬請指教 62