1 / 87

世新大學 無障礙網路空間 服務推廣教育訓練 96/09/28

世新大學 無障礙網路空間 服務推廣教育訓練 96/09/28. 課程開始前 - 練習準備. 請先將自己單位的網頁另存至 自己電腦中 ( 檢測練習 ) 測驗檔案下載： http://cc.shu.edu.tw/~icare/0927test.zip 簡報檔下載： http://cc.shu.edu.tw/~icare/PPT-20070927.zip 請至電算中心 《Icare 無障礙服務站 》 下載檢測工具 Freego http://cc.shu.edu.tw/~icare/Htm/0102.htm. 什麼是無障礙網路空間 ?. 研考會無障礙宣導影片.

kaia
Télécharger la présentation

世新大學 無障礙網路空間 服務推廣教育訓練 96/09/28

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. 世新大學無障礙網路空間服務推廣教育訓練96/09/28世新大學無障礙網路空間服務推廣教育訓練96/09/28

  2. 課程開始前-練習準備 請先將自己單位的網頁另存至自己電腦中(檢測練習) 測驗檔案下載：http://cc.shu.edu.tw/~icare/0927test.zip 簡報檔下載：http://cc.shu.edu.tw/~icare/PPT-20070927.zip 請至電算中心《Icare無障礙服務站》下載檢測工具Freegohttp://cc.shu.edu.tw/~icare/Htm/0102.htm

  3. 什麼是無障礙網路空間? 研考會無障礙宣導影片

  4. *院系所網頁無障礙競賽 • 推動「無障礙」網路空間，為國家既定之政策，研考會及教育部對此設有具體之時程規定：各大專院校系所單位之網站，須於 9 6年 12 月達到無障礙規範「A+」等級。 • 為此，本校特舉辦此競賽，以鼓勵各院系所提升網站無障礙化之能力，能夠依循無障礙規範來改善或設計單位網站，以提供身心障礙者能方便地使用網路資源與服務，落實校園網路空間無障礙化之目標。 • 活動辦法請參閱： • 世新大學無障礙服務站 • http://cc.shu.edu.tw/~icare/院系所須於 ” 12/15 ”前請先行至研考會申請” A+ ” 標章

  5. 檢測工具介紹

  6. *無障礙網頁檢測工具 檢測工具Freego下載點1：電算中心《Icare無障礙服務站》http://cc.shu.edu.tw/~icare/Htm/0102.htm下載點2：研考會《無障礙網路空間服務網》http://enable.nat.gov.tw/download_tool.jsp 院系所初步檢測報告http://cc.shu.edu.tw/~icare/Htm/0201.htm

  7. Freego操作介面(1) 網址輸入 開始進行檢測 本地端網址檢測 設定檢測層數，選擇 1 至 5 層或是選擇全網站

  8. Freego操作介面(2)

  9. Freego操作介面(3) 編輯功能：(1)複製 (2)貼上 (3)全選 檔案功能：(1)新增 (2)開啟檔案 (3)儲存檔案 (4)離開 報告功能：(1)單一網頁檢測報告 (2)全網站檢測報告

  10. Freego操作介面(4) 設定功能：(1)設定沒反應時自動停止時間(2)最長檢測時間。(3)設定檢測等級。 說明功能：(1)使用說明 (2)A+檢測碼說明 (3)檢查線上更新版本 (4)關於Freego

  11. 修正工具介面(1) (二)檢測碼定義：點選左方「檢測碼」即可切換顯示該檢測碼之規範內容 (一)檢測碼：列出檢測結果中，未通過機器辨識 / 機器檢測之檢測碼

  12. 修正工具介面(2) (三) 原始碼位置說明：該網頁原始碼中，未符合左方「檢測碼」選定之原始碼的位置(以字元為單位，1個英文字及1個中文字皆為一個字元)，並以紅色 圖表示錯誤，如修正後，則會顯示為來提示使用者。

  13. 修正工具介面(3) 勿直接利用 Freego 修正，以免辛苦做好的網頁亂掉。 (四) 相關原始碼修正與否：顯示該錯誤之原始碼是否已經修正，未修正前顯示「修正前」，修正完畢顯示「修正後」。 (五)網頁原始碼：顯示與左方「檢測碼」及右方「原始碼位置」相關之網頁原始碼片段。

  14. *標章申請流程 通過機器檢測 自行完成人工檢測建議 加入無障礙空間服務網會員http://enable.nat.gov.tw/login.jsp 按下申請標章登錄按鈕 填寫相關資料及上傳檢測結果 依網站回傳資訊設定標章連結路徑

  15. 定位點搭配快速鍵

  16. 定位點搭配快速鍵 定位點原名為導盲磚 輔助性的引導設計，可方便瀏覽者搜尋及跳至所需網頁區塊 各框架(frame)之間快速移動與搜尋 例：選單區、主內容區 加速瀏覽者瀏覽網頁的速度 通常搭配快速鍵(Accesskey)一起設計 呈現方式 使用三個冒號(:::)來表示 • 相關檢測碼: • 9.5：H309204 對經常使用的超連結，增加快速鍵的操作 • 9.6：H309105 對於表單元件考慮提供鍵盤快速鍵的操作

  17. 定位點搭配快速鍵設計常見問題一定位點設計過多定位點搭配快速鍵設計常見問題一定位點設計過多 定位點的設計精神是便利搜尋與定位，請在主要區域設定即可，若設計過多的定位點會流於頁面混亂，反而會帶給使用者的操作不便。        資料來源：內政部兒童局 http://www.cbi.gov.tw/welcome.jsp

  18. 定位點搭配快速鍵設計常見問題二定位點失其功能定位點搭配快速鍵設計常見問題二定位點失其功能 雖有設計定位點，但定位後游標移動的順序不對，失去定位點功效。   以alt+z定位於左側區塊後再按tab鍵，游標不是往左側選單移動，卻移動到下一個定位點，使定位點失其功能 資料來源：台中縣觀光旅遊導覽網 http://tt.taichung.gov.tw/county/cht/

  19. 定位點搭配快速鍵設計建議一定位點設計建議 上方、中央、左側 Accesskey設定 資料來源：世新大學經濟系http://cc.shu.edu.tw/~econ/index.htm

  20. 定位點搭配快速鍵設計建議二將鍵盤快速鍵說明放置sitemap中定位點搭配快速鍵設計建議二將鍵盤快速鍵說明放置sitemap中 將選單及內容區搭配快速鍵設定定位點，方便瀏覽者快速跳到所需資訊區 提昇網站的親和力及可及性 將說明放置sitemap上方以便瀏覽，更提昇網站親和力。 資料來源：中華民國交通部觀光局　 http://www.taiwan.net.tw/lan/Cht/html/sitemap.asp

  21. 網頁導覽設計

  22. 網站導覽(sitemap) 提供整個網站簡介與層次架構，降低瀏覽者”迷路”的機率。 提昇網站的親和力及可及性 瀏覽者可利用網站導覽地圖的鏈結功能，快速進入所需的網頁。 • 相關檢測碼: • 13.6H213205 為網站提供網站地圖或整體性的簡介 • 13.7H213206 網頁設計使用清楚且一致的導覽機制 • 13.8H313207 提供網頁導覽連結工具列，以利存取網站導覽結構

  23. 網站地圖常見問題一網站地圖的編排方式不一致網站地圖常見問題一網站地圖的編排方式不一致 次標題的排版方式不一致，易造成瀏覽者不清楚階層關係。 純文字瀏覽器呈現 呈現不同層次，容易讓使用者誤解。 參考世新大學(總務處)範例：http://ga.shu.edu.tw/

  24. 網站地圖設計建議一提供清楚的網站導覽功能 以編號方式清楚呈現標題層次，並加上鏈結，方便瀏覽者快速進入網站 放置首頁，且在3個連結內可以找尋到 資料來源：中華民國交通部觀光局　 http://www.taiwan.net.tw/lan/Cht/html/sitemap.asp

  25. 網頁標題 提供瀏覽者了解目前瀏覽的位置 輔具先讀取網頁標題 搜尋程式會將網頁標題設為索引項目 方便以搜尋程式找尋資料的瀏覽者 例： Google 將網頁設為我的最愛時可呈現正確標題 • 相關檢測碼: • 13.5：H213004 為你的網頁加上標題

  26. 網頁標題常見問題一網頁標題未設定或與內容沒有關聯網頁標題常見問題一網頁標題未設定或與內容沒有關聯 網頁未設定標題名稱 網頁未設定標題時，會由網頁製作軟體自動命名。

  27. 網頁標題常見問題二不同網頁勿以相同標題呈現網頁標題常見問題二不同網頁勿以相同標題呈現 標題主旨未符合內容主題，不易提供瀏覽者得到所需資料，請避免標題過於籠統。 不同網頁，卻以相同標題呈現。 資料來源：行政院環保署 http://www.allec.com.tw/working/epa/index.asp?modules=po

  28. 網頁標題設計建議一設定符合網頁內容主旨的標題網頁標題設計建議一設定符合網頁內容主旨的標題 網頁內容與標題相符 資料來源：總統府網站 http://www.president.gov.tw/

  29. 表格設計

  30. 表格設計 視障者是使用語音朗讀器或點字機來閱讀資訊，若沒有結構化的表格文字將影響輔具解讀表格內容。 排版用表格 表格內容並無從屬關係 資料用表格 表格內容為有意義的資料結構 例：人口分布統計表、學生成績 • 相關檢測碼: • 5.1:H105100 對於每一個存放資料的表格(不是用來排版)，標示出行和列的標題 • 5.2:H105101 表格中超過二行/列以上的標題，須以結構化的標記確認彼此間的結構與關係 • 5.5:H305004 表格須提供表格摘要說明 • 5.6:H305105 資料表格須提供標題說明

  31. 表格摘要說明(summary屬性) 資料性表格需提供敘述性摘要說明。 因相關輔具能夠讀取Summary資訊，使用輔具之瀏覽者可事先得知表格內的資料種類，增加閱讀網頁便利性 資料來源：中央氣象局 http://www.cwb.gov.tw/

  32. 表格摘要常見問題一資料表格摘要與內容不符 表格摘要未與表格主題相符 資料來源：總統府新聞稿 http://www.president.gov.tw/php-bin/dore2+/list.php4?_section=3

  33. 表格摘要常見問題二資料表格摘要無法清楚表達主題表格摘要常見問題二資料表格摘要無法清楚表達主題 表格摘要未能清楚表達表格主題建議以”雙語辭彙對照表”作為摘要說明較為清楚

  34. 表格摘要常見問題三表格摘要說明不正確 表格內容為資料表格，表格摘要卻陳述為排版表格 資料來源：行政院新聞局 http://info.gio.gov.tw/lp.asp?ctNode=3446&CtUnit=315&BaseDSD=17&mp=1

  35. 表格摘要設計建議一排版用表格使用＊呈現 若表格為排版用，表格摘要說明可以”版型表格”或”＊”表示 語法: <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" summary="版型表格"> 資料來源：台北市政府研考會 http://www.rdec.taipei.gov.tw/

  36. 表格行列設計 提供瀏覽者了解表格行與列的主題內容為何 使用th標籤(朗讀器會特別表現) 使用th標籤表示行列主題 資料來源：中央氣象局 http://www.cwb.gov.tw/

  37. 圖片提供文字說明設計

  38. 圖片替代文字的意義 協助瞭解圖片內容 協助瞭解圖片置放的原因及目的 • 相關檢測碼： • 1.1 H101000 圖片需要加上替代文字說明 • 1.7H101106 當ALT屬性的文字陳述大於150個英文字元時，考慮另外提供文字敘述 • 1.9 H101108 圖形替代文字陳述不夠清晰時，提供更多的文字描述(如使用longdesc屬性) • 3.8 H203107 項目符號及編號之標籤(如li、ul)僅可使用於實際網頁內容的項目條列，不可用於編輯格式 • 1.5：H101004 影像地圖區域需要加上替代文字說明 • 1.13：H101112伺服器端影像地圖中的超連結必須在網頁中有額外對應的文字超連結 • 1.16：H301015 客戶端影像地圖中的超連結必須在網頁中有額外對應的可及性超連結

  39. 圖片替代文字的優點 相關輔具可以讀得到這段文字 例：螢幕朗讀軟體 純文字瀏覽器會把這段文字顯示出來 檢索網站會為這段文字建立索引 例： Google 視覺性瀏覽器會以工具提示或者在狀態列顯示出來 例： IE、Firefox、 Netscape

  40. 裝飾用圖示常見問題一條列式圖示勿採用文字說明裝飾用圖示常見問題一條列式圖示勿採用文字說明 條列式圖示以文字說明呈現，易使內容過於繁雜，且無意義。 資料來源：台南縣警察局 http://www.tncp.gov.tw/main.asp?CatID=1 國民健康局網站 http://www.bhp.doh.gov.tw/BHP/index.jsp

  41. 裝飾用圖示建議寫法 一使用＊或空白替代裝飾用圖示 圖說用＊或空白替代，清楚簡潔。 語法：<img src="icon.gif" alt="*" > 替代文字呈現 alt以”＊”替代

  42. 功能選單、項目圖型常見問題 一圖說過於繁雜 圖說以「主項目、次項目」文字替代，雖然已可提供使用者瞭解，但由於此圖片是屬於項目圖型，若太多的文字說明，在畫面上或是輔具讀取時都會產生繁雜的問題 替代文字呈現 圖說過於繁雜

  43. 功能選單、項目圖型建議寫法 一清楚的階層符號 項目圖型以數字階層文字替代，則清楚呈現階層關係。 語法： <img src="icon.gif" alt="1">科博館簡介<br> <img src="icon.gif" alt="1-1">沿革與館史<br> <img src="icon.gif" alt="1-2">組織架構<br> <img src="icon.gif" alt="1-3">館區介紹<br> <img src="icon.gif" alt="2">參觀與服務<br> <img src="icon.gif" alt="3">活動資訊<br> 替代文字呈現 以數字階層標示

  44. 廣告連結圖型常見問題一未標示開新視窗說明 相關資源連結圖示未提供”開啟新視窗” 說明，容易造成使用者不清楚資訊在那個網頁中。 未提供開新視窗說明 資料來源：高雄市政府衛生局全球資訊網http://khd.kcg.gov.tw/c_index.php

  45. 廣告連結圖型常見問題二未提供連結他網說明 雖提供(開新視窗)的說明方式，但未告知此圖示為連結他網的功能。 未告知連結他網 資料來源：台北市政府http://www.taipei.gov.tw/

  46. 廣告連結圖型建議寫法 一以”連結”說明告知，並加上開啟新視窗說明 以”連結”告知圖示為一個連結他網的超連結用的圖示，並加上開啟新視窗說明，讓使用者瞭解資訊會在另一個新網頁中。 語法： <img src=”icon.gif” alt=”連結到我的e政府(另開新視窗)”> 替代文字呈現 清楚說明連結他網及開新頁面

  47. 組織圖常見問題圖說僅以組織圖帶過 若只以簡單的文字來替代，在只顯示文字時是無法瞭解組織圖的內容 語法： <img border="0" src="klcg.gif" width="398" height="596" alt="組織圖"> 替代文字呈現 僅以”組織圖”簡單說明

  48. 組織圖建議寫法 組織圖旁加上文字說明 除提供組織圖外，另提供各單位介紹之純文字說明 建議語法: <img border="0" src="../image/Item1/klcg.gif" alt="組織圖"> <p>市長下設的部門：民政局、財政局、建設局、教育局、工務局、都市發展局、社會局、兵役局、地政局、行政室、研考室。</p><p>衛生局下設的部門：市立醫院、區衛生所、慢性病防治所</p><p>區公所下設的公所：中正區、信義區、仁愛區、中山區、安樂區、暖暖區、七堵區</p> 將文字說明直接放至頁面上

  49. 位置圖常見問題 一位置圖無清楚說明 樓層位置圖若僅以平面圖來替代說明，無其它文字說明，是無法瞭解各樓層的相關資訊。 僅以全平面圖簡單說明 資料來源：臺灣桃園國際機場-機場介紹 http://www.taoyuanairport.gov.tw/CKSchi/about/floormap_c.jsp#

  50. 位置圖建議寫法 一在頁面上加上文字說明 可在位置圖附近加上路線、交通等說明。 在位置圖下加上說明 資料來源：高雄縣湖內鄉戶政事務所 http://163.29.105.99/intranet/rosseauism/hunei/chinese/about.htm

More Related