The Standard of Web Content Accessibility Guidelines (WCAG) 2.0

960 views

Published on

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

Published in: Education
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
960
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

The Standard of Web Content Accessibility Guidelines (WCAG) 2.0

  1. 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. 2. About  Web  Content  Accessibility   (WCAG) 2.0 เป็นแนวทางการพัฒนาและออกแบบเว็บไซต์ที่ทุกคนเข้าถึงได้ เพื่อให้ ข้อมูลข่าวสารในเว็บไซต์ต่างๆ ที่มีอยู่นั้น เป็นมาตรฐานที่สามารถให้คนปกติ รวมถึงผู้ มีความพิการหลายๆ กลุ่มเข้าถึงข้อมูลได้ โดยจะเป็นแนวทางในการพัฒนาให้ สามารถใช้เครื่องมือในหลายๆ รูปแบบ เข้าถึงข้อมูลเพื่อได้ผลลัพธ์ออกมาตามแต่ผู้ พิการแต่ละกลุ่มใช้งาน! ! ตัวอย่างกลุ่มของผู้พิการที่เราต้องพัฒนาข้อมูลบนเว็บไซต์ให้เข้าถึงได้ เช่น ผู้พิการ ทางสายตา รวมทั้งตาบอดและวิสัยทัศน์ต่ำ สายตามีความไวต่อแสง, คนที่หูหนวก และการสูญเสียการได้ยิน, ผู้บกพร่องทางการเรียนรู้, มีข้อจำกัดทางภูมิปัญญา, จำกัดการเคลื่อนไหว, ผู้พิการทางการพูด หรือแม้กระทั่งผู้สูงอายุ!
  3. 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. 4. หลักการ (Principle)   หลักการตามวัตถุประสงค์ในการออกแบบเว็บไซต์ที่เข้าถึงได้ มี 4 หลักการ! ! •  หลักการที่ 1 - ผู้อ่านต้องสามารถรับรู้เนื้อหาได้ (Perceivable)! •  หลักการที่ 2 - องค์ประกอบต่าง ๆ ของการอินเตอร์เฟสกับเนื้อหาจะต้องใช้งานได้ (Operable)! •  หลักการที่ 3 - ผู้ใช้สามารถเข้าใจเนื้อหา และส่วนควบคุมการทำงานต่างๆ ได้ (Understandable)! •  หลักการที่ 4 - เนื้อหาต้องมีความยืดหยุ่นที่จะทำงานกับเทคโนโลยีเว็บในปัจจุบันและอนาคตได้ (รวมถึงเทคโนโลยีสิ่งอำนวยความสะดวก) (Robust)!
  5. 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. 6. ประโยชน์ (Helpful)   แนวทาง WCAG จะเอื้อต่อผู้พิการ หรือผู้ที่มีความบกพร่อง ทางด้านต่าง ๆ ดังนี้ี! ! •  •  •  •  •  กลุ่มผู้บกพร่องทางการมองเห็น (Visual)! กลุ่มผู้พิการทางการเคลื่อนไหวหรือทางร่างกาย (Motor / Mobility)! ผู้พิการทางการได้ยินและสื่อความหมาย (Auditory)! ผู้ที่มีปัญหาเรื่องภาพกระพริบ / สีฉูดฉาด (Seizures)! ผู้บกพร่องด้านความรู้ความเข้าใจ (Cognitive / Intellectual)!
  7. 7. เกณฑ์ความสำเร็จ (Success Criteria)   เป็นตัวบอกระดับความสำเร็จ ของหัวข้อแนวทางที่จะทำให้เป็นไปตาม! หลักการ แบ่งเป็น 3 ระดับ! ! •  ระดับ เอ (A) ! เป็นเกณฑ์ที่ *ต้อง* ปฏิบัติตาม เพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ (พอใช้)! •  ระดับ ดับเบิ้ลเอ (AA) ! เป็นเกณฑ์ที่ *ควรจะ* ปฏิบัติตาม เพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ง่ายขึ้น (ดี)! •  ระดับ ทริปเปิ้ลเอ (AAA) ! เป็นเกณฑ์ที่ *อาจจะ* ปฏิบัติตาม เพื่อให้คนพิการเข้าถึงเว็บไซต์ได้ง่ายที่สุด (ดีมาก)! Reference : http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html!
  8. 8. ระดับการเข้าถึง (Level)   เพื่อให้ทราบถึงว่าเว็บไซต์ใดเป็นเว็บไซต์ที่อำนวยความสะดวกให้กับคนพิการเข้าถึงข้อมูลข่าวสารได้นั้นได้ จะต้องมีสัญลักษณ์ *(Icon) กำกับอยู่ที่หน้าเว็บของเว็บไซต์นั้นๆ ซึ่งหมายถึงการที่เว็บไซต์นั้นๆ ได้ผ่านการ ตรวจสอบความสามารถในการเข้าถึงข้อมูลได้ ตามแนวทางของการเข้าถึงข้อมูล ! สำหรับสัญลักษณ์ที่แสดงนั้นจะแบ่งความสามารถในการเข้าถึงเป็น 3 ระดับ! •  ระดับ เอ (A) ! หมายถึง ผ่านการตรวจสอบตามเกณฑ์การตรวจสอบทั้งหมด ที่กำหนดในระดับเอ! •  ระดับ ดับเบิ้ลเอ (AA) ! หมายถึง ผ่านการตรวจสอบตามเกณฑ์การตรวจสอบทั้งหมด ที่กำหนดในระดับเอ และดับเบิ้ลเอ! •  ระดับ ทริปเปิ้ลเอ (AAA) ! หมายถึง ผ่านการตรวจสอบตามเกณฑ์การตรวจสอบทั้ง 3 ระดับ! * Reference : http://www.w3.org/WAI/WCAG2-Conformance!
  9. 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. 10. Web  Accessibility  on  Joomla!   แบ่งออกได้ 2 ส่วนหลักๆ คือ! •  Content : คือการเขียนเนื้อหาบนเว็บไซต์โดยใส่ข้อมูลต่างๆ ให้ครบตาม มาตฐาน HTML (HTML Elements, HTML Attributes)! ! •  Template : คือการใช้ หรือการสร้างให้มีเครื่องมือในการเอื้ออำนวย ความสะดวกต่อผู้ใช้ ในการเข้าถึงเนื้อหา หรือใช้งานเว็บไซต์ได้ดีขึ้น ครบถ้วนตามมาตฐาน!
  11. 11. Accessibility in  Content   •  •  •  •  •  •  Images alternative text! Link title! Modal boxes! Medias in content! Forms are accessible! Site map!
  12. 12. Accessibility in  Template   •  Template! –  Style! –  Font size tools! –  TAB keyboard support! –  Screen Reader support!
  13. 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. 14. Accessibility  Extensions   •  Screen  Reader   •  ArLcle  PXFont  Size   •  Resizer  &  High  Contrast   •  Zoom   http://extensions.joomla.org/extensions/style-a-design/accessibility!
  15. 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. 16. Thank  You  

×