無障礙、好用、 ajax
DESCRIPTION
網頁設計原則、良心TRANSCRIPT
Accessibility, Usability, n AJAX
josephj /蔣定宇
無障礙、好用、 AJAX
Hi! 我是 Joseph（啊嗚）
YDN Evangelist
跑步環島 2008.5.18，屏東楓港
http://[email protected]
twitter: josephj6802
YDN 創新科技推廣工程師
Agenda
1. About
2. Accessibility
3. Usability
4. Act Now
5. Conclusion
1. About為什麼要講此主題？
我的職稱依然是前端工程師（F2E）
2005/10/17 till now
視覺設計師 前端工程師圖：png / gif 網頁：html + js + css
啥是前端工程師？
usability, internationalization, localization, visual design,
accessibility, information architecture, security, build processes, performance,
benchmarking, devices, portability
usability, internationalization, localization, visual design,
accessibility, information architecture, security, build processes, performance,
benchmarking, devices, portability
身為前端工程師要考量的事情
我的實際工作是YDN Evangelist
2008/6 till now
2008/7 到 UK 參加 YDN International Summit
http://www.flickr.com/photos/phploveme/2675997575/in/set-72157606174033384/
緣份 1：沒有螢幕的工程師
Artur Ortega
• 有空會幫忙做 User Testing
• 軟體工程師
• 英國對 Accessibility 很棒
部落格對於 Artur 的部份迴響很多
推薦數居然快比跑步環島還高了 :p
• 網友 Ated
在公司，不管我怎麼說，就是沒有辦法說服他
們重視障礙朋友的上網權。
他們的理由都是，這些人只是一小部份的使用
者，不用去管。
尤其是購物網站，如果能夠讓障礙人士更輕鬆
方便的購物，是不是就能夠為這些真的外出不
方便的人們提供更好的生活方式？網站經營者
應該要能夠為使用者想更多，而不是排擠使用
者。
• 網友 chph
看到知識+ 的圖片，想請教格主，是否現在台
灣雅虎都不重視 No Script 了？
當我關閉 js，進入任一知識團首頁，最新收藏
知識、最新發表文章等等，按下更多後就只見
一個資料讀取中... 的圖片停在頁面中不為所動
了、無法取得更多資料。
這樣的作法讓我蠻失望的，像 YUI 本身採取非
侵入式 js 開發，使用範例也都有考慮到優雅降
級。
• 網友 Joshua
我之前在拍盲人的紀錄片。
就訪談過很多盲人。
其實他們都很好學，電腦也能幫助他們很多。
特別是在跟下一代的溝通上。
希望 Yahoo 可以加油。
照顧這群。這就是大公益阿。
緣份 2：Accessibility Hack Day
YDN EvangelistChristian Heilmann
Accessibility Hack Day
9/19 一群被各種限制阻擋無法正常使用 Web 的使用者講出他們的窘境。
9/20 參與的 Hacker 基於解決這些 User 的不便、做出實用的作品。
＠London，Held by Christian Heilmann
http://scriptingenabled.org/
緣份 3：Adobe Accessibility Engineer
Matt Mayhttp://adobe.com/accessibility/
一切都是緣
• 8/21 工程師的 Tech Talk
• 8/28 網站企劃的 Product Forum
• 8/27 熱烈討論無障礙科技協會
• 事情剛好湊在一起讓工程端與產品端對無障礙產生興趣
2. Accessibility發揮博愛的精神，接受每個人
不管任何人在任何情況下
你的網頁都應該是可存取的
Accessibility means that your pages remain accessible to anyone, under all circumstances, especially when the user suffers from a condition she cannot change, for instance diminished eyesight, or has a browser that does not support (sufficient) JavaScript
PPK on JavaScript
深入親和力Dive Into Accessibility
http://dia.z6i.org
社會中有許多這樣的人
你有想到他們嗎？
• Jackie 因車禍失明，但喜歡學習、廣泛閱讀。線上購物對他很方便。他使用最新版的 JAWS：一套在 Windows/IE 的螢幕朗讀軟體，在網路上購買有聲書。
• Michael 是色盲，所有的衣服都標上字母來區分。二手遊戲機台、利用網路買賣，但家裡只有 56K 撥接，所以利用 Links 的純文字瀏覽器。也會利用 Opera 來關閉圖片。橫向的紅綠燈位置不一定。
• Bill 因為越戰，右手臂沒辦法移動、左手會不自主擺動。退役後用他妹妹送的 Red Hat + Mozilla 電腦上網跟朋友聊天，甚至還製作了論壇。他幾乎沒辦法使用滑鼠，只能用方向鍵與 Tab 瀏覽網頁。
• Lilian 從香港移民到美國、擔任大電信公司的行政助理：使用 IE，但公司規定不能使用 Java、JavaScript、ActiveX 以及 Flash。另外他的英文不好，總喜歡把字型放到最大以方便閱讀，他一直很困惑為
什麼 CNN.com 的字型沒有辦法放大。
• Marcus 因父母吸毒，天生視盲，在 AT&T 轉譯中心工作（專門服務聽障的服務），聽障人士會用鍵盤輸入，Marcus 會立刻在他的布拉格點字器收到，唸給另一方聽，而另一方講了任何話，Marcus 都會以神速回給聽障人士。讀網頁的方式：用純文字瀏覽器 Lynx 配合布拉格點字、一次讀一列。
2.1：考慮沒有 JS 特效的情況
JS 特效很炫，但可能會不 Work
• 瀏覽器支援度• 連線下載問題• 使用者關閉• 安全性考量• 速度考量
• Error 終止執行
守則一：製作沒有 JS 的配套措施
• 首先避免以下的想法：• 此網站只考慮有 JS 的情況
• 誰叫使用者要把 JS 關掉
• 製作每一階段請關掉 JS 測試：
• IE：Web Accessibility Toolbarhttp://www.visionaustralia.org.au/info.aspx?page=1569
• FF：Web Developer Extensionhttps://addons.mozilla.org/en-US/firefox/addon/60
Accessibility 很棒（Usability 並不好）
至少也需要做到提示
<script>function formSubmit() { var f = this; f[‘date’].value = f[‘year’].value + ‘/’ + f[‘month’].value + ‘/’ + f[‘day’].value;}</script> <form onSubmit=”formSubmit”> 年：<select name=”year”>...</select> 月：<select name=”month”>...</select> 日：<select name=”day”>...</select> <input type=”hidden” name=”date”></form>
JavaScript 的濫用：
不管 Accessibility 或 Maintenance 都是問題
2.2：考慮沒有滑鼠的情形
不使用滑鼠的族群
• 視障者• 快速鍵愛好者• 手部的殘缺或疾病
RD 們滑鼠不要用太多啊
腱鞘囊腫
守則二：增強鍵盤支援
• 增加 tabindex 屬性
• 增加 accesskey 屬性
• 自訂鍵盤快速鍵• 採用有鍵盤控制的函式庫• YUI TabView（頁籤組）控制項
• YUI Menu（選單）控制項
Google Calendar 的鍵盤快速鍵
Yahoo! Mail 的鍵盤快速鍵
採用有鍵盤控制的 Library
YUI Menu（選單）控制項
YUI Tabview（頁籤組）控制項
採用有鍵盤控制的 Library
無名相簿：按下哪個鍵換到下張圖？
以 JavaScript 做快速鍵
揪甘心ㄝ！
2.3：Screen Reader 是啥？
Screen Reader：螢幕報讀系統
• 用於重度視障• 台灣主要 Screen Reader 軟體
http://blog.yam.com/twacc/article/10271539
• 導盲鼠系統• 大眼睛系統• 中文 JAWS 系統
• 多與點陣系統配合
視障使用者如何瀏覽網頁
• 用標題列表瞭解整份文件的結構
• 若有有興趣的標題就將游標移到該標題
• 接著就可移動讀取內文
http://tw.youtube.com/watch?v=AmUPhEVWu_E
守則三：正確的HTML標籤• 標題• <font size=”6”>大且粗的字</font>
• <titile>Yahoo!奇摩輸入法教學</title>
• <h1>Yahoo!奇摩輸入法教學</h1>
• <h2>軟體安裝</h2>
• <h3>安裝在 Mac 上</h3>
• <h2>使用快速鍵</h2>
守則三：正確的HTML標籤
• 圖片• 所有的圖片皆須提供圖說屬性：alt
• 精確地提供圖片的內容• 廣告• <img src=”...” alt=”廣告：免費學會建築室內設計的課程申請”>
附錄：前端工程師
為 Accessibility 做了什麼？
TabView 在沒有 JavaScript 的支援
圖片在 No Image、Not Loaded 的處理
字型大小放大數倍後仍維持完美
<link rel="stylesheet" type="text/css" href=".../i8/ykp_qack_min_20080707.css" media="screen">
不同的設備製作不同的樣式表：Screen
<link rel="stylesheet" type="text/css" href=".../i8/ykp_print_min_20080707.css" media="print">
不同的設備製作不同的樣式表：Print
15 種不同瀏覽器與系統的相容性
做了這麼多工
但是一般人能看到的還是只有表面
別忘了給予辛苦的 F2E 掌聲
3. Usability一切攏是為了 User 啊
User Testing Lab試圖瞭解使用者需求，讓網站更好用
Usability
• = User Ability
• = 易用性
• 基本：符合使用者習慣• 進階：更方便、甚至創新
AJAX & Usability網頁進化論
在 AJAX 變得熱門之前
• 所有動作都必須換頁• Refresh Page 以取得資料
• JavaScript 的角色
• 表單驗證• 小動畫
AJAX means loading information and updating an interface partially.
- Christian Heilmann, Again with Accessibility
• 不需要換頁 ＝ 對使用者干擾較少
• 僅需抓取少量資料 ＝ 減少等待時間
對 Usability 有很大的幫助：
Awesome AJAX!
•「AJAX 真棒！」
•「將所有功能都 AJAX 化！」
•「把服務做得跟應用程式一樣！」•「Usability 將大幅增進！」
•「做這些是為了 User 好！」
開發者燃燒起小宇宙：
Danger!Don’t build your website based on assumption!
Why Danger?
• 將散落各地的文件透過連結串連• 並沒有考慮到會發展成應用程式
W3C Team DirectorTim Berners-Lee
The World Wide Web (W3) initiative links related information throughout the globe. HTML provides one simple format for providing linked information, and all W3 compatible programs are required to be capable of handling HTML.
上一頁、下一頁
Back Button
網址不改變，無法加入最愛
Bookmark
如何讓使用者得知
內容已更新？
Inform the User
上述基本功能無法使用：不符合 Accessibility
Accessibility
Usability造成使用者不習慣，當然更不符合 Usability
進化？還是退化？
幸好有 YUI Browser History Manager
點選下方的資料會更新
更新內容離頂端過遠，用傳統作法會讓使用者不便且個人資料較少 SEO 的問題因此決定採用 AJAX
一般的 AJAX 程式網址不會更新
多了這一串，可以回到上一頁或把此網址加入最愛但還是維持下面的狀態
王子和公主
從此過著幸福快樂的生活？
NO!
• SEO 搜尋引擎最佳化不易
•前端效能問題程式複雜度加倍
•所需時間增加兩到三倍• User 真的喜歡嗎？
一路上還會碰到的魔王
Usability 與 Accessibility 是一體兩面沒有 Accessibility、就沒有 Usability
Suggestions?How to make a wise choice?
將網頁類型一切為二
• Thin Client
• JavaScript 較少，以傳統的換頁為主要互動
• Fat Client
• 大量 JavaScript，盡可能地將所有互動都做在目前頁面上
Thin Client
• 適合用於內容為主的頁面：• 搜尋結果、K+ 問題頁、Yahoo! 大部分的頁面。
• JavaScript 增加貼心的小功能，主要內容資料的取得仍以換頁為主。
• 不管在 Usability 或 Accessibility 都較不會出錯。
Fat Client
• 適合用於應用程式等個人化頁面：• Yahoo! 電子郵件
• Editor、Flickr Organizer...
• JavaScript 大且複雜
• 需要特別解決 Accessibility 問題。
• User Research、符合使用需求。
• 大多是新的使用行為，要不斷地嘗試做小功能的改進，才能符合 Usability。
Idea後端工程師 與 前端工程師 更容易地套版面
•RD 只吐 JSONF2E 負責套版、不需會 PHP
• 類似 XML DataIsland 的概念
• 更好的解法： SIMILE Exhibt Probject
SIMILE Exhibit ProjectJSON data
Javascript API
Data Schema
• 想法很好，但是考量到前面的問題Yahoo! 大部分的頁面並不適合這樣做。
• 不過類似的構想已經使用在 YAP Small View 的 YML （Yahoo! Markup Language）中、以提供外部開發者更豐富的 Interface。
4. Act Now我可以對 Accessibility 做什麼奉獻
驚!
或許製作的人是最需要去上課的
Audio Captcha：讓視障可以使用
Audio Captcha：讓視障可以使用
Hacking for Good!
Easy YouTube
OffScreen：讓視障也可存取 Flash 介面
問題：盲人無法存取 Flash Video Player
利用 CSS 將按鈕隱藏起來
Accessibility in Yahoo! MessengerYahoo! Accessibility Program Manager ,Victor Tsaranhttp://video.yahoo.com/watch/329037/2145363
修改一下讓按鈕顯示
OffScreen：讓視障也可存取 Flash 介面
原來 <button> 按鈕是存在於頁面上的
Accessibility in Yahoo! MessengerYahoo! Accessibility Program Manager ,Victor Tsaranhttp://video.yahoo.com/watch/329037/2145363
Accessibility 討論區？一個無障礙空間
讓有需要的人討論 Yahoo!奇摩的網站有什麼要改進的地方
遵守 Y! Accessibility Guidelines • 字與背景的明顯對比• 使用標題：
<title/>, <h1/>~</h6/>
• 使用有意義、非裝飾性的 HTML 標籤
• 所有的外觀以 CSS 定義
• 字體大小在各瀏覽器要可自由縮放
• 所有的連結、表單、功能在沒有滑鼠時都可用
• 每張圖片 <img/> 都要有 alt 的說明欄位
• 每個表單欄位都要有 <label/> 對應
• <table/> 內的輔助屬性：summary、scope、 id、headers、summary
• JS 的處理：
• 沒有 JS 也可用
• 需支援鍵盤操作
• 以無障礙支援科技測試http://twiki.corp.yahoo.com/view/Devel/AccessibilityGuidelines
參與「無障礙網路空間」研討會實際地去了解這些人的需求、思考如何在自己的工作中貢獻
5. Conclusion網路是良心事業
Yahoo!奇摩是市占率最高的入口網站。
即使只能造福到 0.1% 的使用者，我們仍應該去做，因為他們才是真正最需要
使用網路的一群人。
我們不做，也沒人會做了
Customer Fixation這是我們的理念之一
Maximize Our Users這是我們應該要做的
It’s up to you to make things better.
- Christian Heilmann, Again with Accessibility
thanks!Any Questions / Feedbacks？