無障礙網(wǎng)頁設(shè)計規(guī)范 教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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