無障礙網(wǎng)頁(yè)教育訓(xùn)練大綱無障網(wǎng)頁(yè)規(guī)範(fàn)開發(fā)規(guī)範(fàn)標(biāo)章定義檢測(cè)碼格式檢測(cè)狀態(tài)說明設(shè)計(jì)要點(diǎn)如何自行檢測(cè)檢測(cè)範(fàn)圍參考資料無障網(wǎng)頁(yè)規(guī)範(fàn)-開發(fā)規(guī)範(fàn)

為讓網(wǎng)頁(yè)設(shè)計(jì)人員在設(shè)計(jì)網(wǎng)頁(yè)時(shí)有所依據(jù)，訂定無障礙網(wǎng)頁(yè)開發(fā)規(guī)範(fàn)四項(xiàng)設(shè)計(jì)原則(第2頁(yè))三個(gè)優(yōu)先等級(jí)(第6項(xiàng))十四條規(guī)範(fàn)(第7頁(yè))九十條檢測(cè)碼(第15頁(yè))四項(xiàng)設(shè)計(jì)原則十四條規(guī)範(fàn)九十條檢測(cè)碼三個(gè)優(yōu)先等級(jí)無障網(wǎng)頁(yè)規(guī)範(fàn)-標(biāo)章定義

第1優(yōu)先等級(jí)(A)：為網(wǎng)站符合無障礙設(shè)計(jì)最基本的要求，以 標(biāo)章代表。

A+：除第1優(yōu)先等級(jí)外，增加三個(gè)便利使用者瀏覽網(wǎng)頁(yè)的功能，以 標(biāo)章代表。定位點(diǎn)(:::)搭配鍵盤快速鍵(Accesskey)網(wǎng)站導(dǎo)覽功能(Sitemap)

網(wǎng)頁(yè)瀏覽工具具有使用鍵盤設(shè)計(jì)，勿只設(shè)計(jì)僅能使用滑鼠點(diǎn)選無障網(wǎng)頁(yè)規(guī)範(fàn)-標(biāo)章定義(續(xù))

第2優(yōu)先等級(jí)(AA)：符合第1及第2優(yōu)先等級(jí)之無障礙設(shè)計(jì)規(guī)範(fàn)，以 標(biāo)章代表。

第3優(yōu)先等級(jí)(AAA)：符合第1、第2及第3優(yōu)先等級(jí)之無障礙設(shè)計(jì)規(guī)範(fàn)，以

標(biāo)章代表。無障網(wǎng)頁(yè)規(guī)範(fàn)-檢測(cè)碼格式檢測(cè)碼格式代表其相關(guān)之檢測(cè)資訊1.1：H101000圖片需要加上替代文字說明H

1

01

0

00網(wǎng)頁(yè)語言

(H：HTML

|

X：XML)規(guī)範(fàn)的流水號(hào)碼(00~99)檢測(cè)狀態(tài)(0

|

1

|

2)十四條規(guī)範(fàn)(01~14)優(yōu)先等級(jí)(1

|

2

|

3)無障網(wǎng)頁(yè)規(guī)範(fàn)-檢測(cè)狀態(tài)說明0：機(jī)器辨識(shí)/機(jī)器檢測(cè)可透過檢測(cè)工具辨識(shí)、檢測(cè)。1：機(jī)器辨識(shí)/人工檢測(cè)

可透過檢測(cè)工具辨識(shí)，但還需由人工的方式去檢測(cè)是否符合規(guī)範(fàn)。2：人工辨識(shí)/人工檢測(cè)完全需要人工的方式來辨識(shí)、檢測(cè)。需要人工檢測(cè)設(shè)計(jì)要點(diǎn)-替代文字

針對(duì)圖片、聲音、影像等提供聽覺及視覺的內(nèi)容要提供相等的替代文字內(nèi)容。

主要目的為提供在無法以聽覺或視覺來接收資訊時(shí)可以了解內(nèi)容之替代方案，可彈性選擇處理方式。設(shè)計(jì)要點(diǎn)-替代文字(圖片1/6)

非裝飾用的網(wǎng)頁(yè)圖示，應(yīng)提供正確的替代文字說明。

當(dāng)圖片無法顯示或使用文字、語音瀏覽器時(shí)才有作用。使用alt屬性來指定：<img

src="xxxx.png"

alt="替代文字"/>設(shè)計(jì)要點(diǎn)-替代文字(圖片2/6)設(shè)計(jì)要點(diǎn)-替代文字(圖片3/6)裝飾用圖示(如清單圖示、邊框等)使用”*”或“”代替。<img

src="icon.gif"

alt="*"

/><img

src="icon.gif"

alt=""

/>

建議使用正確之清單標(biāo)籤(UL)配合CSS來指定清單圖示或設(shè)為背景圖示，簡(jiǎn)化設(shè)計(jì)。設(shè)計(jì)要點(diǎn)-替代文字(圖片4/6)範(fàn)例檔案(HTML)範(fàn)例檔案(CSS)設(shè)計(jì)要點(diǎn)-替代文字(圖片5/6)

資訊型圖片(組織圖、位置圖、流程圖等)應(yīng)額外提供詳細(xì)文字說明。

無法充分表達(dá)資訊型圖片內(nèi)容時(shí)，在網(wǎng)頁(yè)上再額外說明。仍需使用alt標(biāo)籤。設(shè)計(jì)要點(diǎn)-替代文字(圖片6/6)提供資訊型圖片的內(nèi)容敘述文字設(shè)計(jì)要點(diǎn)-不要單獨(dú)靠色彩來提供特殊資訊

避免只使用色彩差異來顯示資訊的不同，對(duì)於視障者或黑白螢?zāi)皇褂谜邅碚f，無

法辯讀藉由顏色所傳達(dá)的正確訊息。

應(yīng)確保除色彩外，尚有其餘形式可以了解提供的資訊。設(shè)計(jì)要點(diǎn)-不要單獨(dú)靠色彩來提供特殊資訊視障者或黑白螢?zāi)皇褂谜咭话闶褂谜咭坏珶o法顯示色彩，使用者便無法理解資訊(範(fàn)例)無法顯示色彩時(shí)，仍可藉由文字內(nèi)容理解提供之資訊(範(fàn)例)設(shè)計(jì)要點(diǎn)-表格處理 對(duì)於每一個(gè)存放資料的表格（不是用來排版），標(biāo)示出行和列的標(biāo)題。

使用正確的<th></th>標(biāo)籤來設(shè)置表格的標(biāo)題(該標(biāo)籤的原始用途)。

除有助於理解該欄位為標(biāo)題外，亦有助於簡(jiǎn)化頁(yè)面之樣式設(shè)計(jì)。設(shè)計(jì)要點(diǎn)-表格處理(範(fàn)例)設(shè)計(jì)要點(diǎn)-表格處理

表格中超過二行/列以上的標(biāo)題，須以結(jié)構(gòu)化的標(biāo)記確認(rèn)彼此間的結(jié)構(gòu)與關(guān)係。

使用axis屬性、headers屬性及id屬性來為表格中的資料確定之間的結(jié)構(gòu)與關(guān)係。axis：欄位內(nèi)容的分類名稱headers：設(shè)定與欄位相關(guān)標(biāo)題關(guān)聯(lián)設(shè)計(jì)要點(diǎn)-表格處理a4a6a8a6,

a8,

a4(範(fàn)例)設(shè)計(jì)要點(diǎn)-定位點(diǎn)(:::)與快速鍵

定位點(diǎn)為使用連續(xù)三個(gè):號(hào)形成:::的連結(jié)有搜尋及定位的用途?？煽焖僖苿?dòng)至各主要區(qū)塊。

<a

accesskey="M"href="#"

title="區(qū)塊名稱

">:::</a>

當(dāng)使用者按下Alt+m(Firefox為Shift+Alt+m時(shí)，焦點(diǎn)會(huì)自動(dòng)跳到

accesskey="M"的位置。

可利用背景色或CSS將其隱藏，不影響網(wǎng)頁(yè)美工，仍保有定位點(diǎn)功能。設(shè)計(jì)要點(diǎn)-定位點(diǎn)(:::)與快速鍵設(shè)計(jì)要點(diǎn)-網(wǎng)站導(dǎo)覽提供使用者能夠快速了解網(wǎng)站之架構(gòu)。

對(duì)於僅能用鍵盤操作或非視覺瀏覽器使用者提供快速存取頁(yè)面之管道。

應(yīng)置於首頁(yè)，且在鍵盤移動(dòng)能於三個(gè)游標(biāo)內(nèi)能到達(dá)。以編號(hào)方式清楚呈現(xiàn)標(biāo)題層次。內(nèi)容包含定位點(diǎn)與快速鍵之說明。設(shè)計(jì)要點(diǎn)-網(wǎng)站導(dǎo)覽12345678910定位點(diǎn)與快速鍵之說明以列表及編號(hào)之方式列出此頁(yè)面架構(gòu)設(shè)計(jì)要點(diǎn)-提供滑鼠與鍵盤皆可操作之介面

網(wǎng)頁(yè)瀏覽功能應(yīng)同時(shí)提供滑鼠與鍵盤同時(shí)可操控的介面。避免當(dāng)於無滑鼠之使用環(huán)境下無法使用。對(duì)應(yīng)之事件：

onmouseover(滑鼠移至此標(biāo)籤上方時(shí))=>

onfocus(游標(biāo)移至此標(biāo)籤時(shí))

onmouseout(滑鼠離開此標(biāo)籤上方時(shí))=>

onblur(游標(biāo)離開此標(biāo)籤時(shí))通常將進(jìn)行之動(dòng)作複製至對(duì)應(yīng)的標(biāo)籤即可。設(shè)計(jì)要點(diǎn)-提供滑鼠與鍵盤皆可操作之介面將對(duì)應(yīng)的事件內(nèi)容複製(範(fàn)例)設(shè)計(jì)要點(diǎn)-確保去除CSS時(shí)仍能閱讀內(nèi)容

採(cǎi)用CSS進(jìn)行網(wǎng)頁(yè)排版及美工設(shè)計(jì)時(shí)，需確定無法呈現(xiàn)CSS樣式時(shí)，仍能正確的呈現(xiàn)欲呈現(xiàn)之資訊。

正確的使用HTML標(biāo)籤，在CSS無作用時(shí)仍具有原始樣式。如：<h1></h1>、<ul><li></li></ul>

版面配置時(shí)各區(qū)塊HTML內(nèi)容之放置應(yīng)儘量依呈現(xiàn)的順序(由上至下，由左至右)放置。設(shè)計(jì)要點(diǎn)-確保去除CSS時(shí)仍能閱讀內(nèi)容設(shè)計(jì)要點(diǎn)-Javascript之處理

當(dāng)使用Javascript時(shí)，需同時(shí)設(shè)置當(dāng)不支援Javascript的替代方案。使用<noscript></noscript>來放置替代方案

以能正確傳達(dá)原先欲傳達(dá)之資訊為目的，?無規(guī)定替代方案之方式。若不會(huì)影響資訊的呈現(xiàn)，則加註說明即可。設(shè)計(jì)要點(diǎn)-Javascript之處理設(shè)計(jì)要點(diǎn)-定義每個(gè)頁(yè)框的名稱

在框架中定義名稱，便於使用者快速了解框架內(nèi)容。使用title屬性。如何自行檢測(cè)

先閱讀90條檢測(cè)碼中，屬於A+等級(jí)之部分。H1XXXXX：全部第一優(yōu)先等級(jí)

H309204：對(duì)經(jīng)常使用的超連結(jié)，增加快速鍵的操作

H213205：為你的網(wǎng)站提供網(wǎng)站地圖或整體性的簡(jiǎn)介

H209002：確保事件的啟發(fā)不要求一定得使用滑鼠如何自行檢測(cè)使用FreeGo軟體檢測(cè)目前版本：3.1.1

下載：

.tw/wSite/ct?

tem=1087&ctNode=239將其解壓縮後，直接執(zhí)行FreeGo.exe即可。預(yù)設(shè)等級(jí)即為A+。如何自行檢測(cè)欲檢測(cè)之網(wǎng)址 開始進(jìn)行檢測(cè)如何自行檢測(cè)若全數(shù)通過機(jī)器檢測(cè)則會(huì)浮起通過機(jī)器檢測(cè)與否機(jī)器檢測(cè)不通過/待人工檢測(cè)項(xiàng)目數(shù)檢測(cè)之網(wǎng)址如何自行檢測(cè)點(diǎn)選未通過之頁(yè)面檢視單頁(yè)檢測(cè)報(bào)告未通過機(jī)器檢測(cè)的檢測(cè)碼、數(shù)量及在HTML中的行數(shù)點(diǎn)選項(xiàng)目名稱顯示範(fàn)例及說明點(diǎn)選行號(hào)則跳至該行HTML原始碼需人工檢測(cè)的檢測(cè)碼、數(shù)量及在HTML中的行數(shù)如何自行檢測(cè)全網(wǎng)站檢測(cè)報(bào)告全站的人工檢測(cè)項(xiàng)目及數(shù)量點(diǎn)選後列出含本項(xiàng)目的全部頁(yè)面點(diǎn)選頁(yè)面後開啟該頁(yè)檢測(cè)報(bào)告檢測(cè)範(fàn)圍如何判定檢測(cè)範(fàn)圍網(wǎng)址前半段與登錄網(wǎng)址一樣的才須檢測(cè)如登錄網(wǎng)址為.tw/秘需檢測(cè).tw/秘書室/emp.html.tw/秘書室/企劃組/inde不