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.

Web Accessibility - BarCamp Bangkok 2008

0 views

Published on

Web Accessibility

Published in: Technology, Design

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

×