ช่วงเวลายุ่ง ๆ กับการประกวดเว็บไซต์ที่ทุกคนเข้าถึงได้ (Web Accessibility) ประจำปี 2553

สวัสดีครับ ชาวไทซีเอสเอส บทความนี้เกิดขึ้นจากคำเชิญชวนอันหอมหวานขอพี่ปลา(radiz) ซึ่งต้องการให้ผมมาเขียนบทความร่วมแจมที่ ไทซีเอสเอส แห่งนี้ ซึ่งผมก็ยินดีและเต็มใจอย่างสุดซึ้ง จากที่แต่ก่อนเป็นเพียงผู้เสพย์อย่างเดียว กลายมาเป็นทั้งผู้เผยแพร่และเสพย์ไปพร้อมกันก็ดีไปอีกแบบนะครับ

บ่นนำ

หลาย ๆ คนที่คลุกคลีหรือมีความรู้เกี่ยวกับ Web Accessibility อาจจะทราบอยู่แล้วว่ากระทรวง ict มีโครงการประกวดเว็บไซต์ที่ทุกคนเข้าถึงได้ (Web Accessiblity) ซึ่งรายละเอียดเพิ่มเติมเกี่ยวกับกฎกติกาและเกณฑ์ในการประกวด สามารถตามไปอ่านได้ที่นี่ครับ http://equitable-society.com/webcontest.aspx ปีนี้ก็ปีที่ 3 แล้ว สำหรับตัวผมเองก็ส่งผลงานไปทุกปี ปีนี้ก็เช่นเคย ( เห็นว่าส่งทุกปีแบบนี้ แต่ผลงานที่ส่งไปก็ไม่ซ้ำกันเลยนะครับ) แถมปีนี้มีรางวัลพิเศษมาล่อให้เกิดกิเลส เกิดไฟและเกิดแรงบันดาลใจในการที่จะทำผลงานเพื่อส่งประกวดอีกด้วย หวังไว้เล็ก ๆ ว่าปีนี้น่าจะได้รางวัลใดรางวัลหนึ่งติดไม้ติดมือกลับมา ให้สมกับความตั้งใจที่ได้ทำลงไปบ้าง

แต่แน่นอนว่าความสำเร็จ ในภายภาคหน้าย่อมมีอุปสรรคโบกมือทักทายรออยู่ก่อนแล้ว ไม่ว่าจะเป็นเวลาอันน้อยนิดที่ต้องเจียดมาทำ หรือปัญหามากมายที่พบเจอทั้ง bug ทั้ง error ทั้งไอเดียที่ไม่สามารถต่อยอดมาเป็นผลงานได้

สำหรับบทความนี้จึงอยากจะแบ่งปันความรู้ แนวคิด ประสบการณ์และเครื่องมือต่าง ๆ ที่นำมาพัฒนาผลงานสำหรับส่งประกวดชิ้นนี้ เพื่อที่ใครหลาย ๆ คนที่สนใจจะได้นำสิ่งเหล่านี้ไปใช้ให้เกิดประโยชน์กับตัวเองและสังคมไม่มากก็น้อย

รายละเอียดผลงาน :

• พัฒนาด้วย html5, css3, jquery
• แบ่ง การแสดงผล(ล่าสุดที่ทำ)ออกเป็น การแสดงผลปกติ, สำหรับคนสายตาเลือนราง, สำหรับมือถือ และสุดท้ายสำหรับ print (ถ้ามีเวลา test พอ อยากทำสำหรับ ipad ด้วย)
• เว็บบราวเซอร์ตระกูล webkit เท่านั้นถึงจะสามารถแสดงผลได้ดีไม่มีผิดเพี้ยน เว็บบราวเซอร์อื่น ๆ สามารถแสดงผลได้ตามอัตภาพ
• สำหรับ css3 มีการใช้งานคำสั่งค่อนข้างหลากหลาย ไม่ว่าจะเป็นคำสั่ง basic ที่นิยมใช้กันไปจนถึงคำสั่งที่มีการใช้งานซับซ้อน เช่น box-shadow, text-shadow, border-radius, multiple-background, transition, transform และ fontface (สามารถศึกษาได้จากเว็บไซต์ต่างประเทศชั้นนำทั่วไป)
• สำหรับ การแสดงผลในมือถือนั้น จะยึด iphone ซึ่งแสดงผลแนวนอนเป็นหลัก (resolution 480px) แต่ด้วยความที่ตัวเองเบี้ยน้อย เลยไม่มี iphone เอาไว้ test แต่โชคดีที่มีคนพัฒนา virsual iphone มาให้ได้ใช้กัน ถ้าลอง search ใน google จะมีให้ลองใช้งานหลายเว็บเลย แต่ส่วนตัวแล้วชอบเว็บนี้ http://www.testiphone.com/
• สำหรับ jquery (ที่ผมมีปัญหา คนอื่นอาจจะชิล ๆ) จะเป็น jquery ที่เอามาใช้สำหรับเปลี่ยน css ในการเปลี่ยนการแสดงผลเป็นแบบต่าง ๆ (css switcher) ซึ่งแค่เปลี่ยนอย่างเดียวมันไม่เท่าไหร่ แต่พอเปลี่ยนแล้วให้มันจำสถานะเดิมไว้ด้วยนี่สิ งานเข้า!!! แค่ส่วนนี้ส่วนเดียวใช้เวลาหาหลายวันเหมือนกัน และแล้วก็เจอ ตัวที่นำมาใช้นำมาจากเว็บนี้ http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/
• การทดสอบการเข้าถึงข้อมูลสำหรับคนพิการผ่านโปรแกรมอ่านหน้าจอ (screen reader) ได้ติดต่อ เชิญชวน ขอความกรุณา(ไม่รู้จะใช้คำไหนดี) ผู้พิการทางการมองเห็นที่รู้จักกันให้มาช่วยทดสอบให้ ขอกราบขอบพระคุณที่เสียสละเวลามาช่วยทดสอบด้วยครับ
• ประสบการณ์ในการใช้งานของผู้ใช้ที่เป็นผู้พิการ (user experience for person with disabilities) ถือว่าผมเองโชคดีที่มีโอกาสได้ไปเป็นวิทยากรบรรยายและมีโอกาสพบปะพูดคุยกับผู้เชี่ยวชาญทางด้าน web accessibility ซึ่งเป็นผู้พิการทางการมองเห็น จึงได้ปรึกษาข้อข้องใจและปัญหาต่าง ๆ ที่ตัวเองพบ ซึ่งเป็นประสบการณ์ที่มีประโยชน์มากเพราะได้นำมาใช้เต็มที่เลย

โปรแกรมและเว็บไซต์สำหรับใช้ในการตรวจสอบความเป็น Web Accessibility :

• XHTML – http://validator.w3.org/
• HTML5 – http://html5.validator.nu/
• WCAG – http://achecker.ca/checker/index.php
• Color Contrast Analyzer (Program) – http://www.paciellogroup.com/resources/contrast-analyser.html

บ่นสรุป

ณ ตอนนี้ผลงานที่ทำ เสร็จไปแล้วแค่ประมาณ 50% ของทั้งหมดที่ตั้งใจไว้ หวังใจไว้ว่าจะพยายามทำให้ได้มากที่สุดเท่าที่ตัวเองต้องการ เพราะถึงยังไงผลสุดท้ายสิ่งที่มีค่ามากกว่ารางวัลก็คือประสบการณ์นั่นเอง