Downloaded 18 times
![การทำเว็บไซต์ 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!](https://image.slidesharecdn.com/wcag20-131128044607-phpapp01/85/The-Standard-of-Web-Content-Accessibility-Guidelines-WCAG-2-0-13-320.jpg)
Uploaded byMarvelic Engine Co., Ltd.
The Standard of Web Content Accessibility Guidelines (WCAG) 2.0
The Standard of Web Content Accessibility Guidelines (WCAG) 2.0 for Joomla!Day™ Bangkok 2013
The Standard of Web Content Accessibility Guidelines (WCAG) 2.0
- 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.