1 / 36

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

網韻資訊股份有限公司 校園首頁管理系統無障礙教育訓練. 身心障礙者上網方式. 視障朋友 只能藉由輔助工具來瀏覽網站 無法操作滑鼠 耳語障礙 無法了解網頁內的聲音資訊 肢障朋友 可能無法操作滑鼠. 人工檢測重點. A 、 A+ 替代文字說明 資料性表格設計 (th) 多媒體無障礙作法 定位點、網站導覽、鍵盤操作瀏覽網站 Flash 、 Applet 、 Script 替代方案 AA 表格設計 (summary) 新開視窗的超連結 表單控制項 網站的網頁標題，未隨網頁內容而變化 AAA 資料性表格設計 (caption)

whilemina-stevenson
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 身心障礙者上網方式 • 視障朋友 • 只能藉由輔助工具來瀏覽網站 • 無法操作滑鼠 • 耳語障礙 • 無法了解網頁內的聲音資訊 • 肢障朋友 • 可能無法操作滑鼠

  3. 人工檢測重點 • A、A+ • 替代文字說明 • 資料性表格設計(th) • 多媒體無障礙作法 • 定位點、網站導覽、鍵盤操作瀏覽網站 • Flash、Applet、Script替代方案 • AA • 表格設計(summary) • 新開視窗的超連結 • 表單控制項 • 網站的網頁標題，未隨網頁內容而變化 • AAA • 資料性表格設計(caption) • 檔案下載需提供兩種以上的格式 • 可在所有瀏覽器上瀏覽(IE,FireFox…)

  4. 圖片提供文字說明設計 • 裝飾用圖示 • 功能選單、項目圖型 • 標題圖型 • 組織架構圖 • 流程架構圖 • 位置圖 • 統計圖表 常見錯誤：組織架構圖、位置圖無詳細說明

  5. 裝飾用圖示及條列式圖示 • 裝飾用圖示，圖說用空白替代 • 語法：<img src="icon.gif" alt= " "> • 條列式圖示，圖說用”*”替代語法 • 語法：<img src="icon.gif" alt= "*"> 替代文字呈現 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替代文字 area標籤需加上alt替代文字說明，便利使用者操作。 資料來源: 金門國家公園 http://guesthouse.kmnp.gov.tw/view/scenery_map.asp

  20. 影像地圖建議方式二另提供純文字連結 • 除了有alt替代文字外，另加上純文字連結，對於無法顯示圖片時，瀏覽者可直接依文字連結進入 alt替代文字 各圖書館的純文字連結 資料來源:嘉義縣政府圖書館服務網-鄉鎮圖書館http://www.cycab.gov.tw/library-1.asp

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

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

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

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

  25. 影音多媒體設計常見問題說明 影音媒體未提供內容說明 影音媒體未提供相對應文字旁白 影音媒體未提供操控介面 播放操作介面未提供鍵盤操作方式

  26. 影音多媒體設計替代方式建議三提供語音相對應的文字說明影音多媒體設計替代方式建議三提供語音相對應的文字說明 提供影片內容的文字說明鏈結 資料來源:刑事警察局網站 http://www.cib.gov.tw/Media/Media_Short_Film.aspx

  27. 引用多媒體方式 以影像新聞模版所為建置多媒體內容 1進入網站功能架構管理介面 2點選新增項目 3選擇影像消息樣版 4進入內容管理介面 5點選自建內文 6詳細輸入影片旁白

  28. 定位點、網站導覽、鍵盤操作 • 為A+人工檢測重點 • 網頁定位點(導盲磚:::) • 由系統自動產出 • 網站導覽 • 架構由系統產出 • 可由管理者設定顯示位置 • 以鍵盤操作網頁 • 避免使用javascript • 自我檢測-使用鍵盤不使用滑鼠來瀏覽網頁

  29. 網站導覽配置方式 1.登入管理員身份後，點選左方「系統設定管理」功能，於展開的內容中，點選「網站功能架構管理」 在功能列加入網站導覽功能 1展開系統設定管理 2點選網站功能架構管理 2.找到「網站導覽」功能，顯現狀態圈選為「顯現」，完成後按下「確定」鈕 4按下確定鈕 3點選顯現

  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=”請輸入關鍵字”> <label for=”edu”>教育程度</label> <select id=”edu”> <option >大學</option> <option selected>大專</option> … </select>

  36. 結語 • 無障礙網頁就是 • 遵循國內的無障礙網頁規範。 • 除了符合機器檢測，更要用心自我人工檢視 • 注意網站親和性及便利性的操作功能。 • 正確使用網頁技術（HTML、CSS） • 多使用Freego檢測工具檢測網頁。 • 任何技術上或是規範上的問題 • 請撥無障礙服務專線：(03)357-9080#215 • 請上無障礙網路空間服務網 • http://enable.nat.gov.tw

More Related