Web site for All Info Graphic

Website for All

โดย Thaiwebaccessibility.com

Website for All Info Graphic ที่เราออกมาเพื่อให้คนรู้จักว่าเว็บไซต์ที่เข้าถึงได้จากคนทุกกลุ่มคืออะไร มีความสำคัญอย่างไร

Website for All
Web Accessibility คือเว็บที่รองรับคนพิการและผู้สูงอายุให้ใช้งานได้อย่างสะดวก และเข้าถึงได้ทุกๆ ข้อมูล

Website ที่ดี ต้องผ่านการออกแบบเพื่อให้ใช้งานได้จากคนทุกๆ กลุ่มแม้กระทั่งคนพิการ ผู้สูงอายุ

ทราบหรือไม่ว่าประชากรชาวไทยทั้งหมด 64 ล้านคน มีคนพิการและผู้สูงอายุถึง 15 ล้านคน ประกอบด้วย ผู้สูงอายุ 13 ล้านคน คนพิการ จำนวน 2 ล้านคน ข้อมูลจากสำนักงานสถิติแห่งชาติ สำนักส่งเสริมและพัฒนาคุณภาพชีวิตคนพิการแห่งชาติ

ตัวอย่างอุปสรรคที่ทำให้ไม่เป็น Web Accessibility
- รูปภาพไม่มีคำอธิบาย ทำให้คนตาบอดไม่สามารถใช้งานได้
- วิดีโอ ไม่มีคำบรรยาย คนหูหนวกไม่สามารถใช้งานได้
- การใช้สีและขนาดตัวอักษรที่ไม่เหมาะสม ในการอ่านข้อมูลของผู้สูงอายุ และ ผู้สายตาเลือนราง
Continue reading Web site for All Info Graphic →

รายงานการตรวจสอบเว็บไซต์กระทรวง 19 กระทรวง และ สำนักนายกรัฐมนตรี ประเทศไทย

ในงานด้านหนึ่งเพื่อการพัฒนาด้าน Web Accessibility จำเป็นต้องตรวจสอบและติดตามผลการดำเนินการของภาครัฐของไทย
ทาง Thaiwebaccessibility.com ได้จัดทำ โครงการการตรวจสอบเว็บไซต์ที่ทุกคนเข้าถึงและใช้งานได้ (Web Accessibility) ตามกฎหมายของประเทศไทย โดบทำการตรวจสอบและออกรายงานการตรวจสอบเว็บไซต์กระทรวง 19 กระทรวง และ สำนักนายกรัฐมนตรี ประเทศไทย

http://www.thaiwebaccessibility.com/reports/web-accessibility-in-thailand-government

การใส่ Video ของ Youtube เข้ามาใน PowerPoint 2010

ใน PowerPoint 2010 มีความสามารถในการนำ Youtube ใส่เข้ามาใน Presentation ได้ด้วยนะคะ
ดูรายละเอียดเพิ่มเติมได้ที่ http://www.9experttraining.com/how-to-insert-youtube-to-powerpoint-2010

หลักสูตร Professional PowerPoint 2010 ของเราที่ http://www.9experttraining.com/professional-powerpoint-2010-training-course

9Expert Training Tips-PowerPoint-Youtube

มาตรวจสอบค่าการตัดกันของสี (Color Contrast) ตามแนวทาง WCAG 2.0 ของเว็บไซต์กันครับ

ตามแนวทางการพัฒนาเว็บไซต์ที่ทุกคนเข้าถึงได้ จะมี ข้อกำหนดเกี่ยวกับการตัดกันของสี เพื่อให้คนที่มีข้อจำกัดด้านการมองเห็นสี สามารถเข้าใจได้ วันนี้ ขอแนะนำเครื่องมือที่ใช้ตรวจสอบ ค่าการตัดกันของสี (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)

Add On ของ FireFox ในการตรวจสอบ Color Contrast

Color-Contrast-Checker

Add On ของ Firefox ในการตรวจสอบ Color Contrast

Color-Contrast-Checker2

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

การตรวจสอบ โดยใช้ Add On ของ Firefox

การตรวจสอบ โดยใช้ 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 ตาม WCAG

Color-Contrast-App-Checker

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

ผลการตรวจสอบ Color Contrast

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

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

เครื่องมือการตรวจสอบ Color Contrast on Web

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 ครับ

เปิดตัวเว็บไซต์ ThaiWebAccessibility.com (Make IT Accessible for Everyone)

เนื่องด้วยหลายหน่วยงานมีความต้องการความรู้ และการให้คำแนะนำ ในการพัฒนา เว็บไซต์ที่ทุกคนเข้าถึงได้ (Web Accessibility) เพื่อให้ปฏิบัติตามมาตราฐาน W3C และกฏกระทรวงเทคโนโลยีสารสนเทศและการศึกษา ปี 2554 เกี่ยวกับการเข้าถึงอย่างเท่าเทียมกันของคนพิการ ซึ่งมีผลบังคับใช้แล้ว เพื่อพัฒนาสังคมเว็บไซต์ให้ไม่มีอุปสรรคในการเข้าถึงสารสนเทศ ทั้งคนปกติ ผู้พิการ ผู้สูงอายุ โดยเพื่อให้การเข้าถึงเป็นไปได้ตามเป้าหมาย จึงมีเว็บไซต์ http://www.ThaiWebAccessibility.com เพื่อเป็นส่วนหนึ่งในการขับเคลื่อนสังคม ICT ของไทยให้เป็นมาตราฐานตามหลักสากลที่เน้นการออกแบบที่เป็นมาตราฐาน (Universal Design)

นับถอยหลังสู่การบังคับใช้กฏกระทรวง ICT เกี่ยวกับการเข้าถึงสารสนเทศ ปี 2554

Thaiwebaccessibility - Make IT Accessible to Everyone Thaiwebaccessibility - Web Accessibility Training

http://www.ThaiWebAccessibility.com

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

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

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

วันก่อนได้รับเกียรติจาก วุฒิสภา ให้บรรยาย ในหัวข้อ “เปิดมุมมองใหม่ของเว็บไซต์ด้วยเว็บที่ทุกคนเข้าถึงได้” ที่ วุฒิสภา ในโอกาสที่ วุฒิสภาได้เปิดตัวเว็บไซต์ 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 Implementation / วิธีการทำเว็บไซต์ที่ทุกคนเข้าถึงได้

สำหรับตอนที่แล้วได้แนะนำว่า เว็บไซต์ที่ทุกคนเข้าถึงได้ (Web Accessibility) คืออะไร ไปแล้ว ในคลิปนี้จะแนะนำถึงขั้นตอนง่าย ๆ ให้เห็นภาพในการทำเว็บไซต์ง่าย ๆ ว่าจะสามารถทำให้เข้าถึงได้ ๆ อย่างไร แล้วจะทำอย่างไรบ้าง ซึ่งผมจะแนะนำแบบเข้าใจง่าย ๆ สำหรับนักพัฒนาเว็บไซต์ลองเข้ามาดูกันได้ครับ และหากมีข้อเสนอแนะอะไร ส่งมาได้ที่ chalaivate(at)chalaivate.com คลิปนี้มี Close Caption โดยคลิกที่ icon CC ที่ คลิปเพื่อดูคำบรรยายได้ครับ

What’s Web Accessibility

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

Introduction to Drupal 7

Drupal 7

Drupal 7 เป็น CMS ที่ได้รับความนิยมและมีประสิทธิภาพสูง นับเป็น CMSที่สุดยอดมาก ๆ ลำดับต้น ๆ เลยทีเดียว ในคลิปนี้แนะนำให้รู้จักกับ Drupal ใน Version 7 ซึ่งเป็น Version ใหม่ที่สุดในปัจจุบัน โดยมีโครงสร้างเปลี่ยนไปจาก Drupal Version 6 พอสมควร ซึ่งผมจะบอกว่ามีส่วนประกอบอะไรใน Drupal บ้าง และจะต้องเตรียมอะไรบ้างก่อนจะเริ่มใช้งาน Drupal 7 กัน ซึ่งจะได้เห็นตั้งแต่การ Download มาติดตั้งกันเลยทีเดียว พร้อมโครงสร้างที่สำคัญของ Drupal 7 ว่ามีส่วนประกอบอะไรบ้าง ครับ ลองดูกันได้ครับ

Link : Youtube : Introduction to Drupal 7

Closed Caption

Closed Caption

คลิปนี้เป็น Clip แรกที่ได้ทำโดยตอนนี้ตอนทำสื่อที่เป็น VDO จะใส่ข้อความใต้คำบรรยายเพื่อให้การเข้าถึงสำหรับผู้ที่มีปัญหาในการได้ยิน สามารถเข้าถึงเนื้อหาของ VDO นั้น ได้ ซึ่ง Youtube ก็สามารถให้เราสร้าง Closed Caption ได้ไม่ยาก เมื่อดู Clip นี้จะเห็น icon CC ที่แถบด้านล่างเพื่อให้เลือกว่าต้องการดู Closed Caption ซึ่งสามารถเลือกได้ในภาษาที่ต้องการ (หากทีหลายภาษา)ซึ่งเป็นอีกหนึ่งเทคโนโลยีสำหรับการทำให้การเข้าถึง เป็นเรื่องที่เราควรใส่ใจครับ