无障碍网页设计规范 教程

1、修 平 技 術 學 院電算中心系統組發展組 蔡京甫無障礙網頁 暨 雙語網頁 推行計劃2007/8 版12Outline什麼是無障礙網頁為什麼需要無障礙網頁無障礙網頁規範設計要點如何自行檢測電算中心提供的範本參考資料3什麼是無障礙網頁4什麼是無障礙網頁Web Content Accessibility符合某些特定規範所製作出來的網頁WCAGW3C協會底下的WAI組織所訂定的一個國際性的無障礙網頁規範無障礙網頁開發規範行政院研考會所訂立的規範5什麼是無障礙網頁回歸HTML tag的標準以及原始意義特殊族群的人可以順利透過輔助器具閱讀網頁視覺障礙（包括全盲、色盲、弱視等）聽覺障礙（全聾或是重聽）行動

2、或有認知障礙、對閱讀或是文字理解有困難的人。6什麼是無障礙網頁文字介面瀏覽器 Lynx7什麼是無障礙網頁簡而言之製作出符合W3C標準以及其他特定規範的HTML網頁。使各種閱讀Web的軟體或機器都可以無誤的呈現資訊。並且身心障礙者可以透過輔助器具順利瀏覽網頁內容。無障礙規範8為什麼需要無障礙網頁9為什麼需要無障礙網頁行政院研究發展考核委員會雙語化環境暨無障礙網頁教育部95/2/24台電字第0950024989號書函本校升格科大的評鑑項目之一10無障礙網頁規範11無障礙網頁規範無障礙網頁開發規範四項原則 (概念與原則)十四條規範九十條相關的檢測要點你的網頁符合哪一等級？三個優先等級四項原則十四條規

3、範九十條檢測要點縱合12無障礙網站的分級第1優先等級 A第1優先等級 + 三個功能 = A+第2 優先等級 AA第3 優先等級 AAA13無障礙網頁規範與國外規範的差異WCAG 1.0研考會無障礙網頁開發規範優先等級三個優先等級三個優先等級規範條文十四條規範十四條規範規範細節六十五個檢測點 九十個檢測碼檢測方式人工/機器檢測人工/機器檢測檢測等級三個檢測等級三個檢測等級認證標章三個認證標章三個認證標章14九十條相關的檢測要點九十條要點編號方式H 2 03 0 04網頁語言H, X, S優先等級1, 2, 314條規範0114流水號0099例如：要使用相對尺寸(如%)而非絕對尺寸(如像素) 檢測

4、狀態0：機器辨識 / 機器檢測1：機器辨識 / 人工檢測2：人工辨識 /人工檢測 請務必自行閱讀官方(研考會)文件後再製作網頁辨識：是否存在檢測：是否錯誤15檢測範圍重點摘要16檢測要點檢測要點可以於以下網址下載：17檢測範圍重點摘要共有90條規範請全部瀏覽過一次，讓心理有個底製作時常遇到的問題字型類圖片類表格類連結類導盲磚網站導覽其它18字型 (1/2)改變字型大小勿用絕對大小但是可以用CSS來設定絕對大小請用相對數字來改變字體大小測試測試絕對相對19字型 (2/2)1. 先用滑鼠選取2. 輸入相對數字 +1, +2, -1, -2 都可以3. HTML部份會變成相對大小20圖片 (1/7)

5、勿用(盡量避免?)動態GIF圖片請加上alt 敘述alt為圖片的替代文字有意義的替代文字無意義的裝飾性圖示以alt=“”標示條列式小圖示的alt可採用“*”用CSS改善項目符號21圖片 (2/7)圖片請加上alt敘述圖片加上 alt 後的效果，會有黃色文字方塊顯示22圖片 (3/7)圖片上按右鍵 圖片內容23圖片 (4/7)無意義的裝飾性圖示以alt=“”標示無意義的裝飾性圖示以 alt=“” 標示(空字串)24圖片 (5/7)條列式小圖示的alt可採用“*”25圖片 (6/7)圖片內的文字再以真正的文字簡述26圖片 (7/7)圖片內的文字再以真正的文字簡述27表格 (1/5)為了讓視覺障礙者

6、可清晰理解表格資訊必需標明表格行和列的標題結構化的標記彼此的關係5.1: H105100 對於每一個存放資料的表格不是用來排版，標示出行和列的標題 (th) 5.2: H105101 表格中超過二行/列以上的標題，須以結構化標記確認彼此間的結構與關係 窒礙難行的規範 5.5: H305004 表格須提供表格摘要說明 (summary)5.6: H305105 資料表格須提供標題說明 (caption)28表格 (2/5)表格的用途資料格式化呈現例如：代理人名冊，電話表排版以表格來固定版面配置將表格的框線設為 ”0”表格寬與高請用相對尺寸必要用到絕對尺寸的時候，請用CSS替代29表格 (3/5)

7、所有表格請加上summary非排版用表格(資料表格)請加上標題CAPTION請明顯標示欄與列標題業務執掌一覽表30表格 (4/5)通訊錄 姓名 電話 性別 王阿華255-6698男.表格標題表格行列標題31表格 (5/5)a4a8a6a6, a8, a432連結 (1/4)為每一個連結加上 title 敘述媒體游標停在上方會有黃色提示方塊33連結 (2/4)34連結 (3/4)不要以空白來分隔連結連結點下後開會新視窗，要事先提醒使用者(以alt提示亦可)最新消息 組織架構 與我們連絡最新消息 | 組織架構 | 與我們連絡最新消息 會開啟新視窗 35連結 (4/4)36導盲磚 (1/2)導盲磚(

8、accesskey) “:”用途：定位及搜尋優點：快速跳躍至不同區塊，也可以避免使用者在網頁中迷失 。方便使用者在各框架(frame)之間快速移動與搜尋網頁內容。可以導引使用者依自己的需要，跳至所需的區塊中，閱讀自己想要的內容。 37導盲磚 (2/2)當使用者按下alt + m 時，焦點會自動跳到預設Accesskey = “M”的位置:選單抬頭內文:MTCB版權宣告:38網站導覽 (1/2)為增加網站使用度及可及性，網站應提供網站地圖及網站簡介。能清楚的呈現出整個網站的層次架構網站地圖常與Accesskey操作說明放在一起39網站導覽 (2/2)導盲磚的 AccessKey 說明此網站的編排

9、架構 (列出大標題即可)請列上階層編號40其它 - 表單H310004 在網頁文字輸入區中須有預設值 (密碼欄位除外)41其他文字顏色與背景對比要明顯別用Frontpage的縮排功能 ?42其他每個網頁都需加上標題(title)43其他避免使用:) _ 類似的表情圖示每個網頁HTML原始碼中的 要加上 lang=“zh-TW”或其他對等的語言標記。(英文為en)每個網頁(HTML原始碼)的最上方加上 或 44其他動態JavaScript / Applet 選單以及其他動態效果少用，若要使用請確保以鍵盤亦能操作。若有用到JavaScript，請以提供無支援JavsScript的瀏覽器可以使用的解

10、決方案45其他 發佈檔案可不可以發布Word、Excel或PDF檔案？H311203 允許使用者依照個人喜好設定網頁呈現方式與內容建議各網站在提供下載時可以提供兩種以上方式，讓使用者可選擇，以滿足各方式不同使用者。(請提供2種以上，以符合AAA規範)46其他 發佈檔案哪些文件可以轉換成PDF只要可以被列印出來的文件都可以如何轉換PDF格式商業軟體: Acrobat Professional免費軟體: PDFCreator窒礙難行之處 加密過後的檔案、會計報表我的文件只有PDF格式該怎麼辦？轉換成 PostScript (PS)PS為類似PDF的另一種檔案產生方式與PDF相同47如何自行檢測48

11、如何自行檢測以FreeGo軟體檢查下載: 目前版本 v 2.2.0 (2006/9/29)使用前請先安裝Java Runtime Environment下載: 解壓縮後直接執行FreeGo以 瀏覽器toolbar檢測工具 檢測下載 49如何自行檢測設定請切換到AAA等級50如何自行檢測1. 輸入網址2. 按下開始51如何自行檢測機器初步檢測結果(並不代表已經通過，還需人工檢測)NO: 沒通過YES: 通過0/5 此網頁於第一優先(A)標準下，機器檢測0個不合格，尚有5個需要人工檢測。0/5 此網頁於第二優先(AA)標準下，機器檢測0個不合格，尚有5個需要人工檢測。0/5 此網頁於第三優先(AA

12、A)標準下，機器檢測2個不合格，尚有3個需要人工檢測。52如何自行檢測2. 按下開始1. 輸入網址亦可直接點選自己本機電腦的HTML檔案53如何自行檢測點選某要檢視的網頁54學校網頁範本55水平選單56垂直選單57電算中心提供的範本請以空的樣本(template_empty.html)開始編輯，後另存新檔為目的檔案(如：news.html)下載網址 :/.tw/marty/accessibility58電算中心提供的範本 特點均已符合AAA規範 (後續網頁內容請自行維護)均已CSS(style.css)將顏色以及排版抽離，更換風格只需更換檔案以iframe設計，上方橫福 + 左側選單 + 下方

13、版權宣告，均為獨立檔案，與各頁面共享上方logo與橫幅圖片獨立為檔案，與各頁面共享網頁內容直接打在content區域即可以FrontPage 2003以及Dreamweaver均可編輯IE 6與FireFox均可順利瀏覽59垂直選單結構980px175px高度隨內容變動高度隨內容變動sidebar_menu.htmlheader.html copyright.htmlheader iframesidebarmenuiframecopyright iframe60水平選單結構980px182px高度隨內容變動header.htmlcopyright.htmlheader iframecopyri

14、ght iframe61header 頁面結構logo.jpg 300 x100 pixellogo_banner.jpg 678x150 pixel更換圖片，請直接更換 logo.jpg 以及 62AccessKey 配置選單抬頭內文:MTCB版權宣告:選單抬頭內文:MTCB版權宣告:垂直選單水平選單63範本必要改的項目E-mail以及維護人(請確實修改連結部份)選單單位頭銜(包含HTML中的title標籤)sitemap64通過檢測之後 - step 1加上驗證標章2004110109470665通過檢測之後 - step 2加上驗證標章改成你的ID66通過檢測之後 - step 32.

15、於每一頁HTML加上metadata參考網址： Tips：打開網頁編輯，檢視HTML碼，在最上方找尋到標記，於任一個meta標記下插入此行即可67檢查網頁的 登記/維護 狀態修平的登錄窗口修平&selItem=sitename&ToPage=1需要重新申請的有體育室、化生系、軍訓室、進修學院請各單位查看所屬網頁，並做適當的修正。68FAQ如何判定檢測範圍網址前半段與登錄網址一樣的才須檢測如果登錄網址為 需檢測不須檢測會計室69FAQ各單位的會議紀錄強烈建議改用Word與PDF發布複雜的表格強烈建議改用Word/Excel與PDF發布絕對不要 !直接把Word、Excel的內容另存新檔為HTML 直接從Word、Excel的內容複製貼上到Frontpage上面 複製貼上請改為：如 Word Frontpage 編輯 選擇性貼上FreeGo 自動修復的功能此修復會有錯誤，不過可以參考。70FAQFlash可不可以用？絕對可以，但請提供當瀏覽器無支援Flash時的解決方案以Flash做圖片輪撥加上註解，例如：修平技術學院歡迎動畫以Flash製做的選單請加上