Web Accessibility - BarCamp Bangkok 2008

26 มกราคม 2551

Web Accessibility - Poakpong Phongsasanongkul - BarCamp Bangkok 2008

ปกปอง พงศาสนองกุลPOAKPONG PHONGSASANONGKUL


ปกปอง.คอมPOAKPONG.COM

prachatai.com


การสรางเว็บให∙ุกคนเขาถึง

Web Accessibility

❖ การนำเสนอครั้งนี้ มุงเนนไป∙ี่การเขาถึงขอมูล

สำหรับคน∙ี่มีอุปสรรคในการมองเห็นเปนหลัก


∙ำไมตอง∙ุกคนเขาถึง?

๏ เพิ่มสิ∙ธิ ในการเขาถึงขอมูลขาวสารใหกับ∙ุกคน๏ ∙ำเว็บตามแนว∙างสากล๏ ∙ำตามบ∙บัญญัติของรัฐธรรมนูญ


เว็บใดบาง∙ี่ตองให∙ุกคนเขาถึง?

๏ เว็บของหนวยงานราชการ๏ เว็บองคกรเอกชน๏ เว็บขาวสาร/ความรู๏ เว็บสวนบุคคล/เว็บบล็อก


ใครเกี่ยวของบาง?

๏ คนพัฒนาเว็บDesigner, Developer, Webmaster

๏ คนเพิ่มขอมูลเขาสูเว็บEditor, Reporter, Blogger, User


หลักเบื้องตน สำหรับการพัฒนาเว็บ

๏ โครงสรางเว็บตองเปนไปตามมาตรฐาน HTML, XHTML๏ กำหนดภาษา∙ี่ ใช ในเว็บ (th, en)๏ สรางชื่อของหนาเว็บ <title>๏ สามารถเขาสูเนื้อหาไดงาย <a href=“#story”>๏ ความสัมพันธระหวางขอความกับ Tag ∙ี่ ใช

<h1>, <h2>, <ol>, <ul>, <li>, <p>


หลักเบื้องตน สำหรับการพัฒนาเว็บ (ตอ)

๏ ใสปายกำกับใหแบบฟอรม <label>๏ เรียงลำดับความสำคัญของเนื้อหา๏ การใชเฟรมตองมีคำอธิบาย๏ สรางชอง∙างการควบคุมผานคียบอรด <access key>๏ ไม∙ำการเปลี่ยนแปลงเนื้อหาแบบอัตโนมัติ

(auto refresh)


หลักเบื้องตน สำหรับการเพิ่มขอมูลเขาสูเว็บ

๏ ความสัมพันธระหวางขอความกับ Tag ∙ี่ ใช

<strong>, <em>, <ins>, <del>, <address>๏ เลือกใชสีตัวอักษรและพื้นหลัง∙ี่มองเห็นไดชัดเจน๏ ตัวอักษรควรเปนตัวอักษร๏ รูปภาพตองมีคำอธิบาย <alt>๏ ไฟลมัลติมีเดียตองมีคำอธิบาย๏ หลีกเลี่ยงการใช ไฟลอนิเมชั่น (.gif)


เครื่องมือในการ∙ำเว็บ∙ี่∙ุกคนเขาถึง

๏ เครื่องมือในการสราง Web Standards

HTML 4.0, XML 1.0, XHTML 1.0-1.1, CSS, DOM


Web Standards และ Web Accessibility

๏ Web Standards = แสดงผลได∙ุกเบราเซอร๏ Web Accessibility = Web Standards + ∙ุกคนเขาถึง


ประโยชน∙ี่ ได

๏ ∙ุกคนเขาถึงขอมูลขาวสาร๏ ชวยใหเนื้อหาในเว็บ คนหาไดงาย

(Search engine optimization)


การตรวจสอบระดับการเขาถึง

๏ http://validator.w3.org๏ http://astec.nectec.or.th/web_check๏ http://wave.webaim.org๏ http://checker.atrc.utoronto.ca


http://wave.webaim.org

http://wave.webaim.org

ดูเพิ่ม

๏ ภาษาไ∙ย๏ 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


องคกร∙ี่เกี่ยวของ ในประเ∙ศไ∙ย

๏ ศูนยวิจัยและพัฒนาเ∙คโนโลยีสิ่งอำนวยความสะดวกสำหรับคนพิการ

(http://astec.nectec.or.th)๏ สถาบันคนตาบอดแหงชาติเพื่อการวิจัยและพัฒนา

(http://www.tabod.net/?show=content&c=2)


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


ขอบคุณครับ

Thank you

C b


Technology

Web Accessibility - BarCamp Bangkok 2008