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