ช่วงเวลายุ่ง ๆ กับการประกวดเว็บไซต์ที่ทุกคนเข้าถึงได้ (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 :

บ่นสรุป

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

Back to Top

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

  1. Radiz Sutthisoontorn
    Radiz Sutthisoontorn

    ขอบคุณที่ร่วมแบ่งปันครับ ผลงานนี่คงต้องรอดูอีกซักพักนิดๆ หรือใหญ่ๆ ครับเนี่ย

    Reply

  2. dome

    thk for share..

    Reply

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top