Web Content Accessibility Guidelines 2.0 (WCAG 2.0) & TWCAG 2008

1. Web Content Accessibility Guidelines 2.0 (WCAG 2.0)&TWCAG 2008 โดยสว่าง ศรีสม องค์การคนพิการสากลประจำภูมิภาคเอเชีย-แปซิฟิก

2. Background of WCAG 2.0 • ตุลาคม พ.ศ. 2537 ทิม เบอร์เนอร์ก่อตั้งองค์การWorld Wide Web Consortium (W3C) • พ.ศ. 2540W3C ออกแนวทางการทำเว็บที่ทุกคนเข้าถึง หรือ Web Accessibility Initiative (WAI) • พ.ศ. 2541 W3C ออกมาตรฐานการทำเว็บที่ทุกคนเข้าถึงได้ หรือ Web Content Accessibility Guidelines Version 1.0 (WCAG 1.0) • พ.ศ.2548 W3C ระดมผู้เชี่ยวชาญด้านเทคโนโลยีสิ่งอำนวยความสะดวก รวมทั้งคนพิการที่ทำงานเกี่ยวข้องเพื่อปรับปรุงแนวทางและมาตรฐาน WCAG 1.0 จนกระทั่งเป็น WCAG 2.0 ในปัจจุบัน

3. TWCAG 2008 • พ.ศ.2550 กระทรวงเทคโนโลยีสารสนเทศและการสื่อสารได้ดำเนินการจัดทำแผนพัฒนาสังคมแห่งความเท่าเทียมด้วย ICT พ.ศ.2551-2553 • มาตรฐาน TWCAG 2008 (Thai Web Content Accessibility Guide 2008) เป็นมาตรฐานที่กำหนดแนวทางการพัฒนาหน้าเว็บไซต์ที่ทุกคนเข้าถึง อ้างอิงจากมาตรฐานสากล WCAG 2.0

4. หลักการของ TWCAG 2008 • สามารถรับรู้ได้ ผู้ใช้สามารถรับรู้เนื้อหาและชิ้นส่วนหน้าจอได้ • สามารถใช้งานได้ ผู้ใช้สามารถใช้งานชิ้นส่วนหน้าจอที่ควบคุมการทำงานเพื่อเข้าถึงเนื้อหาและหน้าเว็บไซต์ได้ • สามารถเข้าใจได้ ผู้ใช้เข้าใจความหมาย วัตถุประสงค์และหน้าที่ของชิ้นส่วนหน้าเว็บไซต์ได้ • รองรับเทคโนโลยี รองรับกับเทคโนโลยีทั่วไป เทคโนโลยีอำนวยความสะดวกสำหรับคนพิการและอื่น ๆ ได้ทั้งในปัจจุบันและอนาคต

5. หลักการของ TWCAG 2008 • สามารถรับรู้ได้ ผู้ใช้สามารถรับรู้เนื้อหาและชิ้นส่วนหน้าจอได้ • สามารถใช้งานได้ ผู้ใช้สามารถใช้งานชิ้นส่วนหน้าจอที่ควบคุมการทำงานเพื่อเข้าถึงเนื้อหาและหน้าเว็บไซต์ได้ • สามารถเข้าใจได้ ผู้ใช้เข้าใจความหมาย วัตถุประสงค์และหน้าที่ของชิ้นส่วนหน้าเว็บไซต์ได้ • รองรับเทคโนโลยี รองรับกับเทคโนโลยีทั่วไป เทคโนโลยีอำนวยความสะดวกสำหรับคนพิการและอื่น ๆ ได้ทั้งในปัจจุบันและอนาคต

6. เกณฑ์ความสำเร็จ (Success Criteria) • ระดับ A ต้องสามารถทำได้ตามเกณฑ์ความสำเร็จในระดับ A ทุกข้อ • ระดับ AA ต้องสามารถทำได้ตามเกณฑ์ความสำเร็จในระดับ A ทุกข้อ ต้องสามารถทำได้ตามเกณฑ์ความสำเร็จในระดับ AA ทุกข้อ • ระดับ AAA ต้องสามารถทำได้ตามเกณฑ์ความสำเร็จในระดับ A ทุกข้อ ต้องสามารถทำได้ตามเกณฑ์ความสำเร็จในระดับ AA ทุกข้อ ต้องสามารถทำได้ตามเกณฑ์ความสำเร็จในระดับ AAA ทุกข้อ

7. ความหมายของเกณฑ์ความสำเร็จความหมายของเกณฑ์ความสำเร็จ • ระดับ A เป็นเกณฑ์ที่ผู้พัฒนาเว็บไซต์ ต้อง ปฏิบัติตามเพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ • ระดับ AA เป็นเกณฑ์ระดับสำคัญรองลงมาที่ผู้พัฒนาเว็บไซต์ ควรจะ ปฏิบัติตามเพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ง่ายขึ้น • ระดับ AAA เป็นเกณฑ์ที่ผู้พัฒนาเว็บไซต์ อาจจะ ปฏิบัติตามเพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ง่ายที่สุด

8. หลักการของ TWCAG 2008 หลักการที่ 1 – ผู้อ่านต้องสามารถรับรู้เนื้อหาได้ • แนวทางที่ 1.1 - จัดเตรียมข้อมูลที่เป็นข้อความ (Text) แทน เนื้อหาที่มีรูปแบบเป็นอื่น • แนวทางที่ 1.2 - จัดเตรียมข้อความบรรยายที่ตรงกับเหตุการณ์ในสื่อมัลติมีเดีย • แนวทางที่ 1.3 - การออกแบบโครงสร้าง และเนื้อหา ต้องสามารถทำงานเป็นอิสระจากกันและกัน • แนวทางที่ 1.4 – ต้องมั่นใจได้ว่าพื้นหน้าและพื้นหลัง (สีและเสียง) ต้องมีความแตกต่างกันมากพอที่ผู้ใช้จะสามารถแยกแยะได้

9. หลักการของ TWCAG 2008 หลักการที่ 2 - องค์ประกอบต่าง ๆ ของการอินเตอร์เฟสกับเนื้อหาจะต้องใช้งานได้ • แนวทางที่ 2.1 - การทำงานทุกอย่างต้องรองรับการใช้งานจากคีย์บอร์ดได้ • แนวทางที่ 2.2 - จัดเตรียมเวลาให้เพียงพอในการอ่าน หรือการกระทำใดๆ ของข้อมูล สำหรับผู้ใช้ • แนวทางที่ 2.3 - ไม่สร้างเนื้อหาที่อาจเป็นสาเหตุของอาการลมชัก • แนวทางที่ 2.4 - จัดเตรียมทางช่วยเหลือสำหรับผู้ใช้ในการสืบค้นเนื้อหา รู้ว่าตัวเองอยู่ในตำแหน่งใดในเนื้อหา และท่องไปในเนื้อหานั้นได้

10. หลักการของ TWCAG 2008 หลักการที่ 3 - ผู้ใช้สามารถเข้าใจเนื้อหา และส่วนควบคุมการทำงานต่างๆ ได้ • แนวทางที่ 3.1 - สร้างเนื้อหาให้สามารถอ่านและเข้าใจได้ • แนวทางที่ 3.2 - การทำงานของระบบต่างๆ หรือการแสดงผลบนหน้าเว็บ ต้องเป็นสิ่งที่ผู้ใช้สามารถคาดเดาได้ • แนวทางที่ 3.3 - จัดเตรียมส่วนการช่วยเหลือให้ผู้ใช้ให้สามารถกรอกข้อมูลได้ถูกต้อง

11. หลักการของ TWCAG 2008 หลักการที่ 4 - เนื้อหาต้องมีความยืดหยุ่นที่จะทำงานกับเทคโนโลยีเว็บในปัจจุบันและอนาคตได้ (รวมถึงเทคโนโลยีสิ่งอำนวยความสะดวก) • แนวทางที่ 4.1 - รองรับการใช้งานร่วมกับ User Agent ได้ทั้งในปัจจุบัน และอนาคต (รวมถึงเทคโนโลยีสิ่งอำนวยความสะดวก)

12. แนวทางที่ 1.1 - จัดเตรียมข้อมูลที่เป็นข้อความ (Text) แทน เนื้อหาที่มีรูปแบบเป็นอื่น รูปภาพ: รูปภาพต้องมีคำอธิบายภาพ (alternative text) ตัวอย่างที่ผิด <p><img src=“somewhere/dog.jpg” width=“200” />…</p> ตัวอย่างที่ถูก <p><img src=“somewhere/dog.jpg” alt=“หมาน้อยสีขาวน่ารัก” />…</p>

13. แนวทางที่ 1.1 - จัดเตรียมข้อมูลที่เป็นข้อความ (Text) แทน เนื้อหาที่มีรูปแบบเป็นอื่น - ต่อ Controls, Input: ฟอร์มอินพุทต่าง ๆ ต้องใช้ชื่อที่สื่อความหมายและวัตถุประสงค์ ตัวอย่างที่ผิด <p><label for=“input1”>การศึกษา</label> <input type=“text” name=“input1” id=“input1” /></p> ตัวอย่างที่ถูก <p><label for=“education”>การศึกษา</label> <input type=“text” name=“education” id=“education” /></p>

14. แนวทางที่ 1.1 - จัดเตรียมข้อมูลที่เป็นข้อความ (Text) แทน เนื้อหาที่มีรูปแบบเป็นอื่น - ต่อ CAPTCHA: ภาพอักขระเพื่อยืนยันว่าการดำเนินกิจกรรมบางอย่างบนหน้าเว็บเป็นการกระทำโดยมนุษย์ ไม่ใช่โปรแกรมคอมพิวเตอร์ ตัวอย่าง จาก http://www.captcha.net/

15. แนวทางที่ 1.3 - การออกแบบโครงสร้าง และเนื้อหา ต้องสามารถทำงานเป็นอิสระจากกันและกัน Decoration, Formatting, Invisible: วัตถุที่ใช้ในการตกแต่ง ไม่มีความหมายเชิงโครงสร้างหรือเชิงวลีในเอกสาร ตัวอย่างที่ผิด <p><img src=“somewhere/bg_top_coner.jpg” alt=“ภาพพื้นหลังมุมบน” />…</p> ตัวอย่างที่ถูก <p><img src=“somewhere/bg_top_coner.jpg” alt=“” />…</p>

16. แนวทางที่ 1.3 - การออกแบบโครงสร้าง และเนื้อหา ต้องสามารถทำงานเป็นอิสระจากกันและกัน - ต่อ ใช้ CSS

17. แนวทางที่ 1.3 - การออกแบบโครงสร้าง และเนื้อหา ต้องสามารถทำงานเป็นอิสระจากกันและกัน - ต่อ ไม่ใช้ CSS

18. แนวทางที่ 1.4 – ต้องมั่นใจได้ว่าพื้นหน้าและพื้นหลัง (สีและเสียง) ต้องมีความแตกต่างกันมากพอที่ผู้ใช้จะสามารถแยกแยะได้ ตัวอย่างที่ผิด

19. แนวทางที่ 2.1 - การทำงานทุกอย่างต้องรองรับการใช้งานจากคีย์บอร์ดได้ ตัวอย่างที่ผิด จาก http://www.adobe.com/

20. แนวทางที่ 2.2 - จัดเตรียมเวลาให้เพียงพอในการอ่าน หรือการกระทำใดๆ ของข้อมูล สำหรับผู้ใช้ ตัวอย่างที่ผิด <meta http-equiv="refresh" content=“20;url=http://www.somewhere.com“/>

21. แนวทางที่ 2.3 – ไม่สร้างเนื้อหาที่อาจเป็นสาเหตุของอาการลมชัก ตัวอย่างที่ผิด จาก https://www.flashingblinkylights.com/

22. แนวทางที่ 2.4 - จัดเตรียมทางช่วยเหลือสำหรับผู้ใช้ในการสืบค้นเนื้อหา รู้ว่าตัวเองอยู่ในตำแหน่งใดในเนื้อหา และท่องไปในเนื้อหานั้นได้ ตัวอย่าง จาก http://www.washington.edu/webguides/guidelines/breadcrumbs.html

23. แนวทางที่ 3.1 - สร้างเนื้อหาให้สามารถอ่านและเข้าใจได้ ภาษามนุษย์หลักของหน้าเอกสาร: <?xml version="1.0" encoding="tis-620"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="th"> <head> <meta http-equiv="Content-Type" content="text/html; charset=tis-620" /> <meta http-equiv="Content-Style-Type" content="text/css; charset=tis-620" /> … </head>

24. แนวทางที่ 3.1 - สร้างเนื้อหาให้สามารถอ่านและเข้าใจได้ คำศัพท์ที่ไม่คุ้นเคย:

25. แนวทางที่ 3.1 - สร้างเนื้อหาให้สามารถอ่านและเข้าใจได้ คำย่อ: ตัวอย่าง <acronym title=“Hyper Text Markup Language”>HTML</acronym> <abbr title=“World Wide Web Consortium”>W3C</abbr>

26. แนวทางที่ 3.2 - การทำงานของระบบต่างๆ หรือการแสดงผลบนหน้าเว็บ ต้องเป็นสิ่งที่ผู้ใช้สามารถคาดเดาได้ ตัวอย่างที่ผิด จาก https://www.cia.gov/library/publications/the-world-factbook/

27. แนวทางที่ 3.3 - จัดเตรียมส่วนการช่วยเหลือให้ผู้ใช้ให้สามารถกรอกข้อมูลได้ถูกต้อง ตัวอย่างที่ดี จาก http://www.tddf.or.th

28. แนวทางที่ 4.1 - รองรับการใช้งานร่วมกับ User Agent ได้ทั้งในปัจจุบัน และอนาคต (รวมถึงเทคโนโลยีสิ่งอำนวยความสะดวก) การแจงส่วน (Parsing): ตัวอย่างที่ผิด <p>This paragraph is very <strong>important.<p> <p>Please remember</strong> to not overlap tags.</p> ตัวอย่างที่ถูก <p>This paragraph is very <strong>important</strong>.<p> <p><strong>Please remember</strong> to not overlap tags.</p>

29. 10 วิธีทำเว็บให้ทุกคนเข้าถึง • ภาพและแอนนิเมชั่น: ใช้ alt แอตทริบิวต์อธิบายความหมายหรือหน้าที่เสมอ • Image maps:ใช้ client-side mapและข้อความอธิบายสำหรับแต่ละจุดเชื่อมโยง • สื่อมัลติมีเดีย: ใส่คำบรรยายใต้ภาพและมีข้อความทดแทนส่วนที่เป็นไฟล์เสียง • ไฮเปอร์ลิงค์: ใช้ข้อความลิงค์ที่สื่อความหมาย ไม่ใช่ข้อความอย่างเช่น “คลิกที่นี่” หรือ “อ่านต่อ” ทำเป็นข้อความลิงค์ • โครงสร้างเอกสาร: ใช้หัวเรื่อง ลิสต์ และจัดทำโครงสร้างที่สม่ำเสมอ ใช้ CSS ในการตกแต่งเอกสาร

30. 10 วิธีทำเว็บให้ทุกคนเข้าถึง - ต่อ • กราฟและแผนผัง: อธิบายกราฟหรือแผนผังโดยการใช้ longdesc แอตทริบิวต์ สำหรับภาพ (<img src=“orgchart.jpg” longdesc=“http://www.mysite.com/desc.html” /> • Scripts, applets และ plug-ins:ใส่เนื้อหาทดแทนหากบราวเซอร์หรือซอฟท์แวร์ท่องเว็บไม่รองรับการทำงาน • Frames: ใช้แท็ก noframe เพื่อทดแทนกรณีที่ไม่สามารถแสดงผลเฟรมได้ และต้องใช้ title แอตทริบิวต์ที่เหมาะสมด้วย • ตาราง: ไม่ใช่ตารางในการวางเลย์เอาท์ ควรใช้ตารางกับข้อมูลเชิงตารางเท่านั้น • ตรวจสอบงาน: ตรวจสอบความถูกต้อง (validation) ได้ที่http://validator.w3.org

31. มาตรฐานอื่น ๆ ของ W3C ด้าน Accessibility • XHTML – eXtensible Hypertext Markup Language - สำหรับจัดทำข้อมูลหน้าเว็บ • CSS – Cascading Style Sheets - สำหรับตกแต่งเอกสารเว็บ • Authoring Tool Accessibility Guidelines (ATAG) Overview, ATAG 1.0- สำหรับเป็นแนวทางในการออกแบบโปรแกรมเว็บที่ทุกคนเข้าถึง • User Agent Accessibility Guidelines (UAAG) Overview, UAAG 1.0- สำหรับเป็นแนวทางในการออกแบบโปรแกรมท่องเว็บที่ทุกคนเข้าถึง • Accessible Rich Internet Applications (WAI-ARIA) Suite Overview– สำหรับการพัฒนาแอพพลิเคชั่นอินเตอร์เน็ต เช่น AJAX, DHTML ที่ทุกคนเข้าถึง • SVG, SMIL, MathML, ฯลฯ

32. สรุป WCAG 2.0/TWCAG 2008 • เป็นแนวทางการทำเว็บเพื่อให้คนทุกกลุ่มสามารถเข้าถึงได้ โดยคำนึงถึงหลักของการออกแบบที่เป็นสากล (Universal Design) ที่ต้องการตอบสนองต่อความหลากหลายของมนุษย์ (Human Diversity) • ขจัดแนวปฏิบัติการทำเนื้อหาเว็บไซต์แบบเดิม เน้นการนำเสนอโครงสร้าง เนื้อหาและการใช้ประโยชน์ได้จริง • ไม่เป็นมาตรฐานโดด ๆ ที่ W3C ทำออกมาให้คนพิการโดยเฉพาะ แต่สามารถทำงานร่วมกับมาตรฐานอื่น ๆ ของ W3C ได้ • ช่วยให้พัฒนาเว็บไซต์สะดวกขึ้น ใช้เวลาน้อยลง และทำงานกับเทคโนโลยีที่หลากหลายทั้งในปัจจุบันและอนาคต รวมทั้งยังสามารถทำงานข้ามระบบปฏิบัติการที่แตกต่างกันได้

33. END