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