26 มกราคม 2551
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

ปกปอง พงศาสนองกุล
POAKPONG PHONGSASANONGKUL
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

ปกปอง.คอม
POAKPONG.COM
prachatai.com
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

การสรางเว็บให∙ุกคนเขาถึง
Web Accessibility
❖ การนำเสนอครั้งนี้ มุงเนนไป∙ี่การเขาถึงขอมูล
สำหรับคน∙ี่มีอุปสรรคในการมองเห็นเปนหลัก
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

∙ำไมตอง∙ุกคนเขาถึง?
๏ เพิ่มสิ∙ธิ ในการเขาถึงขอมูลขาวสารใหกับ∙ุกคน
๏ ∙ำเว็บตามแนว∙างสากล
๏ ∙ำตามบ∙บัญญัติของรัฐธรรมนูญ
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

เว็บใดบาง∙ี่ตองให∙ุกคนเขาถึง?
๏ เว็บของหนวยงานราชการ
๏ เว็บองคกรเอกชน
๏ เว็บขาวสาร/ความรู
๏ เว็บสวนบุคคล/เว็บบล็อก
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

ใครเกี่ยวของบาง?
๏ คนพัฒนาเว็บ
Designer, Developer, Webmaster
๏ คนเพิ่มขอมูลเขาสูเว็บ
Editor, Reporter, Blogger, User
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

หลักเบื้องตน สำหรับการพัฒนาเว็บ
๏ โครงสรางเว็บตองเปนไปตามมาตรฐาน HTML, XHTML
๏ กำหนดภาษา∙ี่ ใช ในเว็บ (th, en)
๏ สรางชื่อของหนาเว็บ <title>
๏ สามารถเขาสูเนื้อหาไดงาย <a href=“#story”>
๏ ความสัมพันธระหวางขอความกับ Tag ∙ี่ ใช
<h1>, <h2>, <ol>, <ul>, <li>, <p>
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

หลักเบื้องตน สำหรับการพัฒนาเว็บ (ตอ)
๏ ใสปายกำกับใหแบบฟอรม <label>
๏ เรียงลำดับความสำคัญของเนื้อหา
๏ การใชเฟรมตองมีคำอธิบาย
๏ สรางชอง∙างการควบคุมผานคียบอรด <access key>
๏ ไม∙ำการเปลี่ยนแปลงเนื้อหาแบบอัตโนมัติ
(auto refresh)
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

หลักเบื้องตน สำหรับการเพิ่มขอมูลเขาสูเว็บ
๏ ความสัมพันธระหวางขอความกับ Tag ∙ี่ ใช
<strong>, <em>, <ins>, <del>, <address>
๏ เลือกใชสีตัวอักษรและพื้นหลัง∙ี่มองเห็นไดชัดเจน
๏ ตัวอักษรควรเปนตัวอักษร
๏ รูปภาพตองมีคำอธิบาย <alt>
๏ ไฟลมัลติมีเดียตองมีคำอธิบาย
๏ หลีกเลี่ยงการใช ไฟลอนิเมชั่น (.gif)
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

เครื่องมือในการ∙ำเว็บ∙ี่∙ุกคนเขาถึง
๏ เครื่องมือในการสราง Web Standards
HTML 4.0, XML 1.0, XHTML 1.0-1.1, CSS, DOM
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

Web Standards และ Web Accessibility
๏ Web Standards = แสดงผลได∙ุกเบราเซอร
๏ Web Accessibility = Web Standards + ∙ุกคนเขาถึง
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

ประโยชน∙ี่ ได
๏ ∙ุกคนเขาถึงขอมูลขาวสาร
๏ ชวยใหเนื้อหาในเว็บ คนหาไดงาย
(Search engine optimization)
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

การตรวจสอบระดับการเขาถึง
๏ 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

ดูเพิ่ม
๏ ภาษาไ∙ย
๏ 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

องคกร∙ี่เกี่ยวของ ในประเ∙ศไ∙ย
๏ ศูนยวิจัยและพัฒนาเ∙คโนโลยีสิ่งอำนวยความสะดวก
สำหรับคนพิการ
(http://astec.nectec.or.th)
๏ สถาบันคนตาบอดแหงชาติเพื่อการวิจัยและพัฒนา
(http://www.tabod.net/?show=content&c=2)
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

∙ดสอบ (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

∙ดสอบ (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

เอกสารอางอิง
๏ 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

ขอบคุณครับ
Thank you
C b
Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008