Transcript Web Content Accessibility Guidelines 2 (WCAG 2.0)

Web Content Accessibility Guidelines 2.0 (WCAG 2.0)
&
TWCAG 2008
1
โ ด ย ส ว่ า ง ศ รี ส ม
อ ง ค์ ก า ร ค น พิ ก า ร ส า ก ล ป ร ะ จา ภู มิ ภ า ค เ อ เ ชี ย - แ ปซิ ฟิ ก
Background of WCAG 2.0
2
 ตุลาคม พ.ศ. 2537 ทิม เบอร์ เนอร์ ก่อตั้งองค์การ World Wide Web Consortium
(W3C)
 พ.ศ. 2540 W3C ออกแนวทางการทาเว็บที่ทุกคนเข้าถึง หรื อ Web Accessibility
Initiative (WAI)
 พ.ศ. 2541 W3C ออกมาตรฐานการทาเว็บที่ทุกคนเข้าถึงได้ หรื อ Web Content
Accessibility Guidelines Version 1.0 (WCAG 1.0)
 พ.ศ.2548 W3C ระดมผูเ้ ชี่ยวชาญด้านเทคโนโลยีสิ่งอานวยความสะดวก รวมทั้งคน
พิการที่ทางานเกี่ยวข้องเพื่อปรับปรุ งแนวทางและมาตรฐาน WCAG 1.0 จนกระทัง่ เป็ น
WCAG 2.0 ในปัจจุบนั
TWCAG 2008
3
 พ.ศ.2550 กระทรวงเทคโนโลยีสารสนเทศและการสื่ อสารได้ดาเนิ นการจัดทา
แผนพัฒนาสังคมแห่งความเท่าเทียมด้วย ICT พ.ศ.2551-2553
 มาตรฐาน TWCAG 2008 (Thai Web Content Accessibility Guide 2008) เป็ น
มาตรฐานที่กาหนดแนวทางการพัฒนาหน้าเว็บไซต์ที่ทุกคนเข้าถึง อ้างอิงจาก
มาตรฐานสากล WCAG 2.0
หลักการของ TWCAG 2008
4
1. สามารถรับรู้ ได้
ผูใ้ ช้สามารถรับรู ้เนื้อหาและชิ้นส่ วนหน้าจอได้
2. สามารถใช้ งานได้
ผูใ้ ช้สามารถใช้งานชิ้นส่ วนหน้าจอที่ควบคุมการทางานเพื่อเข้าถึงเนื้อหาและหน้า
เว็บไซต์ได้
3. สามารถเข้ าใจได้
ผูใ้ ช้เข้าใจความหมาย วัตถุประสงค์และหน้าที่ของชิ้นส่ วนหน้าเว็บไซต์ได้
4. รองรับเทคโนโลยี
รองรับกับเทคโนโลยีทวั่ ไป เทคโนโลยีอานวยความสะดวกสาหรับคนพิการและ
อื่น ๆ ได้ท้ งั ในปั จจุบนั และอนาคต
หลักการของ TWCAG 2008
5
1. สามารถรับรู้ ได้
ผูใ้ ช้สามารถรับรู ้เนื้อหาและชิ้นส่ วนหน้าจอได้
2. สามารถใช้ งานได้
ผูใ้ ช้สามารถใช้งานชิ้นส่ วนหน้าจอที่ควบคุมการทางานเพื่อเข้าถึงเนื้อหาและหน้า
เว็บไซต์ได้
3. สามารถเข้ าใจได้
ผูใ้ ช้เข้าใจความหมาย วัตถุประสงค์และหน้าที่ของชิ้นส่ วนหน้าเว็บไซต์ได้
4. รองรับเทคโนโลยี
รองรับกับเทคโนโลยีทวั่ ไป เทคโนโลยีอานวยความสะดวกสาหรับคนพิการและ
อื่น ๆ ได้ท้ งั ในปั จจุบนั และอนาคต
เกณฑ์ ความสาเร็จ (Success Criteria)
6
 ระดับ A
ต้องสามารถทาได้ตามเกณฑ์ความสาเร็ จในระดับ A ทุกข้อ
 ระดับ AA
ต้องสามารถทาได้ตามเกณฑ์ความสาเร็ จในระดับ A ทุกข้อ
ต้องสามารถทาได้ตามเกณฑ์ความสาเร็ จในระดับ AA ทุกข้อ
 ระดับ AAA
ต้องสามารถทาได้ตามเกณฑ์ความสาเร็ จในระดับ A ทุกข้อ
ต้องสามารถทาได้ตามเกณฑ์ความสาเร็ จในระดับ AA ทุกข้อ
ต้องสามารถทาได้ตามเกณฑ์ความสาเร็ จในระดับ AAA ทุกข้อ
ความหมายของเกณฑ์ ความสาเร็จ
7
 ระดับ A
เป็ นเกณฑ์ที่ผพู้ ฒั นาเว็บไซต์ ต้ อง ปฏิบตั ิตามเพื่อให้คนพิการเข้าถึงเว็บไซต์ได้
 ระดับ AA
เป็ นเกณฑ์ระดับสาคัญรองลงมาที่ผพู้ ฒั นาเว็บไซต์ ควรจะ ปฏิบตั ิตามเพื่อให้คนพิการ
เข้าถึงเว็บไซต์ได้ง่ายขึ้น
 ระดับ AAA
เป็ นเกณฑ์ที่ผพู้ ฒั นาเว็บไซต์ อาจจะ ปฏิบตั ิตามเพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ง่าย
ที่สุด
หลักการของ TWCAG 2008
8
หลักการที่ 1 – ผู้อ่านต้ องสามารถรับรู้ เนือ้ หาได้
 แนวทางที่ 1.1 - จัดเตรี ยมข้อมูลที่เป็ นข้อความ (Text) แทน เนื้ อหาที่มีรูปแบบเป็ นอื่น
 แนวทางที่ 1.2 - จัดเตรี ยมข้อความบรรยายที่ตรงกับเหตุการณ์ในสื่ อมัลติมีเดีย
 แนวทางที่ 1.3 - การออกแบบโครงสร้าง และเนื้ อหา ต้องสามารถทางานเป็ นอิสระจาก
กันและกัน
 แนวทางที่ 1.4 – ต้องมัน
่ ใจได้วา่ พื้นหน้าและพื้นหลัง (สี และเสี ยง) ต้องมีความแตกต่าง
กันมากพอที่ผใู ้ ช้จะสามารถแยกแยะได้
หลักการของ TWCAG 2008
9
หลักการที่ 2 - องค์ ประกอบต่ าง ๆ ของการอินเตอร์ เฟสกับเนือ้ หา
จะต้ องใช้ งานได้
 แนวทางที่ 2.1 - การทางานทุกอย่างต้องรองรับการใช้งานจากคียบ์ อร์ ดได้
 แนวทางที่ 2.2 - จัดเตรี ยมเวลาให้เพียงพอในการอ่าน หรื อการกระทาใดๆ ของข้อมูล
สาหรับผูใ้ ช้
 แนวทางที่ 2.3 - ไม่สร้างเนื้ อหาที่อาจเป็ นสาเหตุของอาการลมชัก
 แนวทางที่ 2.4 - จัดเตรี ยมทางช่วยเหลือสาหรับผูใ้ ช้ในการสื บค้นเนื้ อหา รู ้วา่ ตัวเองอยู่
ในตาแหน่งใดในเนื้อหา และท่องไปในเนื้อหานั้นได้
หลักการของ TWCAG 2008
10
หลักการที่ 3 - ผู้ใช้ สามารถเข้ าใจเนือ้ หา และส่ วนควบคุมการทางาน
ต่ างๆ ได้
 แนวทางที่ 3.1 - สร้างเนื้ อหาให้สามารถอ่านและเข้าใจได้
 แนวทางที่ 3.2 - การทางานของระบบต่างๆ หรื อการแสดงผลบนหน้าเว็บ ต้องเป็ นสิ่ งที่
ผูใ้ ช้สามารถคาดเดาได้
 แนวทางที่ 3.3 - จัดเตรี ยมส่ วนการช่วยเหลือให้ผใู ้ ช้ให้สามารถกรอกข้อมูลได้ถูกต้อง
หลักการของ TWCAG 2008
11
หลักการที่ 4 - เนือ้ หาต้ องมีความยืดหยุ่นทีจ่ ะทางานกับเทคโนโลยีเว็บ
ในปัจจุบันและอนาคตได้ (รวมถึงเทคโนโลยีสิ่งอานวยความ
สะดวก)
 แนวทางที่ 4.1 - รองรับการใช้งานร่ วมกับ User Agent ได้ท้ งั ในปั จจุบน
ั และอนาคต
(รวมถึงเทคโนโลยีสิ่งอานวยความสะดวก)
แนวทางที่ 1.1 - จัดเตรียมข้ อมูลทีเ่ ป็ นข้ อความ (Text) แทน เนือ้ หาทีม่ ีรูปแบบ
เป็ นอืน่
12
รูปภาพ: รูปภาพต้องมีคาอธิบายภาพ (alternative text)
ตัวอย่างทีผ่ ดิ
<p><img src=“somewhere/dog.jpg” width=“200”
/>…</p>
ตัวอย่ างทีถ่ ูก
<p><img src=“somewhere/dog.jpg” alt=“หมาน้ อยสี
ขาวน่ ารัก”
/>…</p>
แนวทางที่ 1.1 - จัดเตรียมข้ อมูลทีเ่ ป็ นข้ อความ (Text) แทน เนือ้ หาทีม่ ีรูปแบบ
เป็ นอืน่ - ต่ อ
13
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>
แนวทางที่ 1.1 - จัดเตรียมข้ อมูลทีเ่ ป็ นข้ อความ (Text) แทน เนือ้ หาทีม่ ีรูปแบบ
เป็ นอืน่ - ต่ อ
14
CAPTCHA: ภาพอักขระเพือ่ ยืนยันว่ าการดาเนินกิจกรรมบางอย่ างบนหน้ าเว็บเป็ นการกระทา
โดยมนุษย์ ไม่ ใช่ โปรแกรมคอมพิวเตอร์
ตัวอย่าง
จาก http://www.captcha.net/
แนวทางที่ 1.3 - การออกแบบโครงสร้าง และเนื้อหา ต้องสามารถทางานเป็ น
อิสระจากกันและกัน
15
Decoration, Formatting, Invisible: วัตถุทใี่ ช้ ในการตกแต่ ง ไม่ มี
ความหมายเชิงโครงสร้ างหรือเชิงวลีในเอกสาร
ตัวอย่างทีผ่ ดิ
<p><img src=“somewhere/bg_top_coner.jpg”
alt=“ภาพพืน
้ หลังมุมบน” />…</p>
ตัวอย่ างทีถ่ ูก
<p><img src=“somewhere/bg_top_coner.jpg”
alt=“” />…</p>
แนวทางที่ 1.3 - การออกแบบโครงสร้าง และเนื้อหา ต้องสามารถทางานเป็ น
อิสระจากกันและกัน - ต่อ
16
ใช้ CSS
แนวทางที่ 1.3 - การออกแบบโครงสร้าง และเนื้อหา ต้องสามารถทางานเป็ น
อิสระจากกันและกัน - ต่อ
17
ไม่ ใช้ CSS
แนวทางที่ 1.4 – ต้องมัน่ ใจได้วา่ พื้นหน้าและพื้นหลัง (สี และเสี ยง) ต้องมีความ
แตกต่างกันมากพอที่ผใู ้ ช้จะสามารถแยกแยะได้
18
ตัวอย่างทีผ่ ดิ
แนวทางที่ 2.1 - การทางานทุกอย่างต้ องรองรับการใช้ งานจากคีย์บอร์ ดได้
19
ตัวอย่ างทีผ่ ดิ
จาก http://www.adobe.com/
แนวทางที่ 2.2 - จัดเตรี ยมเวลาให้ เพียงพอในการอ่าน หรื อการกระทาใดๆ
ของข้ อมูล สาหรับผู้ใช้
20
ตัวอย่างทีผ่ ดิ
<meta http-equiv="refresh"
content=“20;url=http://www.somewhere.com“ />
แนวทางที่ 2.3 – ไม่สร้ างเนื ้อหาที่อาจเป็ นสาเหตุของอาการลมชัก
21
ตัวอย่ างทีผ่ ดิ
จาก https://www.flashingblinkylights.com/
แนวทางที่ 2.4 - จัดเตรี ยมทางช่วยเหลือสาหรับผู้ใช้ ในการสืบค้ นเนื ้อหา รู้วา่
ตัวเองอยูใ่ นตาแหน่งใดในเนื ้อหา และท่องไปในเนื ้อหานันได้
้
22
ตัวอย่ าง
จาก http://www.washington.edu/webguides/guidelines/breadcrumbs.html
แนวทางที่ 3.1 - สร้ างเนื ้อหาให้ สามารถอ่านและเข้ าใจได้
23
ภาษามนุษย์ หลักของหน้ าเอกสาร:
<?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>
แนวทางที่ 3.1 - สร้ างเนื ้อหาให้ สามารถอ่านและเข้ าใจได้
24
คาศัพท์ ทไี่ ม่ คุ้นเคย:
แนวทางที่ 3.1 - สร้ างเนื ้อหาให้ สามารถอ่านและเข้ าใจได้
25
คาย่ อ:
ตัวอย่าง
<acronym title=“Hyper Text Markup
Language”>HTML</acronym>
<abbr title=“World Wide Web Consortium”>W3C</abbr>
แนวทางที่ 3.2 - การทางานของระบบต่างๆ หรื อการแสดงผลบนหน้ าเว็บ
ต้ องเป็ นสิง่ ที่ผ้ ใู ช้ สามารถคาดเดาได้
26
ตัวอย่างทีผ่ ดิ
จาก https://www.cia.gov/library/publications/the-world-factbook/
แนวทางที่ 3.3 - จัดเตรี ยมส่วนการช่วยเหลือให้ ผ้ ใู ช้ ให้ สามารถกรอกข้ อมูล
ได้ ถกู ต้ อง
27
ตัวอย่างทีด่ ี
จาก http://www.tddf.or.th
แนวทางที่ 4.1 - รองรับการใช้งานร่ วมกับ User Agent ได้ท้ งั ในปัจจุบนั และ
อนาคต (รวมถึงเทคโนโลยีสิ่งอานวยความสะดวก)
28
การแจงส่ วน (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>
10 วิธีทาเว็บให้ ทุกคนเข้ าถึง
29
1. ภาพและแอนนิเมชั่น: ใช้ alt แอตทริ บิวต์อธิ บายความหมายหรื อหน้าที่เสมอ
2. Image maps: ใช้ client-side map และข้อความอธิ บายสาหรับแต่ละจุดเชื่อมโยง
3. สื่ อมัลติมเี ดีย: ใส่ คาบรรยายใต้ภาพและมีขอ้ ความทดแทนส่ วนที่เป็ นไฟล์เสี ยง
4. ไฮเปอร์ ลงิ ค์ : ใช้ขอ้ ความลิงค์ที่สื่อความหมาย ไม่ใช่ขอ้ ความอย่างเช่น “คลิกที่นี่” หรื อ
“อ่านต่อ” ทาเป็ นข้อความลิงค์
5. โครงสร้ างเอกสาร: ใช้หวั เรื่ อง ลิสต์ และจัดทาโครงสร้างที่สม่าเสมอ ใช้ CSS ในการ
ตกแต่งเอกสาร
10 วิธีทาเว็บให้ ทุกคนเข้ าถึง - ต่ อ
30
กราฟและแผนผัง: อธิบายกราฟหรื อแผนผังโดยการใช้ longdesc แอตทริ บิวต์
สาหรับภาพ (<img src=“orgchart.jpg”
longdesc=“http://www.mysite.com/desc.html” />
7. Scripts, applets และ plug-ins: ใส่ เนื้ อหาทดแทนหากบราวเซอร์ หรื อซอฟท์แวร์
ท่องเว็บไม่รองรับการทางาน
8. Frames: ใช้แท็ก noframe เพื่อทดแทนกรณี ที่ไม่สามารถแสดงผลเฟรมได้ และต้อง
ใช้ title แอตทริ บิวต์ที่เหมาะสมด้วย
9. ตาราง: ไม่ใช่ตารางในการวางเลย์เอาท์ ควรใช้ตารางกับข้อมูลเชิงตารางเท่านั้น
10. ตรวจสอบงาน: ตรวจสอบความถูกต้อง (validation) ได้ที่ http://validator.w3.org
6.
มาตรฐานอื่น ๆ ของ W3C ด้ าน Accessibility
31
1.
2.
3.
4.
5.
6.
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, ฯลฯ
สรุ ป WCAG 2.0/TWCAG 2008
32
1.
2.
3.
4.
เป็ นแนวทางการทาเว็บเพือ่ ให้ คนทุกกลุ่มสามารถเข้ าถึงได้ โดยคานึงถึงหลักของ
การออกแบบทีเ่ ป็ นสากล (Universal Design) ที่ตอ้ งการตอบสนองต่อความ
หลากหลายของมนุษย์ (Human Diversity)
ขจัดแนวปฏิบัตกิ ารทาเนือ้ หาเว็บไซต์ แบบเดิม เน้นการนาเสนอโครงสร้าง เนื้อหา
และการใช้ประโยชน์ได้จริ ง
ไม่ เป็ นมาตรฐานโดด ๆ ที่ W3C ทาออกมาให้คนพิการโดยเฉพาะ แต่สามารถทางาน
ร่ วมกับมาตรฐานอื่น ๆ ของ W3C ได้
ช่ วยให้ พฒ
ั นาเว็บไซต์ สะดวกขึน้ ใช้เวลาน้อยลง และทางานกับเทคโนโลยีที่
หลากหลายทั้งในปั จจุบนั และอนาคต รวมทั้งยังสามารถทางานข้ามระบบปฏิบตั ิการ
ที่แตกต่างกันได้
33
END