Web Accessibility - BarCamp Bangkok 2008

7,332 views

Published on

Web Accessibility

Published in: Technology, Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
7,332
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
93
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Web Accessibility - BarCamp Bangkok 2008

  1. 1. 26 มกราคม 2551 Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  2. 2. ปกปอง พงศาสนองกุล POAKPONG PHONGSASANONGKUL Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  3. 3. ปกปอง.คอม POAKPONG.COM prachatai.com Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  4. 4. การสรางเว็บให∙ุกคนเขาถึง Web Accessibility ❖ การนำเสนอครั้งนี้ มุงเนนไป∙ี่การเขาถึงขอมูล สำหรับคน∙ี่มีอุปสรรคในการมองเห็นเปนหลัก Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  5. 5. ∙ำไมตอง∙ุกคนเขาถึง? ๏ เพิ่มสิ∙ธิ ในการเขาถึงขอมูลขาวสารใหกับ∙ุกคน ๏ ∙ำเว็บตามแนว∙างสากล ๏ ∙ำตามบ∙บัญญัติของรัฐธรรมนูญ Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  6. 6. เว็บใดบาง∙ี่ตองให∙ุกคนเขาถึง? ๏ เว็บของหนวยงานราชการ ๏ เว็บองคกรเอกชน ๏ เว็บขาวสาร/ความรู ๏ เว็บสวนบุคคล/เว็บบล็อก Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  7. 7. ใครเกี่ยวของบาง? ๏ คนพัฒนาเว็บ Designer, Developer, Webmaster ๏ คนเพิ่มขอมูลเขาสูเว็บ Editor, Reporter, Blogger, User Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  8. 8. หลักเบื้องตน สำหรับการพัฒนาเว็บ ๏ โครงสรางเว็บตองเปนไปตามมาตรฐาน HTML, XHTML ๏ กำหนดภาษา∙ี่ ใช ในเว็บ (th, en) ๏ สรางชื่อของหนาเว็บ <title> ๏ สามารถเขาสูเนื้อหาไดงาย <a href=“#story”> ๏ ความสัมพันธระหวางขอความกับ Tag ∙ี่ ใช <h1>, <h2>, <ol>, <ul>, <li>, <p> Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  9. 9. หลักเบื้องตน สำหรับการพัฒนาเว็บ (ตอ) ๏ ใสปายกำกับใหแบบฟอรม <label> ๏ เรียงลำดับความสำคัญของเนื้อหา ๏ การใชเฟรมตองมีคำอธิบาย ๏ สรางชอง∙างการควบคุมผานคียบอรด <access key> ๏ ไม∙ำการเปลี่ยนแปลงเนื้อหาแบบอัตโนมัติ (auto refresh) Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  10. 10. หลักเบื้องตน สำหรับการเพิ่มขอมูลเขาสูเว็บ ๏ ความสัมพันธระหวางขอความกับ Tag ∙ี่ ใช <strong>, <em>, <ins>, <del>, <address> ๏ เลือกใชสีตัวอักษรและพื้นหลัง∙ี่มองเห็นไดชัดเจน ๏ ตัวอักษรควรเปนตัวอักษร ๏ รูปภาพตองมีคำอธิบาย <alt> ๏ ไฟลมัลติมีเดียตองมีคำอธิบาย ๏ หลีกเลี่ยงการใช ไฟลอนิเมชั่น (.gif) Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  11. 11. เครื่องมือในการ∙ำเว็บ∙ี่∙ุกคนเขาถึง ๏ เครื่องมือในการสราง Web Standards HTML 4.0, XML 1.0, XHTML 1.0-1.1, CSS, DOM Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  12. 12. Web Standards และ Web Accessibility ๏ Web Standards = แสดงผลได∙ุกเบราเซอร ๏ Web Accessibility = Web Standards + ∙ุกคนเขาถึง Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  13. 13. ประโยชน∙ี่ ได ๏ ∙ุกคนเขาถึงขอมูลขาวสาร ๏ ชวยใหเนื้อหาในเว็บ คนหาไดงาย (Search engine optimization) Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  14. 14. การตรวจสอบระดับการเขาถึง ๏ http://validator.w3.org ๏ http://astec.nectec.or.th/web_check ๏ http://wave.webaim.org ๏ http://checker.atrc.utoronto.ca Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  15. 15. ดูเพิ่ม ๏ ภาษาไ∙ย ๏ http://www.nectec.or.th/atc/webaccess/ ๏ http://th.wikipedia.org/wiki/Web_accessibility ๏ http://www.thaicss.com/web-standards/ ๏ ภาษาอังกฤษ ๏ http://www.w3.org/TR/WCAG10/ ๏ http://en.wikipedia.org/wiki/Web_accessibility Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  16. 16. องคกร∙ี่เกี่ยวของ ในประเ∙ศไ∙ย ๏ ศูนยวิจัยและพัฒนาเ∙คโนโลยีสิ่งอำนวยความสะดวก สำหรับคนพิการ (http://astec.nectec.or.th) ๏ สถาบันคนตาบอดแหงชาติเพื่อการวิจัยและพัฒนา (http://www.tabod.net/?show=content&c=2) Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  17. 17. ∙ดสอบ (Markup Validation Service by W3C) website Result http://www.thaigov.go.th/index.aspx 145 Errors http://www.parliament.go.th/main.php 188 Errors http://www.blognone.com 63 Errors http://www.matichon.co.th/ 610 Errors http://www.manager.co.th/home/default.html 1079 Errors http://www.bangkokbiznews.com/2008/01/26/ Can not be checked • ขอสังเกตจากผล∙ี่ ได เว็บ∙ี่ ใช cms ∙ี่เปน∙ี่นิยาม∙ั่วไป เชน drupal จะผาน Web Standards งายกวาเว็บ∙ี่เขียน cms ใชเอง Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  18. 18. ∙ดสอบ (Markup Validation Service by W3C) website Result http://www.sanook.com 33 Errors http://www.kapook.com Passed validation http://www.mthai.com 69 Errors http://www.teenee.com/main/index.html 694 Errors http://www.dek-d.com 710 Errors http://www.narak.com Passed validation • ขอสังเกตจากผล∙ี่ ได การ∙ดสอบ Web Standards ไม่ ได้ระบุแน่ชัดว่าเว็บนั้นผ่าน Web Accessibility เป็นเพียงการ∙ดสอบเบื้องต้นเ∙่านั้น Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  19. 19. เอกสารอางอิง ๏ http://astec.nectec.or.th/document/20070801- webaccessible/05-namnueng.pdf ๏ http://astec.nectec.or.th/webaccess/doc/evaluate- web.pdf ๏ http://www.nectec.or.th/atc/webaccess/ Intro_Web_Accessibility.php Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008
  20. 20. ขอบคุณครับ Thank you C b Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

×