無障礙網頁建置 基礎教育訓練 黑快馬股份有限公司 講師：John

課程大綱 介紹何謂無障礙(相關設計介紹) 如何建置無障礙網站 無障礙檢測認證流程 常見檢測項目範例 注意事項

何謂無障礙

認識無障礙 什麼是無障礙設計? 生活：無障礙坡道，導盲磚，公車語音 網頁：鍵盤快速鍵設計，定位點，替代文字

無障礙設計的用處 無障礙設計是為了誰? 障礙人士 例：肢障、聽障、視障

無障礙設計的用處 肢障者所使用的輔助器具 因無法使用雙手，操作上必須使用特殊器具 網頁必須提供不使用滑鼠也能簡單操作的功能

無障礙設計的用處 視障者所使用的輔助器具 因瀏覽電腦畫面困難 必須使用點陣機或是語音導覽軟體來閱讀網頁

如何建置無障礙網頁

建置符合『無障礙網頁開發規範』的網站 讓有障礙的人上網瀏覽更加便利 無障礙網頁開發規範-意義 建置符合『無障礙網頁開發規範』的網站 讓有障礙的人上網瀏覽更加便利

縮短身心障礙者的數位落差 讓有障礙的人無障礙 無障礙網頁開發規範-目的 縮短身心障礙者的數位落差 讓有障礙的人無障礙

無障礙網頁開發規範-內容 三個優先等級點我 十四條規範點我 九十個標準檢測碼點我 最終目的：建置所有網路使用者都可以使用的網頁

十四條規範 規範一：對於聽覺及視覺的內容要提供相等的替代文字內容 規範二：不要單獨靠色彩來提供特殊資訊 規範三：適當地使用標記語言和樣式表單 規範四：闡明自然語言的使用 規範五：建立編排良好的表格 規範六：確保網頁能在新科技下良好地呈現 規範七：確保使用者能處理時間敏感內容的改變 規範八：確保嵌入式使用者介面具有直接可及性 規範九：設計裝置獨立網頁 規範十：使用過渡的解決方案 規範十一：使用國際與國內官方訂定的技術和規範 規範十二：提供內容導引資訊 規範十三：提供清楚的瀏覽網站機制 規範十四：確保簡單清楚的網頁內容

無障礙檢測認證流程

無障礙處理流程圖 只要檢測退件 一律要重新機器檢測 進行機械檢測 註冊為 我的E政府會員 人工檢測通過 人工檢測未通過 安裝Freego單機版 只要檢測退件 一律要重新機器檢測 抽查未通過退件依 退件報告修正檢視 依退件報告重 新修正及檢視 進行機械檢測 (通過) (未通過) (抽測未通過) 將無障礙標章放置首 頁等待人工檢測報告 人工檢測通過 人工檢測未通過

申請標章登錄流程

填寫無障礙設計內容 本網站依無障礙網頁設計原則建置，網站的主要內容分為四 大區塊： 1. 上方功能區塊、2. 左方導覽區塊、3. 中央內容區塊、4.右 方相關連結區塊。 本網站的快速鍵﹝Accesskey﹞設定如下： Alt+U：上方功能區塊，包括回首頁、網站導覽等。 Alt+L：左方導覽區塊，為本網站的主選單區。 Alt+C：中央內容區塊，為本頁主要內容區。 Alt+R：右方相關資訊區塊，其他相關連結區。 Alt+S：網站搜尋。 (點我)

無障礙常見檢測項目

HV產品因應無障礙的基本需知 1.圖片的替代文字 2.附件的資料建置

HV產品因應無障礙的基本需知 3.屬於OBJECT語法的模組需補上替代文字 4.連結模組 5.資料表格的行列標題 下拉式選單呈現替代方法(點我) flash呈現替代方法 5.資料表格的行列標題 <td>(標題) </td> <td>(內容) </td> 修改 <th>(標題) </th> <td>(內容) </td>

Youtube 無障礙網頁設計 <object width=“640” height=“385”><param name=“movie” value=“http://www.youtube.com/v/wIg_i9c85_Y&hl=zh_TW&fs=1&”></param><param name=“allowFullScreen” value=“true”></param><param name=“allowscriptaccess” value=“always”></param><embed src=“http://www.youtube.com/v/wIg_i9c85_Y&hl=zh_TW&fs=1&” type=“application/x-shockwave-flash” allowscriptaccess=“always” allowfullscreen=“true” width=“640” height=“385”></embed>活水溯源_高屏溪</object>影片口白說明文字

實際運用案例：彰化縣社區總體營造網(Youtube應用) 連結

注意事項

送件前先檢查 (1)各項圖片請提供有意義之替代文字說明。 (請務必要加註圖片完整說明且不同圖片請提供不同替代文字說明 ) (2)網站部份網頁尚未完成皆為空白內容，請完整建置網站後再重新提出標章申請。  (若有空白未建資料，建議可先刪掉)  (3)各項資料表格的行列標題請使用正確TH標籤。(點我) (行列開頭即可) (4)對於object提供替代文字說明 (請使用noembed=“ ”)  (5)位置圖&平面圖請提供文字詳細描述：行車路線、交通狀況等。 (也就是動線說明)可參考

送件前先檢查 (6)除首頁頁面外，其餘頁面並未設置定位點，請修正。 (每一個頁面都要設置定位點) (7)美編、排版圖片等裝飾圖，請以null(即“”)為圖說； 避免語言朗讀系統重覆讀取無意義的資訊。 (請以“ * ”做為替代文字說明，)  (8)驗證碼圖片，請提供替代方案(EX：寄送mail、語音說明…)，方便視障人士使用輔具時，可了解其驗證碼之內容。 (系統更新) (9)網頁內有多個「more」(或「更多」)圖示或文字時，請在替代文字上分別顯示名稱 (請使用如「更多焦點新聞」、「更多快速連結」．．等 ) 

送件前先檢查 (10)各項檔案下載或開啟，請將檔案之副檔名(pdf或doc)連同檔名，標示於超連結之替代文字內，建議可以將檔案名稱直接作連結，並將檔案格式標明，讓視障者游標移到該檔案時，即可知道檔案下載格式。請檢視全網站是否有相同問題，一併修正。 (11)中央頁籤功能與中央區塊許多資料，在不支援JavaScript時，皆無法正常顯示，請提供替代方案及替代文字說明。 (12)網站導覽內，有定位點搭配快速鍵Alt+U之說明，但實際檢視此網站，並未設置上方導覽連結之定位點，請修正。

無障礙相關問題請撥 專線電話： 04-2706-3968 * 4320 、4315 客服信箱： webguide@hyweb.com.tw

補充資料參考 政府網站營運交流平台 無障礙網站參考資訊： http://www.webguide.nat.gov.tw/ (進入) http://www.batol.net 淡江大學盲生資源中心 http://disable.yam.org.tw/ 身心障礙者服務資訊網 http://dia.ezpor.com/bin/home.php 無障礙教學網