Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
網站改版案
Next
Download to read offline and view in fullscreen.

2

Share

Download to read offline

無障礙網頁

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

無障礙網頁

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

    May. 21, 2014
  • bradycheng

    Dec. 5, 2012

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

Views

Total views

951

On Slideshare

0

From embeds

0

Number of embeds

61

Actions

Downloads

12

Shares

0

Comments

0

Likes

2

×