Chalaivate.com – Professional in Web Technology and Web Accessibility

ตามแนวทางการพัฒนาเว็บไซต์ที่ทุกคนเข้าถึงได้ จะมี ข้อกำหนดเกี่ยวกับการตัดกันของสี เพื่อให้คนที่มีข้อจำกัดด้านการมองเห็นสี สามารถเข้าใจได้ วันนี้ ขอแนะนำเครื่องมือที่ใช้ตรวจสอบ ค่าการตัดกันของสี (Color Contrast) โดย Developer หลายท่านจะใช้ FireFox อยู่แล้ว

1. เครื่องมือ Add On ของ FireFox Download สำหรับ
https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/

ซึ่งสามารถตรวจสอบได้ตามแนวทางของ WCAG 2.0 ได้ (Web Content Accessibility Guidelines)

Color-Contrast-Checker

Color-Contrast-Checker2

โดยทดลองทำการตรวจสอบ หลังจากติดตั้ง ให้กด Alt+C เพื่อเรียกใช้งาน จะมีแถบด้านซ้าย
ป้าย Element เป็นการตรวจสอบทีละ ส่วนประกอบ สามารถคลิก Text Selector เพื่อคลิกแล้วรายงานผล
ป้าย Document จะเป็นการตรวจสอบทั้งเอกสารในหน้านั้น ๆ

การตรวจสอบ โดยใช้ Add On ของ Firefox ในการตรวจสอบค่าความตัดกันของสี (Color Contrast)

โดยภาพรวมของเครื่องมือนี้ถือว่า ทำงานได้ดีในระดับหนึ่ง แต่ไม่สามารถตรวจสอบสำหรับ Element บางประเภท ซึ่งไม่สามารถ Detect Background Color ที่แท้จริงออกมาได้ ทำให้ผลการตรวจสอบ ไม่ถูกต้อง

2. เครื่องมือในลักษณะ Application บน Windows
หา URL ต้นฉบับไม่เจอ เลย Up ไว้ที่ http://www.ThaiWebAccessibility.com/tools/Colour_Contrast_Analyser_2.2.rar
เป็นโปรแกรมในการตรวจสอบ โดยเปิด application โดย double click ที่ไฟล์ ตามรูป

Color-Contrast-App-Checker

การใช้งานก็ให้ คลิกที่รูป หลอดสีเพื่อเลือก สี Foreground และ Background โดยจะแสดงผลตามรูปครับ ว่าผ่านหรือไม่ผ่าน ?
เครื่องมือนี้เป็นเครื่องมือที่น่าสนใจและใช้งานไม่ยากครับ แต่ต้องมี Application ครับ

ผลการตรวจสอบ Color Contrast กับ 9ExpertTraining.com

3. เครื่องมือการตรวจสอบบนเว็บไซต์
สามารถเข้ามาดูได้ที่ http://snook.ca/technical/colour_contrast/colour.html
เลือกสี Foreground, Background แล้วจะแสดงผลตรงบริเวณที่ผมทำ Highlight ไว้ครับ ว่าผ่านในระดับใด Yes หรือ No

Color-Contrast-Checker-on-Web

ลองใช้กันดูนะครับ สำหรับ 3 เครื่องมือในการตรวจสอบค่าความตัดกันของสี เพื่อให้ไม่เป็นอุปสรรคในการเข้าถึงสารสนเทศของคนทุก ๆ กลุ่มครับ ^^

Reference :
โดยตามเกณฑ์ความสำเร็จ ได้กำหนดไว้ที่ข้อ 1.4 ของแนวทาง WCAG 2.0Distinguishable: Make it easier for users to see and hear content including separating foreground from background.(Ref : http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast.html)
Web Accessibility Initiative ( http://www.w3.org/wai )

==============
Author : @chalaivate
Web : www.chalaivate.com

Additional Useful Resources
สำหรับใครที่ไม่ได้มี Firefox หรือต้องการตรวจสอบอย่างอื่นด้วย แนะนำเครื่องมือตรวจสอบ WCAG 2.0 เพิ่มเติมที่เป็นภาษาไทย : http://www.thaiwebaccessibility.com/validator ครับ

บรรยาย เปิดมุมมองใหม่ของเว็บไซต์ด้วยเว็บที่ทุกคนเข้าถึงได้

วันก่อนได้รับเกียรติจาก วุฒิสภา ให้บรรยาย ในหัวข้อ “เปิดมุมมองใหม่ของเว็บไซต์ด้วยเว็บที่ทุกคนเข้าถึงได้” ที่ วุฒิสภา ในโอกาสที่ วุฒิสภาได้เปิดตัวเว็บไซต์ Senate.go.th ซึ่งได้ทำตามมาตราฐานของ W3C ตามแนวทาง WCAG 2.0 (Web Content Accessibility Guideline) เพื่อทำให้เว็บไซต์เป็นเว็บไซต์ที่ทุกคนเข้าถึงได้ (Web Accessibility) ถือเป็นหน่วยงานภาครัฐที่ได้ขยับเป็นลำดับต้น เพื่อให้ได้มาตราฐานสากล และสามารถให้การเข้าถึงเป็นไปได้อย่างเท่าเทียมกัน ไม่ว่าาจะเป็นคนปติ ผู้พิการทางสายตา ผู้สูงอายุ ไม่มีอุปสรรคในการเข้าถึงสารสนเทศต่าง ๆ ของเว็บไซต์ โดยในงานนี้ ได้รับเกียรติจากประธานวุฒิสภา รองประธานวุฒิสภา สมาชิกวุฒิสภา ปลัดกระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร ร่วมงาน เพื่อเป็นสัญลักษณ์ในการขยับของหน่วยงานชั้นนำในฝ่ายภาครัฐ และเป็นการสนับสนุนในเรื่องของ e-Government กฏกระทรวงไอซีที ในเรื่องการการเข้าถึงสารสนเทศและการสื่อสาร และกฏหมายคนพิการอีกด้วย

การบรรยายครั้งนี้แม้ว่าจะใช้เวลาประมาณ 1 ชั่วโมง สำหรับคนที่มาร่วมฟัง น่าจะได้รับความรู้ ความเข้าใจ ที่ดีขึ้นในเรื่องของ Web Accessibility และได้ทราบถึงประโยชน์และการปรับเปลี่ยนเพื่อเป็นมาตราฐานในอนาคตต่อไปครับ ซึ่งทางวุฒิสภา มีเป้าหมายคือ การทำเว็บไซต์วุฒิสภา ให้เป็นเว็บไซต์ที่ทุกคนเข้าถึงได้ ในระดับ AAA เลยทีเดียว เพื่อให้การเข้าถึงเป็นไปได้อย่างดีที่สุด เพื่อให้ประชาชนทุกกลุ่ม เช้าใช้ประโยชน์จากเว็บไซต์วุฒิสภา Senate.go.th ได้อย่างเต็มที่ ไม่ก่อให้เกิดอุปสรรคในการเข้าถึงสารสนเทศ

รับมอบของที่ระลึกจาก ท่านประธานวุฒิสภา

ภาพหมู่ในงานเปิดตัวเว็บไซต์วุฒิสภา เว็บไซต์ที่ทุกคนเข้าถึงได้

Ref : พิธีเปิดเว็บไซต์วุฒิสภารูปแบบใหม่ที่ทุกคนเข้าถึงได้ และ สัมมนาเรื่อง “เว็บไซต์วุฒิสภา สารสรเทศที่ทุกคนสามารถรับรู้ได้เท่าเทียมกัน”
วันจันทร์ที่ ๒๖ กันยายน ๒๕๕๔ เวลา ๐๙.๐๐ นาฬิกา ณ บริเวณห้องโถง ชั้น ๑ อาคารรัฐสภา ๑ พลเอก ธีรเดช มีเพียร ประธานวุฒิสภา เป็นประธานเปิดการสัมมนาเรื่อง “เว็บไซต์วุฒิสภา สารสรเทศที่ทุกคนสามารถรับรู้ได้เท่าเทียมกัน” ซึ่งสำนักเทคโนโลยีสารสนเทศและการสื่อสาร สำนักงานเลขาธิการวุฒิสภา จัดขึ้นเพื่อปรับปรุงเว็บไซต์วุฒิสภาให้เป็นรูปแบบ “เว็บไซต์ที่ทุกคนเข้าถึงได้” (Web Accessibility) โดยได้คำนึงถึงความสามารถในการเข้าถึงข้อมูลข่าวสารต่างๆ ของทุกกลุ่มคนอย่างเท่าเทียมกัน อาทิ ผู้บกพร่องทางการมองเห็น ให้สามารถใช้ซอฟแวร์ช่วยในการอ่านหน้าจอคอมพิวเตอร์ ผู้สูงอายุ ผู้ที่มีสายตาเลือนราง รวมไปถึงผู้พิการทางการเคลื่อนไหวส่วนใดส่วนหนึ่งของร่างกาย โดยมี นายนิคม ไวยรัชพานิช รองประธานวุฒิสภา คนที่หนึ่ง กล่าวรายงาน พร้อมทั้งนางพรทิพย์ โล่ห์วีระ จันทร์รัตนปรีดา รองประธานวุฒิสภา คนที่สอง สมาชิกวุฒิสภา ผู้บริหารและข้าราชการสำนักงานเลขาธิการวุฒิสภา รวมทั้งสมาคมคนตาบอดแห่งประเทศไทย สมาคมคนพิการแห่งประเทศไทย และสมาคมคนหูหนวกแห่งประเทศไทย เข้าร่วมสัมมนา

รูปภาพเพิ่มเติม ใน Facebook ผม

Web Accessibility หรือที่ กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร แปลว่า เว็บไซต์ที่ทุกคนเข้าถึงได้ นั้น
การเข้าถึงนั้น คือ ความสามารถในการเข้าใช้งานทรัพยากรต่าง ๆ ได้อย่างเท่าเทียมกัน ไม่ว่าจะเป็นผู้สูงอายุ ผู้พิการทางสายตา ผู้พิการทางการได้ยิน ซึ่งจะมีแนวทางที่ชื่อ WCAG (Web Content Accessibility Guidelines) ของ W3C

ไฟล์นำเสนอของรายการข่าวเที่ยงวันทันเหตุการณ์ ช่อง 3 เดือน สิงหาคม 2553 เกี่ยวกับ Web Accessibility และ กิจกรรมการพัฒนาเว็บไซต์ที่ทุกคนเข้าถึงได้

โดยวันนั้นผมสอนใน Class “การพัฒนาเว็บไซต์ที่ทุกคนเข้าถึงได้ ระดับต้น สำหรับโปรแกรมเมอร์” ที่มหาวิทยาลัยรามคำแหง ครับ