网页五四三视觉设计篇.pptVIP

及設計經驗分享 張秀榕、龔邦珍 主講 2008-06-04 無障礙網頁專區.tw/batol/ 無障礙網路空間 以方便行善的概念為設計基礎 例：生活環境中的無障礙坡道 降低網路應用上的困難與挫折感 增加生活資訊流通與應用的機會 網路為資訊創造了無遠弗屆的可能，但人為的因素卻可能設下了屏障與阻礙！ 例：只能限制某種瀏覽解析度、某種瀏覽器或版本 無障礙網站 在網站的設計上考量身障使用者的需求，盡量排除不必要的的障礙 使網站的操作使用的便利性，達到一定的標準 國際標準(W3C, WAI, WCAG) 國內標準(無障礙標章：A, A+, AA, AAA→以Accessibility為標章設計原由) 無障礙網頁開發規範 四項原則 十四條規範 九十條相關的檢測要點 分屬3個優先等級、 3(+1)個檢測等級 每個檢測等級都含機器及人工檢測2個部分 標準檢測碼的檢測狀態： 0：機器辨識/機器檢測 1：機器辨識/人工檢測 2：人工辨識/人工檢測 無障礙網頁開發規範 國內標準與國外的差異 無障礙網頁開發規範 四項原則 多媒體相關資訊的可及性→網頁內容：影像、圖形、語音、音樂、影片等，應加入替代或等值的文字 網頁結構和呈現處理的可及性→網頁文字為了排版或美觀而採用了表格或頁框設計，卻破壞了網頁的可及性 網頁開發和輸出入裝置相關技術處理的可及性→不使用滑鼠的情況下，需兼顧鍵盤使用者的可及性、Script語言、特殊的媒體技術(FLASH) 網站瀏覽機制的可及性→身障者在特殊上網裝置瀏覽網頁時較不方便，因此網站瀏覽機制的設計應力求簡單清楚(例如下拉式選單mouse over時才出現，mouse out時又消失) 無障礙網頁開發規範 十四條規範 (.tw/doc1.jsp) 規範一：對於聽覺及視覺的內容要提供相等的替代文字內容 規範二：不要單獨靠色彩來提供特殊資訊 規範三：適當地使用標記語言和樣式表單 規範四：闡明自然語言的使用 規範五：建立編排良好的表格 規範六：確保網頁能在新科技下良好地呈現 規範七：確保使用者能處理時間敏感內容的改變 無障礙網頁開發規範 十四條規範 (.tw/doc1.jsp) 規範八：確保嵌入式使用者介面具有直接可及性 規範九：設計裝置獨立網頁 規範十：使用過渡的解決方案 規範十一：使用國際與國內官方訂定的技術和規範 規範十二：提供內容導引資訊 規範十三：提供清楚的瀏覽網站機制 規範十四：確保簡單清楚的網頁內容 無障礙網頁開發規範 因應四個原則及十四條規範，於是有了九十個檢測要點 可利用研考會網站的線上檢測功能或Freego檢測工具來進行，是否符合此九十個檢測要點？ 無障礙網頁設計流程圖 無障礙網站實例 符合A+小撇步(一) 等級A之必要條件 a tag 加註 title=“xxxx” img tag 加註 alt=“替代文字” 頁框要定義名稱 → frame tag 加註 title=“xxx” 排版用表格加上說明→table 加註 summary=排版用表格“ 非排版用表格要用 trth/th/tr並定義行列對應狀態 若使用 css樣式表，需確保文件去除樣式表後仍能正確閱讀 script tag 要加註NOSCRIPT說明 範例說明 符合A+小撇步(二) 等級A+之必要條件 除需符合前述等級A之所有條件外，需再具備 導盲磚(:::)或叫定位點→搭配快速鍵使用 便捷鍵或叫快速鍵(Accesskey) 網站導覽(sitemap) 瀏覽網頁時，需具有使用鍵盤的設計，切勿只設計僅供使用滑鼠的情形 替代文字說明： 有意義的文字 條列式的小圖示→alt=“*” 無意義的裝飾性圖檔→alt=“”(空字串) 符合A+小撇步(三) 導盲磚(:::)配合便捷鍵程式範例 a accesskey= L href=# title=左方選單區 class=hidetxt:::左側區塊/a a accesskey= C href=# title=主要內容區 class=hidetxt:::中央區塊/a a accesskey= R href=# title=右方相關內容區 class=hidetxt:::右側區塊/a 網站導覽範例 .tw/sitemap.jsp /center/sitemap.asp 符合A+小撇步(四) 確保事件的啟發不得要求一定使用滑鼠 無障礙網頁檢測工具 Web版檢測工具 .tw/check.jsp 單機版檢測工具 Freego檢測程式→行政院研考會免費提供 檢測程式下載 安裝Freego前，要先安裝JVM → /zh_tw/download/windows_automatic.jsp Freego下載→ .tw/download_tool.jsp (要先