Transcript 虛擬世界的通用設計
虛擬世界的通用設計 無障礙網路空間 吳元豪 通用設計 – 斜坡道 通用設計 – 低底盤公車 通用設計 – 防滑湯匙 通用設計 – ?? 實體無障礙環境的推手 駕著輪椅奔馳各地 推動無障礙環境 台灣通用設計代言人 從不放棄 也不曾放棄的 生命鬥士 通用設計 無礙環境 設計 是要讓人感受到 這世界有人愛你 比你愛自己還要 多 「都市小飛俠」唐峰正 多一分力 增一束光 您 就是虛擬無障礙環境的推手 議程 • 什麼是無障礙網頁 • 為什麼需要無障礙網頁 • 無障礙網頁規範 • 設計要點 • 如何自行檢測 • 參考資料 甚麼是無障礙網頁 - What 主要精神 • 網頁的呈現需考慮到身心障礙者及銀髮族 • 滿足各種瀏覽平台的使用者之需求 • 符合某些特定規範所製作出來的網頁 目的 • 喚醒大家提供正確的html語法設計 • 使網頁更具有結構化的設計 • 讓網站建置者較容易管理維護 • 提供有困難的身心障礙者、銀髮族親近網頁瀏覽的機會 為何要無障礙網頁 - Why • 回歸HTML tag的標準以及原始意義 • 特殊族群的人可以順利透過輔助器具閱讀網頁 • 視覺障礙（包括全盲、色盲、弱視等） • 聽覺障礙（全聾或是重聽） • 行動或有認知障礙、對閱讀或是文字理解有 困難的人。 如何做無障礙網頁 - How • 遵循國際無障礙網頁開發規範 • Web Content Accessibility Guideline (WCAG) • 由W3C協會底下的WAI組織所訂定的一個國際 性規範 • 台灣無障礙網頁開發規範 • 行政院研考會依據WCAG訂立相關規範 九十條相關的檢測要點 • 由14條規範衍生出90條檢測碼 • 編號系統、包括一個字母和六位數(格式：X999999) • H203004 - 要使用相對尺寸(如%)而非絕對尺寸(如像 素) 網頁語言 H：HTML X：XML H 2 03 0 04 優先等級 1, 2, 3 14條規範 01~14 檢測狀態 0：機器辨識 / 機器檢測 1：機器辨識 / 人工檢測 2：人工辨識 /人工檢測 流水號 00~99 無障礙網頁標章定義 • 第1優先等級：已符合第1優先等級為網站符合無障礙設 計最基本的要求，標章以 代表。 • A+：已符合第1優先等級網站，並具有三個便利使用者 瀏覽網頁的功能，標章以 代表。 • 定位點(:::)搭配鍵盤快速鍵(Accesskey)-原第3優先等級 • 網站導覽功能(Sitemap)-原第2優先等級 • 網頁瀏覽工具具有使用鍵盤設計，勿只設計僅能使 用滑鼠點選-原第2優先等級 • 第2優先等級：已符合第1及第2優先等級之無障礙設計 規範，標章以 代表。 • 第3優先等級：已符合第1、第2及第3優先等級之無障礙 設計規範，標章以 代表。 第1優先等級 • 第1優先等級：網頁內容開發者在開發網頁時必 須遵循這個等級的檢測碼。 1.1：H101000 圖片需要加上替代文字說明 • 有意義(非裝飾用)的圖示應提供清楚正確的圖 說 • 使用＊或null替代裝飾用圖示 • 資訊型圖示(組織圖、流程圖、位置圖)應額外 提供詳細文字說明 • 驗證碼圖片以語音提供替代方式 A+等級 • A+等級：通過第1優先等級無障礙設計，且具有 定位點(:::)搭配鍵盤快速鍵(Accesskey、網站導覽 功能(Sitemap) ，及網頁瀏覽工具具有使用鍵盤設 計。 • 定位點(:::)搭配鍵盤快速鍵(Accesskey) • 網站導覽功能(Sitemap) • 網頁瀏覽工具具有使用鍵盤設計，勿只設計 僅能使用滑鼠點選 第2優先等級 • 第2優先等級：網頁內容開發者在開發網頁時應 該滿足這個等級的檢測碼。 • 3.5：H203004 要使用相對尺寸(如%)而非絕對 尺寸(如像素) • 5.6：H205105 資料表格須提供標題說明 • 10.1：H210100 除非使用者知道將會開啟一個 新視窗，不要隨便開啟一個新視窗 • 12.6：H212005 在表單控制項上，以label標籤 提示資訊 • 13.5：H213004 為你的網頁加上標題 第3優先等級 • 第3優先等級：網頁內容開發者在開發網頁時可 以納入這個等級檢測碼的要求。 • 5.5：H305004 表格須提供表格摘要說明(如 summary屬性) • 10.5：H310004 在網頁文字輸入區中須有預設 值 • 11.4：H311203 允許使用者依照個人喜好設定 網頁呈現方式與內容 • 13.10：H313209 若有群組超連結，在群組之前 增設一項繞過此區域的超連結 各國現行資訊無障礙推動現況 • 美國布朗大學公共政策中心自2001年起，每年 針對近200個國家進行全球電子化政府評比，其 中有一個項目是「無障礙網頁服務。」 • 台灣自開始起，迭獲佳績，排名均在前10名內。 基本檢測類別 • 字型類 • 圖片類 • 表格類 • 連結類 • 定位類 • 網站導覽 1. 圖片需要加上替代文字說明 • H101000 : 頁面之圖片、圖形連結、相片等，是否有替 代文字之說明 • 檢測方式 : 移除網頁上圖片的顯示－選擇「工具」> 「網際網路設定」>『進階』選項【多媒體】，取消勾 選「顯示圖片」三項設定，並重新套用此設定。 圖片替代文字 2. 圖形驗證碼提供替代語音 • H101213 :使用語音方式來彌補無法看見圖形驗 證碼的替代方案 除了圖片的呈現外,另提 3. 設定符合網頁內容的視窗標題 • H213004 : 網頁有無適當的視窗標題，並確認是 否隨網頁切換而變更 網頁內容與標題相符 4. 提供清楚的網站導覽功能 • H213205 : 是否設置網站導覽或網站地圖說明網 站架構 以編號方式清楚呈現標 放置首頁，且鍵盤移動能於3個游標內能到達 5. 依版面提供適當的快速鍵設計 • H309105 : 網站設置快速鍵供快速移動焦點，有 搜尋及定位的用途 左側、中央、右側 上方、中央、右側 上方、中央 6. 將快速鍵說明放置網站導覽中 • 將選單及內容區搭配快速鍵設定定位點，方便 瀏覽者快速跳到所需資訊區 • 提昇網站的親和力及可及性 將說明放置網站導覽上方以 7. 鍵盤游標有規則的移動順序 • H309103 : 以鍵盤之TAB鍵瀏覽時，其瀏覽順序 是否『由左而右』及『由上而下』依區塊設計 順序瀏覽 8. 表單輸入欄位內容需有預設值 • H310004 在網頁文字輸入區中須有預設值 設定預設值說明欄位內容。 預設值設計注意，勿與可能填答內 例如：[email protected] 9. 使用相對尺寸設計網頁文字 • H203004 : 檢測網頁上的文字是否可隨螢幕解析 度高低或視窗大小而自動換行 一般視窗大小呈現 視窗變小呈現 以相對尺寸(%)設計表格，無論視窗大小 9. 使用相對尺寸設計網頁文字 • H203004 : 以相對尺寸設計，網頁的文字大小會 依需求調整明顯放大縮小。 10, 網頁彼此間設計風格要一致 • H314202 : 網站各頁面的區塊配置、版型設計或 瀏覽順序是否一致 更多 .. 無障礙網頁設計要點 • Access Key 搭配錨點(Anchor)使用 視障者很少用滑鼠 • NoScript替代方案: 包括加到最愛、友善列印、寄給好友、 回上一頁的作法 • 圖片、影片、聲音檔的替代文字(Alt) • Table：用來陳述資料，而非用來排版。善用<th>和 <caption>增加表格的可讀性。 • Heading和List的使用：文件結構，非字型設定 • 提供下載的文件是否說明不清楚或沒註明格式 • 移除網頁的CSS樣版設計看是否和還未移除前一樣可得 到相同的資訊 參考資料 • 行政院研考會無障礙網頁網站 http://www.webguide.nat.gov.tw/wSite/mp • 無障礙網頁標章及抽檢流程 http://enable.nat.gov.tw/procedure.jsp • 九十條檢測碼 http://enable.nat.gov.tw/doc2.jsp • 其他相關資源 http://enable.nat.gov.tw/download.jsp 推動無障礙網頁 就是需要您 !! 您的參與 可以給人感受到 這世界有人愛他們 比他們愛自己 還要多 THANK YOU 2012網路淨灘活動！ 你想做好事! 又可拿獎金?! 無礙自由行網路淨灘檢測表 請至 Free on Web 官網 活動專區-> 註冊->下載檢測表