1網韻資訊

網韻資訊股份有限公司校園首頁管理系統無障礙教育訓練

2網韻資訊

身心障礙者上網方式 視障朋友

只能藉由輔助工具來瀏覽網站無法操作滑鼠

耳語障礙無法了解網頁內的聲音資訊

肢障朋友可能無法操作滑鼠

3網韻資訊

人工檢測重點 A 、 A+

替代文字說明資料性表格設計 (th)多媒體無障礙作法定位點、網站導覽、鍵盤操作瀏覽網站 Flash 、 Applet 、 Script 替代方案

AA表格設計 (summary)新開視窗的超連結表單控制項網站的網頁標題，未隨網頁內容而變化

AAA資料性表格設計 (caption)檔案下載需提供兩種以上的格式可在所有瀏覽器上瀏覽 (IE,FireFox…)

4網韻資訊

圖片提供文字說明設計 裝飾用圖示 功能選單、項目圖型 標題圖型 組織架構圖

流程架構圖 位置圖 統計圖表

常見錯誤：組織架構圖、位置圖無詳細說明

5網韻資訊

裝飾用圖示及條列式圖示

條列式圖示，圖說用” *” 替代語法語法： <img src="icon.gif" alt= "*">

替代文字呈現

alt以”＊”替代

裝飾用圖示，圖說用空白替代語法： <img src="icon.gif" alt= " ">

6網韻資訊

廣告連結圖型建議寫法

以”連結”說明告知，並加上開啟新視窗說明 以”連結”告知圖示為一個連結他網的超連結用的圖示，並加上開啟新視窗說明，讓使用者瞭解資訊會在另一個新網頁中。語法：<img src=”icon.gif” alt=” 連結到我的 e 政府 ( 另開新視

窗 )”>替代文字呈現

清楚說明連結他網及開新頁面

7網韻資訊

組織架構圖、流程圖、交通圖 人工檢測重點項目 常犯錯誤

僅以視覺呈現圖說通常過於簡略，無法清楚表達。

8網韻資訊

組織圖常見問題

圖說僅以組織圖帶過 若只以簡單的文字來替代，在只顯示文字時是無法瞭解組織圖的內容語法：

<img border="0" src="klcg.gif" width="398" height="596" alt=" 組織圖 ">

替代文字呈現

僅以”組織圖”簡單說明

9網韻資訊

組織圖建議寫法一

圖片加上超鏈結方式，另開說明頁 利用「影像地圖」的功

能，將組織圖上的單位都給予一個連結，點選單位後，會連結到該單位的介紹頁面語法建議 :

<img border="0" src="klcg.gif" alt=" 組織圖 " usemap="#Map" ><map name="Map"><area shape="rect" coords="16,63,89,87" href="Item1-6-3.htm" alt=" 民政局 ">

除提供簡單的替代文字外，另提供連結，瀏覽者可直接連至介紹頁瞭解內容。

10網韻資訊

組織圖建議寫法 二

組織圖旁加上文字說明 除提供組織圖外，另提供

各單位介紹之純文字說明建議語法 :

<img border="0" src="../image/Item1/klcg.gif" alt=" 組織圖 ">

<p> 市長下設的部門：民政局、財政局、建設局、教育局、工務局、都市發展局、社會局、兵役局、地政局、行政室、研考室。 </p><p> 衛生局下設的部門：市立醫院、區衛生所、慢性病防治所 </p><p> 區公所下設的公所：中正區、信義區、仁愛區、中山區、安樂區、暖暖區、七堵區 </p>

將文字說明直接放至頁面上

11網韻資訊

流程圖常見問題

流程圖的圖說過於簡單 若只以簡單的文字來替代，在只顯示文字時是無法瞭解流程圖的內容圖片語法：

<img border="0" src="SARS-spec01.gif" alt=" 檢體處理流程圖 ">

僅以”檢體處理流程圖”簡單說明

替代文字呈現

12網韻資訊

流程圖建議寫法 一

流程圖旁加上文字說明 在流程圖下另加上文字說明，除圖片外也能依文字說明清楚瞭解流程圖內容。

資料來源：台南市警察局 www.tncpi.gov.tw/wanda/index2.asp?strurl=duty_3.htm

將文字說明直接放至頁面上

13網韻資訊

若陳述的文字過多，建議另提供文字連結，連至說明頁瞭解流程內容。

語法 :<img border="0" src="SARS-spec01.gif" alt=" 檢體處理流程圖 "><a href="1.htm"> 檢體處理說明 </a>

流程圖建議寫法 二

加上文字鏈結，另開說明頁

另加上文字連結，以連至說明頁瞭解流程。

14網韻資訊

位置圖建議寫法 一

加上文字鏈結，另開說明頁 若陳述的文字過多，建議另提供文字連結，連至說明頁瞭解位置圖內容。

以文字連結，告知可另開啟說明頁，瞭解位置圖說明。

資料來源：桃園市戶政事務所 http://www.taoyuan.gov.tw/Intro_02.aspx

15網韻資訊

位置圖建議寫法 二

在頁面上加上文字說明 可在位置圖附近加上路線、交通等說明。

在位置圖下加上說明

資料來源：高雄縣湖內鄉戶政事務所 http://163.29.105.99/intranet/rosseauism/hunei/chinese/about.htm

16網韻資訊

資訊型圖示表現建議寫法

圖片提供連結純文字說明頁 文章型圖片，可另提供純文字說明頁來表達清楚。

資料來源：綠色能源 -屏東縣環境保護局http://www.ptepb.gov.tw/kids/Green_1.html

其它示範範例：金門國家公園兒童版 http:// kmnp.gov.tw/kids/main.htm

將圖片加上連結，並於替代文字上說明可連至說明頁

17網韻資訊

影像地圖 對於每個連結區域 AREA 標籤提供替代文字說明

考慮提供影像地圖以外的可及性方式( 文字連結 )

18網韻資訊

影像地圖常見設計問題一

替代性文字說明不夠清楚

資料來源 :經濟部 (Ministry of Economic Affairs,R.O.C.)全球資訊網http://www.moea.gov.tw/

僅提供簡略的 "本部配置圖 " 無顯示機關位置文字說明。

19網韻資訊

影像地圖建議方式一AREA 標籤加上 alt 替代文字

資料來源 : 金門國家公園 http://guesthouse.kmnp.gov.tw/view/scenery_map.asp

area 標籤需加上 alt 替代文字說明，便利使用者操作。

20網韻資訊

影像地圖建議方式二

另提供純文字連結

資料來源 :嘉義縣政府圖書館服務網 -鄉鎮圖書館 http://www.cycab.gov.tw/library-1.asp

各圖書館的純文字連結

除了有 alt替代文字外，另加上純文字連結，對於無法顯示圖片時，瀏覽者可直接依文字連結進入

alt 替代文字

21網韻資訊

圖片替代文字設計總結 加上有意義的替代文字 條列式小圖示的 alt 可採用“ *” 無意義的裝飾性圖示以 alt=“” 標示 另加上文字說明頁的連結 在頁面上加上文字說明

22網韻資訊

修正方式一於網站內容管理，應詳細的描述圖片內容。

23網韻資訊

修正方式二

使用 HTML編輯器時，儲存後會進入無障礙轉換工具，如果出現如下方圖示，請於輸入框中，詳細填寫圖片的替代文字，如：一位小男孩正在拉小提琴。

24網韻資訊

修正方式三

如組織圖、流程圖、位置圖等，當替代文字超過 150個字元時，應另外於內文區加入詳細說明。

25網韻資訊

影音多媒體設計常見問題說明

影音媒體未提供內容說明 影音媒體未提供相對應文字旁白 影音媒體未提供操控介面 播放操作介面未提供鍵盤操作方式

26網韻資訊

影音多媒體設計替代方式建議三

提供語音相對應的文字說明 提供影片內容的文字說明鏈結

資料來源 :刑事警察局網站 http://www.cib.gov.tw/Media/Media_Short_Film.aspx

27網韻資訊

引用多媒體方式

5 點選自建內文

6 詳細輸入影片旁白

以影像新聞模版所為建置多媒體內容

2 點選新增項目

3 選擇影像消息樣版

1 進入網站功能架構管理介面

4 進入內容管理介面

28網韻資訊

定位點、網站導覽、鍵盤操作 為 A+ 人工檢測重點 網頁定位點 ( 導盲磚 :::)

由系統自動產出 網站導覽

架構由系統產出可由管理者設定顯示位置

以鍵盤操作網頁避免使用 javascript自我檢測 - 使用鍵盤不使用滑鼠來瀏覽網頁

29網韻資訊

網站導覽配置方式

1 展開系統設定管理

2 點選網站功能架構管理

3 點選顯現 4 按下確定鈕

1.登入管理員身份後，點選左方「系統設定管理」功能，於展開的內容中，點選「網站功能架構管理」

2.找到「網站導覽」功能，顯現狀態圈選為「顯現」，完成後按下「確定」鈕

在功能列加入網站導覽功能

30網韻資訊

Flash 、 Applet 、 Script

提供適當的說明 提供正確的替代方式

常見錯誤Flash 及 Script 無提供正確的

替代方式

31網韻資訊

影音多媒體設計替代方式建議四

提供額外的文字鏈結

除 Flash原有的按鈕外，另額外提供文字鏈結替代

若無法顯示 Flash 時，還可選擇連結進入

資料來源：中央氣象局兒童網　 http://www.cwb.gov.tw/V5/kids/swf/index.php

32網韻資訊

表格設計 資料 /排版用表格 表格行列標題 A 表格摘要屬性 AA 表格標題標籤 AAA

常見錯誤資料表格無提供表格行列標題及表格標題表格摘要與事實不符

33網韻資訊

以編輯器加入表格行列標頭

請按 進入 HTML模式編輯內容，將標題列由 <td>標籤修改為 <th>標籤

34網韻資訊

以編輯器加入表格標題及摘要說明

摘要說明 表格標題

35網韻資訊

表單控制項表單控制項使用 label標籤，且 for與 id相對應 ( 檢測碼12.6)

強烈不建議您自行建立任何表單於本系統中，當您使用表單控制項，卻沒有制訂堅固的後端防範機制時，可能會使您的網站產生漏洞，造成網站的不安全性，而駭客也可能因此取得網站機密資料。如果一定要自建表單時，請使用表單項目請使用 label標籤並加入屬性 for，控制項加入屬性 id，並確認 for與 id二者之間可正確的對應。

<label for=”search”> 搜尋 </label>

<input type=”text” id=”search” value=” 請輸入關鍵字” >

<select id=”edu”><option > 大學 </option><option selected> 大專 </option>…</select>

<label for=”edu”> 教育程度 </label>

36網韻資訊

結語 無障礙網頁就是

遵循國內的無障礙網頁規範。除了符合機器檢測，更要用心自我人工檢視注意網站親和性及便利性的操作功能。正確使用網頁技術（ HTML 、 CSS）多使用 Freego 檢測工具檢測網頁。

任何技術上或是規範上的問題請撥無障礙服務專線： (03)357-9080#215請上無障礙網路空間服務網

http://enable.nat.gov.tw