Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
打造網站親和力
- 4. 無法正常使⽤用滑⿏鼠 reference: About Application Software Accessibility 滑⿏鼠壞了 操作困難 4
- 8. 視障⼈人⼠士(盲⼈人) 使⽤用 螢幕閱讀器 瀏覽網站 OSX: VoiceOver Windows: NVDA、JAWS 迷思： 視障⼈人⼠士不使⽤用網站 許多⼈人認為⾝身障⼈人⼠士不使⽤用網站。事實上，情況完全相反 很多⾝身障⼈人⼠士和健全⼈人⼠士⼀一樣經常使⽤用網站，在網上購物 和進⾏行社交活動，令他們更能獨⽴立地⽣生活。 Reference: 政府資訊科技總監辦公室 - 無障礙網⾴頁⼿手冊 8
- 16. 16 台灣 2014 年⾝身障⼈人⼝口分佈 32% 5% 9% 10% 11% 33% 肢體 聽障 多重障礙者 智能障礙 視障 其他
- 18. WCAG 2.0 全⽂文：Web Content Accessibility Guidelines 中⽂文：無障礙網⾴頁內容指南 W3C 為推動更多網站採⽤用無障礙設計，所研究跟推⾏行的指南 跟建議，以便⾝身障⼈人⼠士使⽤用。 總共有 61 項準則，並依照重要性分成三個等級 18 Ａ級 ＡＡ級 ＡＡＡ級 基本 建議 典範
- 20. 網⾴頁標題 (A) 20 標題要能定義網站內容 <head> <title>痞客邦 PIXNET </title> </head>
- 21. 我是分隔線 ! Image tag 加上 alt 與 title (A) 21 alt: 當圖⽚片沒有載⼊入時出現的⽂文字。 <img src=“logo.png” alt=“PIXNET logo” title=“點擊回 PIXNET ⾸首⾴頁”> 裝飾性或無意義的圖⽚片，alt 要空字串。不需要提⽰示使⽤用者 無圖⽚片時 無圖⽚片時
- 22. 影⽚片DEMO 22 title: 滑⿏鼠移過去會出現的⽂文字 alt: 搜尋引擎在搜尋圖⽚片時，會尋找 alt 內⽂文字。 ! 螢幕閱讀器所朗讀，代表圖⽚片的⽂文字。需要簡單明瞭
- 23. 規劃好 tab 的移動順序 (A) 23 <form> <label for="name">Name</label> <input type="text" id="name" tabindex="1"> <input type="submit" id="submitform" tabindex="2" value="Submit"> </form> 1 2 撰寫好的 HTML 架構 可使⽤用 tabindex 確保閱讀器有良好瀏覽順序
- 24. Font Size (AA) 24 使⽤用 relative size (em 或 rem)，讓使⽤用者依照喜好調整 size ⼤大⼩小
- 25. 跳⾄至內容(A) 放上直接 “跳⾄至內容” 的按鈕，直接閱讀該⾴頁⾯面的重點 - 可隱藏，只要按鈕可 focus, 閱讀器 就可讀到 25
- 28. Role 定義 HTML Component ⾓角⾊色， 給予使⽤用螢幕閱讀器的使⽤用者了解原件的操作跟作⽤用 [影⽚片 DEMO] WAI-ARIA 28 Web Accessibility Initiative's Accessible Rich Internet Applications
- 30. 了解⾃自⼰己網站的親和⼒力 - webaim 列出不符合親和⼒力的錯誤、警告跟解決辦法 例：image tag 沒有加上 alt ⽂文字 解析畫⾯面的結構，確保是否是合理的 HTML 結構 例：標出畫⾯面上有多少 h2 tag，跟⽤用多少 list element ! DEMO: http://wave.webaim.org/report#/www.pixnet.net 30
- 31. 檢視親和⼒力 Validator by W3C：檢視是否為 valid HTML markup 親和⼒力網站 的 check list - A11Y project or Cameron Moll [pdf] 檢查顏⾊色對⽐比 - Contract A orVischeck 使⽤用螢幕閱讀器閱讀網站 31
- 32. 優秀的親和⼒力網站 TED: 網站顏⾊色對⽐比⾼高，內容清楚 影⽚片附字幕，操作簡單 網站 markup 均有標⽰示 ARIA 跟 alt Mozilla Taiwan 鍵盤操作簡單，按 tab 可輕易瀏覽網站 Font Size 採⽤用 relative size， 可依照設定調整⼤大⼩小 32
- 33. REFERENCES ⾹香港政府資訊科技總監辦公室 - 無障礙網⾴頁 在 30 天內打造更具親和⼒力的網站 嫁給RD的 UI Designer - ⾊色盲者使⽤用的配⾊色檢測法 O3noBLOG - 在盲⼈人之前的親和⼒力 WebAIM.org - WebAIM's WCAG 2.0 Checklist Web Accessibility 介紹影⽚片 by Department of Social Services 網站親和⼒力 - 台灣第⼀一本《網⾴頁親和⼒力》專書的部落格 如何設計好網站 Don’t make me think - Steve Krug 33
- 34. 34 THANKYOU