無障礙網頁
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

無障礙網頁

on

  • 602 views

20121206 交大講稿,還請各位不吝指正,以免誤人子弟。 ...

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

Statistics

Views

Total Views
602
Views on SlideShare
557
Embed Views
45

Actions

Likes
2
Downloads
10
Comments
0

2 Embeds 45

http://blog.clifflu.net 44
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

無障礙網頁 Presentation Transcript

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