SlideShare a Scribd company logo

無障礙網頁

20121206 交大講稿,還請各位不吝指正,以免誤人子弟。 原始(或最新)檔案可由 dropbox 下載: https://dl.dropbox.com/u/25419912/%E7%84%A1%E9%9A%9C%E7%A4%99%E7%B6%B2%E9%A0%81_20121206_%E4%BA%A4%E5%A4%A7.pptx

1 of 64
Download to read offline
無障礙網頁      其實是講網頁親和力




CC-BY-SA 3.0        clifflu @ 交大, 2012/12/06
網頁親和力 :: 講者簡介
2
投影片下載
3
投影片下載
4

       Dropbox                      Slideshare
           下載 (MS Word, .pptx)          http://tinyurl.com/afl38x4
課程目標
5




     了解「網頁親和力」
     的概念與原則
玩弄名詞
6


    •   無障礙
    •   可用性
    •   親和力

Recommended

雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場
雲端上的資訊安全-Global Azure Bootcamp 2015 臺北場twMVC
 
《淘宝客户端 for Android》项目实战
《淘宝客户端 for Android》项目实战《淘宝客户端 for Android》项目实战
《淘宝客户端 for Android》项目实战完颜 小卓
 
白玉磊 Webrebuild
白玉磊 Webrebuild白玉磊 Webrebuild
白玉磊 Webrebuild裕波 周
 
網站改版案
網站改版案網站改版案
網站改版案Winnie Hsu
 
打造網站親和力
打造網站親和力打造網站親和力
打造網站親和力Yvonne Yu
 
Government Digital Service 英國政府數位服務策略及設計準則(蔡明哲)
Government Digital Service 英國政府數位服務策略及設計準則(蔡明哲)Government Digital Service 英國政府數位服務策略及設計準則(蔡明哲)
Government Digital Service 英國政府數位服務策略及設計準則(蔡明哲)codefortomorrow
 
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013Adam Wang
 
好的網頁設計概念
好的網頁設計概念好的網頁設計概念
好的網頁設計概念蘇姵欣 PeiSu
 

More Related Content

Similar to 無障礙網頁

Wiki in Teamroom - Connected Mind
Wiki in Teamroom - Connected MindWiki in Teamroom - Connected Mind
Wiki in Teamroom - Connected MindRick Hwang
 
Web可访问性
Web可访问性Web可访问性
Web可访问性rex song
 
網站上線了,然後呢?
網站上線了,然後呢?網站上線了,然後呢?
網站上線了,然後呢?Kirk Chen
 
Drupal7第一堂
Drupal7第一堂Drupal7第一堂
Drupal7第一堂Hen Chen
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-applydiafly
 
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuildWebrebuild
 
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口Dexter Yang
 
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline20120516 axure rp prototype design outline
20120516 axure rp prototype design outlineturtleknight
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案 Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案 drewz lin
 
去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验mysqlops
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合Qiangning Hong
 
開放原始碼 Ch2.3 app - oss - ui framewoks (ver 1.0)
開放原始碼 Ch2.3   app - oss - ui framewoks (ver 1.0)開放原始碼 Ch2.3   app - oss - ui framewoks (ver 1.0)
開放原始碼 Ch2.3 app - oss - ui framewoks (ver 1.0)My own sweet home!
 
Wot2013云计算架构师峰会 -陈轶飞2
Wot2013云计算架构师峰会 -陈轶飞2Wot2013云计算架构师峰会 -陈轶飞2
Wot2013云计算架构师峰会 -陈轶飞2dotCloud
 
introduction of web 2.0
introduction of web 2.0introduction of web 2.0
introduction of web 2.0soboring
 
Axure RP Prototyping Tool
Axure RP Prototyping ToolAxure RP Prototyping Tool
Axure RP Prototyping ToolSouyi Yang
 
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程Souyi Yang
 
Android裝置開發過程的軟硬整合關鍵及挑戰
Android裝置開發過程的軟硬整合關鍵及挑戰Android裝置開發過程的軟硬整合關鍵及挑戰
Android裝置開發過程的軟硬整合關鍵及挑戰tick
 
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0) 開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0) My own sweet home!
 
Elastic stack day-1
Elastic stack day-1Elastic stack day-1
Elastic stack day-1YI-CHING WU
 

Similar to 無障礙網頁 (20)

Wiki in Teamroom - Connected Mind
Wiki in Teamroom - Connected MindWiki in Teamroom - Connected Mind
Wiki in Teamroom - Connected Mind
 
Web可访问性
Web可访问性Web可访问性
Web可访问性
 
網站上線了,然後呢?
網站上線了,然後呢?網站上線了,然後呢?
網站上線了,然後呢?
 
Drupal7第一堂
Drupal7第一堂Drupal7第一堂
Drupal7第一堂
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-app
 
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuild
 
CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口CardKit & DOMO UI - 移动时代技术与设计的十字路口
CardKit & DOMO UI - 移动时代技术与设计的十字路口
 
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案 Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
Top100summit东软 孙广宇-uni sdp基于html5构建的跨平台的统一智能设备解决方案
 
去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验
 
合久必分,分久必合
合久必分,分久必合合久必分,分久必合
合久必分,分久必合
 
開放原始碼 Ch2.3 app - oss - ui framewoks (ver 1.0)
開放原始碼 Ch2.3   app - oss - ui framewoks (ver 1.0)開放原始碼 Ch2.3   app - oss - ui framewoks (ver 1.0)
開放原始碼 Ch2.3 app - oss - ui framewoks (ver 1.0)
 
Wot2013云计算架构师峰会 -陈轶飞2
Wot2013云计算架构师峰会 -陈轶飞2Wot2013云计算架构师峰会 -陈轶飞2
Wot2013云计算架构师峰会 -陈轶飞2
 
introduction of web 2.0
introduction of web 2.0introduction of web 2.0
introduction of web 2.0
 
Axure RP Prototyping Tool
Axure RP Prototyping ToolAxure RP Prototyping Tool
Axure RP Prototyping Tool
 
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
 
Android裝置開發過程的軟硬整合關鍵及挑戰
Android裝置開發過程的軟硬整合關鍵及挑戰Android裝置開發過程的軟硬整合關鍵及挑戰
Android裝置開發過程的軟硬整合關鍵及挑戰
 
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0) 開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
 
Elastic stack day-1
Elastic stack day-1Elastic stack day-1
Elastic stack day-1
 

More from Cliff Chao-kuan Lu

More from Cliff Chao-kuan Lu (14)

EC2 Spot in 104
EC2 Spot in 104EC2 Spot in 104
EC2 Spot in 104
 
Serverless 網站監控
Serverless 網站監控Serverless 網站監控
Serverless 網站監控
 
Lessons Learnt from Guanyu
Lessons Learnt from GuanyuLessons Learnt from Guanyu
Lessons Learnt from Guanyu
 
Serverless Patterns
Serverless PatternsServerless Patterns
Serverless Patterns
 
Greetings from AWS User Group Taiwan
Greetings from AWS User Group TaiwanGreetings from AWS User Group Taiwan
Greetings from AWS User Group Taiwan
 
104 meets cloud
104 meets cloud104 meets cloud
104 meets cloud
 
Intro to Serverless
Intro to ServerlessIntro to Serverless
Intro to Serverless
 
Interview Quiz w/o Server
Interview Quiz w/o ServerInterview Quiz w/o Server
Interview Quiz w/o Server
 
那些 re:Invent 不怎麼技術的事
那些 re:Invent 不怎麼技術的事那些 re:Invent 不怎麼技術的事
那些 re:Invent 不怎麼技術的事
 
Cost Optimization Best Practices from Trend Micro
Cost Optimization Best Practices from Trend Micro Cost Optimization Best Practices from Trend Micro
Cost Optimization Best Practices from Trend Micro
 
不談 IAM
不談 IAM不談 IAM
不談 IAM
 
Networking in the cloud
Networking in the cloudNetworking in the cloud
Networking in the cloud
 
Health, Platform, In The Cloud
Health, Platform, In The CloudHealth, Platform, In The Cloud
Health, Platform, In The Cloud
 
AWS Solutions Architect 準備心得
AWS Solutions Architect 準備心得AWS Solutions Architect 準備心得
AWS Solutions Architect 準備心得
 

無障礙網頁

  • 1. 無障礙網頁 其實是講網頁親和力 CC-BY-SA 3.0 clifflu @ 交大, 2012/12/06
  • 4. 投影片下載 4  Dropbox  Slideshare  下載 (MS Word, .pptx)  http://tinyurl.com/afl38x4
  • 5. 課程目標 5 了解「網頁親和力」 的概念與原則
  • 6. 玩弄名詞 6 • 無障礙 • 可用性 • 親和力
  • 8. 人? 8 • 一般人 • 殘疾人 • 搜尋引擎 • 懶人、苦命人、壞人…
  • 9. 親和力的原則 9 • 妥善設計網頁內容,使目標用戶:  可感知  可操作  易理解  強固
  • 10. 人有五感 10 • 視覺 • 平衡覺 • 聽覺 • 自體感覺 • 觸/壓覺 • 溫覺 • 嗅覺 • 痛覺 • 味覺 • 時間
  • 11. 電腦輸出介面 11 • 聽覺:音效、語音 • 視覺:  依特性:大小、顏色、字型、動作、 裝飾  依介面:視窗、文字 • 觸覺、力回饋
  • 12. 殘疾 : 視覺 12 • 全盲 • 弱視、近視、散光 • 色盲、色弱 • 閃光、畏光
  • 18. 搜尋引擎 18 • 對於嵌入式內容,搜尋引擎分析其連 結文字 與 替代文字 • Google 不處理 js 產生的內容  http://support.google.com/customsearch/bin/answer.py?hl=en&answer=72366  http://searchengineland.com/google-can-now-execute-ajax-javascript-for-indexing-99518
  • 19. 其他不良使用情境 19 • 週邊吵雜、強光 • 缺少部份組件 • 軟體版本過舊
  • 20. 常見電腦輸入裝置 20 • 鍵盤、軌跡球 • 滑鼠 • 搖桿 • 觸控/手寫板
  • 21. 殘疾 : 運動 21 • 肌力衰退 • 非自主運動 • 癱瘓 • 斷肢
  • 22. 輔助輸入裝置 : 低科技 22 • 踏板/按鈕 • 口啣棒 (Mouth stick) • 頭杖 (Head wand) http://webaim.org/articles/motor/assistive
  • 23. 輔助輸入裝置 : 電腦軟體 23 • 螢幕小鍵盤 • 滑鼠鍵 • 聲控、語音
  • 24. 輔助輸入裝置 : 高科技 24 • 呼吸控制 • 肌電訊號 • 視跡追蹤 • 腦波 http://commons.wikimedia.org/wiki/File:Stephen_Hawking_050506.jpg
  • 25. 輔助科技 : 輸出 25  螢幕放大鏡  將文字作為中介  語音(Text-To-Speech) 螢幕閱讀軟體 語音瀏覽器 點字顯示器
  • 26. 曾經 26 無障礙 = 純文字
  • 31. 網頁基礎 31 • 以正確標籤表達語意 • 分離內容、排版與功能 • Progressive Enhancement / Graceful Degradation
  • 32. WCAG 1.0 32 • 公佈於 1999 年 • 抽象描述親和力要素 • 另有 WCAG10-TECHS 描述施行與 驗證細節 • 共計 14 條準則 (guideline),65 項檢 核要點 (checkpoint)
  • 33. WCAG 2.0 33 • 公佈於 2008 年底 • 減低標準對科技的依存度 • 各國準則仍以 WCAG 1.0 為主
  • 34. 台灣 34  2002 年通過無障礙網頁相關規範 基於 WCAG 1.0 / WebXact  公部門與殘障福利機構需在 2008 年 通過 Level A 驗證
  • 36. WCAG 2.0 原則 36  可感知 Perceivable  可操作 Operable  易理解 Understandable  強固 Robust
  • 37. WCAG 2.0 分級 37 A  AA  AAA
  • 38. WCAG 2.0 準則 38 • 原則 1 可感知:  準則 1.1 替代文字: 對於文字以外的內容,提供合理的 替代文字
  • 39. WCAG 2.0 準則 39 • 原則 1 可感知:  準則 1.2 時間媒體的替代文字: 為基於時間的媒體提供替代內容
  • 40. WCAG 2.0 準則 40 • 原則 1 可感知:  準則 1.3 適應性: 建立能以不同方式呈現,而不喪失 資訊或結構的內容
  • 41. WCAG 2.0 準則 41 • 原則 1 可感知:  準則 1.4 可辨識: 使用戶能輕易以視覺或聽覺判斷前 後景的內容
  • 42. WCAG 2.0 準則 42 • 原則 2 可操作:  準則 2.1 可以鍵盤操作: 能以鍵盤操作所有功能
  • 43. WCAG 2.0 準則 43 • 原則 2 可操作:  準則 2.2 時間充分: 給用戶足夠時間閱讀並使用內容
  • 44. WCAG 2.0 準則 44 • 原則 2 可操作:  準則 2.3 癲癇: 不以會誘發癲癇的方式設計內容
  • 45. WCAG 2.0 準則 45 • 原則 2 可操作:  準則 2.4 可導覽: 提供幫助用戶瀏覽、找尋內容、確 定自身位置的方法
  • 46. WCAG 2.0 準則 46 • 原則 3 易理解:  準則 3.1 可讀: 文字訊息需可讀並易理解
  • 47. WCAG 2.0 準則 47 • 原則 3 易理解:  準則 3.2 可預測: 網頁的呈現與操作需可預測
  • 48. WCAG 2.0 準則 48 • 原則 3 易理解:  準則 3.3 輸入協助: 協助用戶避免並更正錯誤
  • 49. WCAG 2.0 準則 49 • 原則 4 強固:  準則 4.1 相容性: 對當前與未來的用戶代理與輔助科 技提供最大相容性
  • 51. 台灣無障礙網頁標章 51 • 由此下載
  • 52. 標準啊 標準 52 Copyright W3C, All rights reserved, see http://www.w3.org/WAI/intro/components.php
  • 53. 給用戶代理的額外訊息 53 • <meta> <link> • Media Type • Open Graph (Facebook) 與 Twitter Cards • HTML5 tags (nav, article, section, aside, …) • Microformats
  • 54. 網頁 54 CSS HTML DOM Render Tree Tree Display http://taligarsiel.com/Projects/howbrowserswork1.htm
  • 55. 網頁應用程式 55 CSS HTML DOM Render Tree Tree Display JS User Input http://taligarsiel.com/Projects/howbrowserswork1.htm
  • 56. WAI-ARIA 56  所有元素可有 tabindex 屬性,便於鍵 盤導覽  以 role 等屬性,描述元件功能與狀態
  • 57. WAI-ARIA Roles 57  article  banner  complementary  main  navigation  scrollbar  search …
  • 58. WAI-ARIA scrollbar 58  aria-controls  aria-orientation [vertical|horizontal]  aria-valuemax  aria-valuemin  aria-valuenow
  • 59. 網頁親和力檢測工具 59 • 線上 • ATRC • WAVE • 單機 • CSE HTML Validator • FreeGo • SortSite • 線上 + 單機 • Truwex Online 2.0 • Total Validator 網頁親和力 p. 14-36
  • 60. 現實案例 : 連結與格式的考量 60  Dropbox  Slideshare  下載  http://tinyurl.com/afl38x4
  • 61. 現實案例 : 用戶代理的能力 61  lynx  純文字  不支援 js  NonVisual Desktop Access (NVDA)  附加於桌面系統
  • 62. 內容限制 62 • 科技日新月異 • 標準每天在改 • 體貼的心 沒有極限
  • 63. 參考資料與授權 63  本投影片內容除非特別聲明,皆以 CC-BY-SA 3.0 , 或其後繼條款授權; 引用資料在與該條款不相容的前提下,以原始資料 授權為準。 • 篇章 • 標準 by othree • 單位
  • 64. 64