The Standard of Web Content Accessibility Guidelines (WCAG) 2.0 for Joomla!Day™ Bangkok 2013

1. The
Standard
of
Web
Content
Accessibility
Guidelines
(WCAG)
2.0
Joomla!Day™
Bangkok
2013
Name: Supachai Teasakul!
Location: Bangkok, Thailand!
Position: Joomla Translation WG - Joomla.org, !
" "LaiThai Developer Team, !
" "Project Manager - Marvelic Engine Co.,Ltd.!
Web: !Marvelic.co.th!
Twitter: !@supa_chai!

2. About
Web
Content
Accessibility
(WCAG) 2.0 เป็นแนวทางการพัฒนาและออกแบบเว็บไซต์ที่ทุกคนเข้าถึงได้ เพื่อให้
ข้อมูลข่าวสารในเว็บไซต์ต่างๆ ที่มีอยู่นั้น เป็นมาตรฐานที่สามารถให้คนปกติ รวมถึงผู้
มีความพิการหลายๆ กลุ่มเข้าถึงข้อมูลได้ โดยจะเป็นแนวทางในการพัฒนาให้
สามารถใช้เครื่องมือในหลายๆ รูปแบบ เข้าถึงข้อมูลเพื่อได้ผลลัพธ์ออกมาตามแต่ผู้
พิการแต่ละกลุ่มใช้งาน!
!
ตัวอย่างกลุ่มของผู้พิการที่เราต้องพัฒนาข้อมูลบนเว็บไซต์ให้เข้าถึงได้ เช่น ผู้พิการ
ทางสายตา รวมทั้งตาบอดและวิสัยทัศน์ต่ำ สายตามีความไวต่อแสง, คนที่หูหนวก
และการสูญเสียการได้ยิน, ผู้บกพร่องทางการเรียนรู้, มีข้อจำกัดทางภูมิปัญญา,
จำกัดการเคลื่อนไหว, ผู้พิการทางการพูด หรือแม้กระทั่งผู้สูงอายุ!

3. The
Standard
(WCAG) 2.0 นั้น ถูกระบุไว้ในมาตรฐาน ISO/IEC 40500:2012!
http://www.iso.org/iso/home/store/catalogue_tc/catalogue_detail.htm?csnumber=58625!
• มีการประกาศใช้ “กฎกระทรวง กำหนดหลักเกณฑ์ วิธีการ และเงื่อนไข ในการเข้าถึงและใช้
ประโยชน์จากข้อมูลข่าวสาร การสื่อสารบริการโทรคมนาคม เทคโนโลยีสารสนเทศและการ
สื่อสาร เทคโนโลยีสิ่งอำนวยความสะดวกเพื่อการสื่อสาร และบริการสื่อสาธารณะ สำหรับคน
พิการ พ.ศ. 2554”!
• มีการออกกรอบนโยบายเทคโนโลยีสารสนเทศและการสื่อสาร ระยะ พ.ศ. 2554-2563!
• ถูกระบุไว้ในพระราชบัญญัติส่งเสริมและพัฒนาคุณภาพชีวิตคนพิการ พ.ศ. 2550!

4. หลักการ (Principle)
หลักการตามวัตถุประสงค์ในการออกแบบเว็บไซต์ที่เข้าถึงได้ มี 4 หลักการ!
!
• หลักการที่ 1 - ผู้อ่านต้องสามารถรับรู้เนื้อหาได้ (Perceivable)!
• หลักการที่ 2 - องค์ประกอบต่าง ๆ ของการอินเตอร์เฟสกับเนื้อหาจะต้องใช้งานได้ (Operable)!
• หลักการที่ 3 - ผู้ใช้สามารถเข้าใจเนื้อหา และส่วนควบคุมการทำงานต่างๆ ได้
(Understandable)!
• หลักการที่ 4 - เนื้อหาต้องมีความยืดหยุ่นที่จะทำงานกับเทคโนโลยีเว็บในปัจจุบันและอนาคตได้
(รวมถึงเทคโนโลยีสิ่งอำนวยความสะดวก) (Robust)!

5. แนวทาง (Guideline)
แนวทางจะถูกแบ่งออกเป็นข้อๆ ตามหลักการ ดังนี้ี!
!
•
•
•
•
แนวทางที่ 1.1 - จัดเตรียมข้อมูลที่เป็นข้อความ (Text) แทน เนื้อหาที่มีรูปแบบเป็นอื่น!
แนวทางที่ 1.2 - จัดเตรียมข้อความบรรยายที่ตรงกับเหตุการณ์ในสื่อมัลติมีเดีย!
แนวทางที่ 1.3 - การออกแบบโครงสร้าง และเนื้อหา ต้องสามารถทำงานเป็นอิสระจากกันและกัน!
แนวทางที่ 1.4 - ต้องมั่นใจได้ว่าพื้นหน้าและพื้นหลัง(สีและเสียง) ต้องมีความแตกต่างกันมากพอที่ผู้ใช้จะสามารถแยกแยะได้!
•
•
•
•
แนวทางที่ 2.1 - การทำงานทุกอย่างต้องรองรับการใช้งานจากคีย์บอร์ดได้!
แนวทางที่ 2.2 - จัดเตรียมเวลาให้เพียงพอในการอ่าน หรือการกระทำใดๆ ของข้อมูล สำหรับผู้ใช้ที่เป็นคนพิการ!
แนวทางที่ 2.3 - ไม่สร้างเนื้อหาที่อาจเป็นสาเหตุของอาการลมชัก!
แนวทางที่ 2.4 - จัดเตรียมทางช่วยเหลือสำหรับผู้ใช้ในการสืบค้นเนื้อหา รู้ว่าตัวเองอยู่ในตำแหน่งใดในเนื้อหา และท่องไปในเนื้อหานั้นได้!
•
•
•
แนวทางที่ 3.1 - สร้างเนื้อหาให้สามารถอ่านและเข้าใจได้!
แนวทางที่ 3.2 - การทำงานของระบบต่างๆ หรือการแสดงผลบนหน้าเว็บ ต้องเป็นสิ่งที่ผู้ใช้สามารถคาดเดาได้!
แนวทางที่ 3.3 - จัดเตรียมส่วนการช่วยเหลือให้ผู้ใช้ให้สามารถกรอกข้อมูลได้ถูกต้อง!
•
แนวทางที่ 4.1 - รองรับการใช้งานร่วมกับ User Agent ได้ทั้งในปัจจุบัน และอนาคต (รวมถึงเทคโนโลยีสิ่งอำนวยความสะดวก)!

6. ประโยชน์ (Helpful)
แนวทาง WCAG จะเอื้อต่อผู้พิการ หรือผู้ที่มีความบกพร่อง ทางด้านต่าง ๆ
ดังนี้ี!
!
•
•
•
•
•
กลุ่มผู้บกพร่องทางการมองเห็น (Visual)!
กลุ่มผู้พิการทางการเคลื่อนไหวหรือทางร่างกาย (Motor / Mobility)!
ผู้พิการทางการได้ยินและสื่อความหมาย (Auditory)!
ผู้ที่มีปัญหาเรื่องภาพกระพริบ / สีฉูดฉาด (Seizures)!
ผู้บกพร่องด้านความรู้ความเข้าใจ (Cognitive / Intellectual)!

7. เกณฑ์ความสำเร็จ (Success Criteria)
เป็นตัวบอกระดับความสำเร็จ ของหัวข้อแนวทางที่จะทำให้เป็นไปตาม!
หลักการ แบ่งเป็น 3 ระดับ!
!
• ระดับ เอ (A) !
เป็นเกณฑ์ที่ *ต้อง* ปฏิบัติตาม เพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ (พอใช้)!
• ระดับ ดับเบิ้ลเอ (AA) !
เป็นเกณฑ์ที่ *ควรจะ* ปฏิบัติตาม เพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ง่ายขึ้น (ดี)!
• ระดับ ทริปเปิ้ลเอ (AAA) !
เป็นเกณฑ์ที่ *อาจจะ* ปฏิบัติตาม เพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ง่ายที่สุด (ดีมาก)!
Reference : http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html!

8. ระดับการเข้าถึง (Level)
เพื่อให้ทราบถึงว่าเว็บไซต์ใดเป็นเว็บไซต์ที่อำนวยความสะดวกให้กับคนพิการเข้าถึงข้อมูลข่าวสารได้นั้นได้
จะต้องมีสัญลักษณ์ *(Icon) กำกับอยู่ที่หน้าเว็บของเว็บไซต์นั้นๆ ซึ่งหมายถึงการที่เว็บไซต์นั้นๆ ได้ผ่านการ
ตรวจสอบความสามารถในการเข้าถึงข้อมูลได้ ตามแนวทางของการเข้าถึงข้อมูล !
สำหรับสัญลักษณ์ที่แสดงนั้นจะแบ่งความสามารถในการเข้าถึงเป็น 3 ระดับ!
• ระดับ เอ (A) !
หมายถึง ผ่านการตรวจสอบตามเกณฑ์การตรวจสอบทั้งหมด ที่กำหนดในระดับเอ!
• ระดับ ดับเบิ้ลเอ (AA) !
หมายถึง ผ่านการตรวจสอบตามเกณฑ์การตรวจสอบทั้งหมด ที่กำหนดในระดับเอ และดับเบิ้ลเอ!
• ระดับ ทริปเปิ้ลเอ (AAA) !
หมายถึง ผ่านการตรวจสอบตามเกณฑ์การตรวจสอบทั้ง 3 ระดับ!
* Reference : http://www.w3.org/WAI/WCAG2-Conformance!

9. Jomla!
Accessibility
Standards
WCAG,
!
WCAG is produced and maintained by the World Wide Web consortium (W3C). WCAG's standards are
based on three levels named Priority 1, Priority 2, and Priority 3. Priority 1 maintains the most basic
requirements that a site should attain in order to be accessible. A good place to start in getting more
information about WCAG can be found in their Web Content Accessibility Guidelines 2.0 !
(http://www.w3.org/TR/WCAG20/)!
!
!
Section 508,
!
Section 508 is a US federal law enacted in 1998. Its basis was for use in all government agencies but it has
since been adopted by the wider community as a benchmark for web accessibility. For more information on
Section 508 we suggest you have a look at the official website. !
(http://www.section508.gov)!

10. Web
Accessibility
on
Joomla!
แบ่งออกได้ 2 ส่วนหลักๆ คือ!
• Content : คือการเขียนเนื้อหาบนเว็บไซต์โดยใส่ข้อมูลต่างๆ ให้ครบตาม
มาตฐาน HTML (HTML Elements, HTML Attributes)!
!
• Template : คือการใช้ หรือการสร้างให้มีเครื่องมือในการเอื้ออำนวย
ความสะดวกต่อผู้ใช้ ในการเข้าถึงเนื้อหา หรือใช้งานเว็บไซต์ได้ดีขึ้น
ครบถ้วนตามมาตฐาน!

11. Accessibility in
Content
•
•
•
•
•
•
Images alternative text!
Link title!
Modal boxes!
Medias in content!
Forms are accessible!
Site map!

12. Accessibility in
Template
• Template!
– Style!
– Font size tools!
– TAB keyboard support!
– Screen Reader support!

13. การทำเว็บไซต์ Joomla ของเราให้เข้าถึงได้มากขึ้น
เพิ่มข้อความ ALT ให้กับทุกภาพบนเว็บไซต์ของเรา นอกเหนือจากการใส่ลงไปบนภาพ!
ใช้เครื่องหมายที่แสดงความหมายที่ถูกต้องที่หัวเรื่องของเนื้อหาบนเว็บไซต์ (HTML Headings) โดยเริ่มจาก H1-H6 ตามลำดับ
เพื่อบ่งบอกลำดับความสำคัญของแต่ละหัวเรื่อง!
•
•
!
•
•
•
จัดเรียงเนื้อหาของคุณในทางตรรกะ หรือทำการเพิ่มสถานะ :focus เพื่อเป็นการเชื่อมโยงภายในเว็บไซต์ของเรา จากนั้น ให้
ทำการทดลอง และเพิ่มการนำทางบนหน้าเว็บไซต์ของเราผ่านแป้นพิมพ์ปุ่ม TAB และพยายามคิดแทนผู้พิการว่า ถ้าเรากด
แป้นพิมพ์แล้ว มันจะไปที่ไหนบ้าง เพื่อให้ไปยังจุดต่างๆ ได้ ถ้าเราไม่สามารถมองเห็นเราจะอยู่ส่วนไหนบนหน้าเว็บ โดยเมื่อกด
แท็บแล้วเราจะได้เห็นในจุดที่เชื่อมโยงต่างๆ กันบนหน้าเว็บไซต์ไปเรื่อยๆ!
พิจารณาสีบนเว็บไซต์ของคุณ โดยคำนึงถึงผู้ใช้ที่เป็นคนตาบอดสีและวิธีการที่คนตาบอดสีอาจจะเข้ามาดูเว็บไซต์ของเรา ให้ดูที่
ระดับความคมชัดของข้อความและพื้นหลังของข้อความบนเว็บของเรา ถ้าสีสดมากเกินไป หรือที่มีระดับของความคมชัดต่ำ ซึ่ง
อาจจะกลายเป็นสิ่งที่ยากต่อการอ่าน !
การตรวจสอบระดับความคมชัด ผ่านเว็บได้ท AIM (http://webaim.org/resources/contrastchecker/)!
ทำการเพิ่มแท็ก *WAI-ARIA ลงไปยังเว็บไซต์ Joomla ของเรา โดยทำเป็นลิงค์ช่วยเหลือสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ !
<main role="main">!
!
* WAI-ARIA [ Web Accessibility Initiative (WAI) - Accessible Rich Internet Applications (ARIA) ]!
http://www.w3.org/TR/wai-aria/!
http://www.w3.org/WAI/!
http://www-03.ibm.com/able/resources/wai_aria_intro.html!

14. Accessibility
Extensions
• Screen
Reader
• ArLcle
PXFont
Size
• Resizer
&
High
Contrast
• Zoom
http://extensions.joomla.org/extensions/style-a-design/accessibility!

15. Reference
•
•
•
•
•
•
http://www.w3.org/TR/WCAG20/!
http://www.w3.org/WAI/intro/wcag.php!
http://th.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines!
http://www.thaiwebaccessibility.com/!
http://thaicss.com/!
http://docs.joomla.org/Accessibility_standards!
Validated site,
• http://www.thaiwebaccessibility.com/validated-site!
• http://wave.webaim.org/!
• http://webaim.org/resources/contrastchecker/!

16. Thank
You