The Standard of Web Content Accessibility Guidelines (WCAG) 2.0

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