
5c5ff5647aee0e830cba278571aed4fe.ppt
- Количество слайдов: 76
修平技術學院 無障礙網頁 暨 雙語網頁 推行計劃 2007/8 版 電算中心 系統組發展組 蔡京甫
Outline • • 什麼是無障礙網頁 為什麼需要無障礙網頁規範 設計要點 如何自行檢測 電算中心提供的範本 參考資料 2
什麼是無障礙網頁 3
什麼是無障礙網頁 • Web Content Accessibility • 符合某些特定規範所製作出來的網頁 – WCAG • W 3 C協會底下的WAI組織所訂定的一個國際性的無 障礙網頁規範 – 無障礙網頁開發規範 • 行政院研考會所訂立的規範 4
什麼是無障礙網頁 • 回歸HTML tag的標準以及原始意義 • 特殊族群的人可以順利透過輔助器具閱讀網 頁 – 視覺障礙(包括全盲、色盲、弱視等) – 聽覺障礙(全聾或是重聽) – 行動或有認知障礙、對閱讀或是文字理解有困 難的人。 5
什麼是無障礙網頁 文字介面瀏覽器 Lynx 6
什麼是無障礙網頁 • 簡而言之 – 製作出符合W 3 C標準以及其他特定規範的 HTML網頁。 無障礙規範 – 使各種閱讀Web的軟體或機器都可以無誤的呈 現資訊。 – 並且身心障礙者可以透過輔助器具順利瀏覽網 頁內容。 7
為什麼需要無障礙網頁 8
為什麼需要無障礙網頁 • 行政院研究發展考核委員會 • 雙語化環境暨無障礙網頁 – 教育部 95/2/24台電字第 0950024989號書函 • 本校升格科大的評鑑項目之一 9
無障礙網頁規範 10
無障礙網頁規範 • 無障礙網頁開發規範 – 四項原則 (概念與原則) – 十四條規範 – 九十條相關的檢測要點 四項原則 十四條規範 縱合 • 你的網頁符合哪一等級? 九十條檢測要點 – 三個優先等級 11
無障礙網站的分級 • 第 1優先等級 A – 第 1優先等級 + 三個功能 = A+ • 第 2 優先等級 AA • 第 3 優先等級 AAA 12
無障礙網頁規範 • 與國外規範的差異 WCAG 1. 0 研考會 無障礙網頁開發規範 優先等級 三個優先等級 規範條文 十四條規範 規範細節 六十五個檢測點 九十個檢測碼 檢測方式 人 /機器檢測 檢測等級 三個檢測等級 認證標章 三個認證標章 13
九十條相關的檢測要點 • 九十條要點編號方式 例如:要使用相對尺寸(如%)而非絕對尺寸(如像素) 網頁語言 H, X, S H 2 03 0 04 優先等級 1, 2, 3 14條規範 01~14 檢測狀態 0:機器辨識 / 機器檢測 1:機器辨識 / 人 檢測 2:人 辨識 /人 檢測 ※ 請務必自行閱讀官方(研考會)文件後再製作網頁 流水號 00~99 辨識:是否存在 檢測:是否錯誤 14
檢測範圍重點摘要 15
檢測要點 • 檢測要點可以於以下網址下載: http: //enable. nat. gov. tw/doc 2. jsp 16
檢測範圍重點摘要 • 共有90條規範 – 請全部瀏覽過一次,讓心理有個底 • 製作時常遇到的問題 – – – – 字型類 圖片類 表格類 連結類 導盲磚 網站導覽 其它 17
字型 (1/2) • 改變字型大小勿用絕對大小 – 但是可以用CSS來設定絕對大小 • 請用相對數字來改變字體大小 絕對 <font size=“ 5”>測試</font> 相對 <font size=“+2”>測試</font> 18
字型 (2/2) 2. 輸入相對數字 +1, +2, -1, -2… 都可以 3. HTML部份會變成相對大小 1. 先用滑鼠選取 19
圖片 (1/8) • 勿用(盡量避免? )動態GIF – 網頁使用動態gif圖片,容易產生反效果 – 忽略難以察覺 – 分心而無法閱讀其他的網頁內容 – 剌激心臟病及氣喘等患者 – 造成視覺上的不適 20
圖片 (2/8) • 圖片請加上alt 敘述 – alt為圖片的替代文字 – 有意義的替代文字 – 無意義的裝飾性圖示以alt=“”標示 – 條列式小圖示的alt可採用“*” – 用CSS改善項目符號 21
圖片 (3/8) • 圖片請加上alt敘述 圖片加上 alt 後的效果,會有黃色文字方塊顯示 22
圖片 (4/8) 圖片上按右鍵 圖片內容 23
圖片 (5/8) • 無意義的裝飾性圖示以alt=“”標示 無意義的裝飾性圖示以 alt=“” 標示 (空字串) 24
圖片 (6/8) 條列式小圖示的alt可採用“*” 25
圖片 (7/8) 圖片內的文字再以真正的文字簡述 26
圖片 (8/8) 圖片內的文字再以真正的文字簡述 27
表格 (1/6) • 為了讓視覺障礙者可清晰理解表格資訊 – 必需標明表格行和列的標題 – 結構化的標記彼此的關係 5. 1: H 105100 對於每一個存放資料的表格『不是用來排版』,標示出行和列的標題 (th) 5. 2: H 105101 表格中超過二行/列以上的標題,須以結構化標記確認彼此間的結構與關係 窒礙難行的規範 5. 5: H 305004 表格須提供表格摘要說明 (summary) 5. 6: H 305105 資料表格須提供標題說明 (caption) 28
表格 (2/6) • 表格的用途 – 資料格式化呈現 • 例如:代理人名冊,電話表… – 排版 • 以表格來固定版面配置 • 將表格的框線設為 ” 0” • 表格寬與高請用相對尺寸 • 必要用到絕對尺寸的時候,請用CSS替代 29
表格 (3/6) • 所有表格 – 請加上summary – 因相關輔具能夠讀取summary資訊,使用輔具之 瀏覽者可事先得知表格內的資料種類,增加閱讀 網頁便利性 – 排版表格的summary可用”版型表格”或”*”表示 <table width=“ 100%” summary=“文字敘述"> 30
表格 (4/6) • 非排版用表格(資料表格) – 請加上標題CAPTION – 提供瀏覽者在未閱讀表格資料前了解表格提供的 資訊主題 <table width=“ 100%” summary=“文字敘述”> <caption>業務執掌一覽表</caption> 31
表格 (5/6) <table border="1" summary="好友通訊錄"> 題 表格標 <caption>通訊錄</caption> <tr> 題 表格行列標 <th> 姓名 </th> <th> 電話 </th> <th> 性別 </th> </tr> <td>王阿華</td> <td>255 -6698</td> <td>男</td> </tr> ………. . </table> 32
表格 (6/6) a 4 a 6 a 8 a 6, a 8, a 4 33
連結 (1/4) • 為每一個連結加上 title 敘述 <a href = “http: //www. hit. edu. tw/Mediamain. jsp? pagenm=1” title=“修平技術學院 - 媒體報導”>媒體</a> 游標停在上方會有黃色提示方塊 34
連結 (2/4) 35
連結 (3/4) • 不要以空白來分隔連結 最新消息 組織架構 與我們連絡 最新消息 | 組織架構 | 與我們連絡 • 連結點下後開會新視窗,要事先提醒使用者(以alt 提示亦可) • 相關資源連結圖示未提供”開啟新視窗” 說明,容 易造成使用者不清楚資訊在那個網頁中 最新消息 [會開啟新視窗] 36
連結 (4/4) 37
導盲磚/定位點 (1/2) • 導盲磚(accesskey) “: : : ” • 用途:定位及搜尋 • 優點: – 快速跳躍至不同區塊,也可以避免使用者在網 頁中迷失 。 – 方便使用者在各框架(frame)之間快速移動與搜 尋網頁內容。 – 可以導引使用者依自己的需要,跳至所需的區 塊中,閱讀自己想要的內容。 38
導盲磚/定位點 (2/2) <a accesskey="M" href="#" title="導覽連結區">: : : </a> • 當使用者按下alt + m 時,焦點會自動跳到預設 Accesskey = “M”的位置 • 設計隱藏式定位點 – 不影響網頁美觀 – 保有定位點之功能 : : : T M 抬頭 : : : C 選 單 B 內文 : : : 版權宣告 39
網站導覽 (1/2) • 提供整個網站簡介與層次架構,降低瀏覽者 ”迷路”的機率 • 能清楚的呈現出整個網站的層次架構 • 提昇網站的親和力及可及性 – 瀏覽者可利用網站導覽地圖的鏈結功能,快速 進入所需的網頁 • 網站地圖常與Accesskey操作說明放在一起 40
網站導覽 (2/2) 導盲磚的 Access. Key 說明 請列上階層編號 此網站的編排架構 (列出大標題即可) 41
其它 - 表單 • H 310004 在網頁文字輸入區中須有預設值 (密碼 欄位除外) 42
其他 • 文字顏色與背景對比要明顯 • 別用Frontpage的縮排<blockquote>功能 ? ? 43
其他 • 每個網頁都需加上標題(title) 44
其他 • 避免使用: ) ^____^ 類似的表情圖示 • 每個網頁HTML原始碼中的<HTML> 要加上 lang=“zh-TW”或其他對等的語言標記。(英文為en) <HTML lang=“zh-TW”> 或 <HTML lang=“en”> • 每個網頁(HTML原始碼)的最上方加上 <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> 45
其他 • 動態Java. Script / Applet 選單以及其他動 態效果少用,若要使用請確保以鍵盤亦能 操作。 • 若有用到Java. Script,請以 <noscript></noscript>提供無支援 Javs. Script的瀏覽器可以使用的解決方案 46
其他 – 發佈檔案 • 可不可以發布Word、Excel或PDF檔案? – H 311203 允許使用者依照個人喜好設定網頁呈現方 式與內容」建議各網站在提供下載時可以提供兩種以 上方式,讓使用者可選擇,以滿足各方式不同使用者。 (請提供 2種以上,以符合AAA規範) 47
其他 – 發佈檔案 • 哪些文件可以轉換成PDF – 只要可以被列印出來的文件都可以 • 如何轉換PDF格式 – 商業軟體: Acrobat Professional – 免費軟體: PDFCreator • 窒礙難行之處 – 加密過後的檔案、會計報表… – 我的文件只有PDF格式該怎麼辦? • 轉換成 Post. Script (PS) • PS為類似PDF的另一種檔案 • 產生方式與PDF相同 48
如何自行檢測 49
如何自行檢測 • 以Free. Go軟體檢查 – 下載: http: //enable. nat. gov. tw/download_tool. jsp – 目前版本 v 2. 2. 0 (2006/9/29) – 使用前請先安裝Java Runtime Environment – 下載: http: //www. java. com/zh_TW/download/index. jsp – 解壓縮後直接執行Free. Go • 以 瀏覽器toolbar檢測 具 檢測 – 下載 http: //enable. nat. gov. tw/download. jsp 50
如何自行檢測 • 設定 請切換到AAA等級 51
如何自行檢測 1. 輸入網址 2. 按下開始 52
0/5 此網頁於第一優先(A)標準下,機器檢測 0個不合格,尚有5個需要人 檢測。 如何自行檢測 機器初步檢測結果(並不代表已 經通過,還需人 檢測) NO: 沒通過 YES: 通過 0/5 此網頁於第二優先(AA)標準下,機器檢 測 0個不合格,尚有5個需要人 檢測。 0/5 此網頁於第三優先(AAA)標準下,機器檢 測 2個不合格,尚有3個需要人 檢測。 53
如何自行檢測 1. 輸入網址 亦可直接點選自己本機電腦的HTML檔案 2. 按下開始 54
如何自行檢測 點選某要檢視的網頁 55
學校網頁範本 56
水平選單 57
垂直選單 58
電算中心提供的範本 • 請以空的樣本(template_empty. html)開始編 輯,後另存新檔為目的檔案(如:news. html) • 下載網址 http: //entry. hit. edu. tw/~marty/accessibility 59
電算中心提供的範本 – 特 點 • 均已符合AAA規範 (後續網頁內容請自行維護) • 均已CSS(style. css)將顏色以及排版抽離,更換風 格只需更換style. css檔案 • 以iframe設計,上方橫福 + 左側選單 + 下方版權 宣告,均為獨立檔案,與各頁面共享 • 上方logo與橫幅圖片獨立為檔案,與各頁面共享 • 網頁內容直接打在content區域即可 • 以Front. Page 2003以及Dreamweaver均可編輯 • IE 6與Fire. Fox均可順利瀏覽 60
垂直選單結構 sidebar_menu. html header iframe 高 度 隨 內 容 變 動 175 px header. html 高 度 隨 內 容 變 動 sidebar menu iframe copyright iframe 61 980 px copyright. html
水平選單結構 header iframe 182 px header. html 高 度 隨 內 容 變 動 copyright iframe 980 px copyright. html 62
header 頁面結構 logo. jpg 300 x 100 pixel logo_banner. jpg 678 x 150 pixel 更換圖片,請直接更換 logo. jpg 以及 logo_banner. jpg 63
Access. Key 配置 : : : M : : : T : : : 內文 : : : 版權宣告 垂直選單 B M : : : C T : : : 抬頭 選 單 B : : : C : : : 抬頭 選單 內文 版權宣告 水平選單 64
範本必要改的項目 單位頭銜 (包含HTML中的title標籤) sitemap 選單 E-mail以及維護人 (請確實修改連結部份) 65
通過檢測之後 - step 1 1. 加上驗證標章 http: //enable. nat. gov. tw/valid. jsp? category=20041101094706 66
通過檢測之後 - step 2 1. 加上驗證標章 改成你的ID <a href="http: //enable. nat. gov. tw/valid. jsp? category=20041101094706" title="無障礙網站"> <img src= "aaa. jpg" alt="通過第 3優先等級無障礙網頁檢測“ border="0" width="88" height="31"/> </a> 67
通過檢測之後 - step 3 2. 於每一頁HTML加上metadata <meta name="Accessible_website" content="本網站通過第 3優先等級無障礙網頁檢測"> Tips:打開網頁編輯,檢視HTML碼, 在最上方找尋到<meta…>標記,於任 一個meta標記下插入此行即可 參考網址:http: //enable. nat. gov. tw/iconrule. jsp 68
檢查網頁的 登記/維護 狀態 • 修平的登錄窗口 – http: //enable. nat. gov. tw/emblem_list. j sp? Item_no=0&kind=search&txt. Key. Word=修 平&sel. Item=sitename&To. Page=1 • 需要重新申請的有 – 體育室、化生系、軍訓室、進修學院 • 請各單位查看所屬網頁,並做適當的修正。 69
FAQ • 如何判定檢測範圍 • 網址前半段與登錄網址一樣的才須檢測 – 如果登錄網址為 http: //staff. hit. edu. tw/rd/ – 需檢測 • http: //staff. hit. edu. tw/rd/sitemap. html • http: //staff. hit. edu. tw/rd/research/post. html – 不須檢測 • http: //staff. hit. edu. tw/會計室/news. html • http: //www. hit. edu. tw/sundries. jsp • http: //www. yahoo. com. tw/ 70
FAQ • 各單位的會議紀錄 – 強烈建議改用Word與PDF發布 • 複雜的表格 – 強烈建議改用Word/Excel與PDF發布 • 絕對不要 !!! – 直接把Word、Excel的內容另存新檔為HTML – 直接從Word、Excel的內容複製貼上到Frontpage上面 – 複製貼上請改為:如 Word Frontpage 編輯 選 擇性貼上 • Free. Go 自動修復的功能 – 此修復會有誤判情形,不過可以參考。 71
FAQ • Flash可不可以用? – 絕對可以,但請提供當瀏覽器無支援Flash時的 解決方案 – 以Flash做圖片輪撥 • 加上註解,例如:修平技術學院歡迎動畫 – 以Flash製做的選單 • 請加上HTML連結方案 72
FAQ • 網頁出現一片空白? • 以下條件全部符合即會產生此問題: – IE強制編碼方式以網頁指定編碼方式不一樣 – HTML中,charset meta不在head block的第一行 • 此為IE的特有現象(bug? ),Fire. Fox或其他 瀏覽器顯示則正常。 請把編碼選擇自動選取 73
FAQ header區塊 • 如何徹底解決「網頁出現一片空白」 設定編碼的meta tag請放置在head block的第一行 74
他人的檢舉 75
參考資料 • 考委會無障礙網頁網站 http: //enable. nat. gov. tw • 張貼無障礙網頁標章及抽檢流程 http: //enable. nat. gov. tw/procedure. jsp • 九十條檢測碼 http: //enable. nat. gov. tw/doc 2. jsp • 其他相關資源 http: //enable. nat. gov. tw/download. jsp 76
5c5ff5647aee0e830cba278571aed4fe.ppt