หลวงพี่โอ๊ต เคยแนะนำไว้นานแล้วค่ะว่าอยากให้เขียนเอ็นทรี่เกี่ยวกับการทำเว็บอย่างไรให้ผู้พิการที่ต้องใช้อุปกรณ์ต่างๆ ช่วยในการใช้คอมพิวเตอร์และอินเตอร์เน็ต สามารถเข้าถึงและใช้งานได้ด้วย หลังจากที่ติดท่านไว้ซะนาน วันนี้ฤกษ์งามยามดี (หลังส่งวิทยานิพนธ์ให้บัณฑิตวิทยาลัยไปเรียบร้อย เย้!) เลยได้โอกาสมาเขียนให้อ่านกันค่ะ ก่อนอื่นไปดู VDO กันก่อนมั๊ยคะ

 

วีดีโอที่จะให้ดูกันต่อไปนี้ มีชื่อว่า WCAG 2.0 เค้าจะโชว์ให้ดูกันค่ะว่าคนพิการแต่ละประเภทเข้าถึงข้อมูลบนหน้าเว็บ หรือบนบล๊อกกันได้ยังไงนะคะ ส่วนเสียงสังเคราะห์ (speech synthesizer) นาย sharky ที่ได้ยินมาแร๊บเป็นเพื่อนคุณเดวิดนั่นคือเสียงโปรแกรมอ่านจอภาพที่ตัวเราและเพื่อนๆ คนตาบอดทั่วโลกใช้กันค่ะ เค้ามีชื่ออย่างเป็นทางการว่า JAWS ค่ะ

 

กดไปดูและฟัง กันได้ที่นี่ค่ะ

 

 

แล้ว WCAG 2.0 คืออะไร???

 

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

 

ทุกวันนี้ WCAG ได้รับความนิยมและใช้กันอย่างแพร่หลายในหมู่ของนักพัฒนาเวบไซท์  มีหน่วยงานทั่วไปได้ยึดถือนำไปปรับให้เข้ากับกฎระเบียบและมาตรฐานเวบไซท์ของตน

 

ในส่วนของประเทศไทยก็เช่นกัน ได้มีการหยิบยกเอา WCAG 1.0 มาเป็นแม่บทในการร่างระเบียบของการพัฒนาเวบไซท์ต่างๆ หรือ TCAG เพื่อเป็นโครงการนำร่องใช้ภายในประเทศต่อไป  (ตอนนี้ไทยเราก็เริ่มมีการรื้อเว็บภาครัฐออกมาแก้กันแล้ว)

 

สำหรับกฎการพัฒนาเวบไซท์ที่ทุกคนสามารถเข้าถึงได้หลักๆ ใน WCAG 2.0 ประกอบไปด้วยหลักการสี่ข้อ ดังนี้

 

1. Perceivable หรือ สามารถรับรู้ทางประสาทสัมผัสได้ ซึ่งโดยพื้นฐานแล้วก็คือประสาทสัมผัสทางการมองเห็น ทางการได้ยิน โดยการรับรู้ดังกล่าวอาจสื่อผ่านมาจากการใช้ web browser หรืออุปกรณ์สิ่งอำนวยความสะดวกต่างๆ เช่น โปรแกรมอ่านจอภาพ หรือโปรแกรมขยายจอภาพ เป็นต้น

 

(ตัวอย่างเช่น เว็บที่ใช้รูปในการสื่อความหมาย รูปนี้สำหรับคนมองเห็นอาจสามารถรับรู้ข้อมูลที่ต้องการสื่อได้นะคะ แต่สำหรับคนตาบอดที่ต้องใช้โปรแกรมอ่านจอภาพช่วยในการอ่านเว็บ จะไม่สามารถรับรู้สารที่ต้องการสื่อได้ หากนักพัฒนาเว็บไม่ใส่คำบรรยายภาพไว้ใน alt tag ด้วย หรือสำหรับคนหูหนวกที่เข้าเว็บที่ใช้เสียงในการส่งสาร แต่หากไม่มีการใส่คำบรรยายเป็นตัวอักษร (caption) ให้พวกเค้าสามารถอ่านได้ไว้ด้วย คนหูหนวกก็จะไม่สามารถรับรู้สารที่ส่งผ่านเสียงได้ค่ะ)

 

2. Operable หรือ สามารถใช้งานได้จริง โดยผู้ใช้สามารถสื่อสารกับองค์ประกอบเนื้อหาของเวบไซท์ได้โดยผ่านเมาส์ แป้นพิมพ์ หรืออุปกรณ์สิ่งอำนวยความสะดวกอื่นๆ

 

(ตัวอย่างเช่น ลิงค์ที่ใช้รูปภาพเป็นสื่อ หากผู้ออกแบบเว็บไม่ใส่คำบรรยายลิงค์ไว้ด้วย คนตาบอดก็จะไม่สามารถเลือกลิงค์ที่ต้องการไปได้ถูกต้องค่ะ เพราะโปรแกรมอ่านจอภาพไม่สามารถอ่านรูปได้ค่ะ หรือถ้าหากผู้ออกแบบเว็บวางลิงค์ไว้ติดกันมากไป ผู้พิการแขนขาอาจมีปัญหาในการบังคับเม้าส์ให้เลื่อนไปยังจุดที่ต้องการคลิกเลือกได้ แต่หากวางลิงค์ไว้ห่างกันหน่อย อาจทำให้ผู้พิการแขนขาสามารถควบคุมเม้าส์ หรือ track ball ไปยังจุดต่างๆ เพื่อคลิกเลือกได้ง่ายขึ้นค่ะ การใส่ชื่อเว็บ หรือตั้งหัวข้อในกรอบต่างๆ เช่น frame หรือ title ให้สอดคล้องกับเนื้อหาก็จะช่วยให้การ navigate ทำได้ง่ายขึ้นด้วยค่ะ

 

นอกจากเรื่องหน้าตา (interface) แล้ว ‘operable' นี้ก็ยังหมายรวมไปถึงความสามารถในการควบคุมเนื้อหาของเว็บโดยผู้ใช้ด้วยค่ะ เช่น การให้ผู้ใช้สามารถสั่งคำสั่งต่างๆ ได้ด้วยคีย์บอร์ด นอกเหนือไปจากการต้องใช้เม้าส์คลิกเพียงอย่างเดียว หรืออย่างบางเว็บที่มีเสียงเพลง ก็ควรมีคำสั่งให้ผู้ใช้สามารถเลือกกดปิดเพลงได้ (อันนี้นี่สำหรับคนตาบอดอย่างเรา ถ้าไปเจอบล๊อก/เว็บไหนที่มีเพลงแล้วล่ะก็...โบกมือลากันได้เลย เพราะเสียงเพลงจะดังกลบเสียงโปรแกรมอ่านจอภาพ จนไม่สามารถได้ยินเนื้อหาบนหน้าบล๊อก/เว็บนั้นๆ ได้ค่ะ) และอีกตัวอย่างคือการกำหนดค่าเวลาในการทำกิจกรรมบนเว็บ เช่น online banking ที่เราใช้อยู่ที่อังกฤษนี้ จะมีช่องให้ผู้พิการสามารถเลือกได้ว่าไม่ให้มีการ refresh หน้า เมื่อหมดเวลาตามที่กำหนด อะไรประมาณนี้ค่ะ)

 

3. Understandable หรือสามารถเข้าใจได้ ผู้ใช้สามารถเข้าใจ เนื้อหาต่างๆ บนเวบไซท์ได้โดยปราศจากความสับสนหรือความคลุมเครืออื่นใด

 

(การออกแบบหน้าเว็บให้ดูสวยงามด้วยสายตาโดยที่รู้เท่าไม่ถึงการว่าการจัดวางลิงค์, รูปภาพ, หรือข้อความ ต่างๆ ไว้ตามจุดที่ดูด้วยตาแล้วอาจดูดี แต่พอนักท่องเว็บตาบอดที่ใช้โปรแกรมอ่านจอภาพมาเจอ อาจอ่านแล้วสับสน และไม่ make sense ได้ ทั้งนี้เพราะโปรแกรมอ่านจอภาพมีระบบในการอ่านเฉพาะ โดยจะเริ่มอ่านตั้งแต่ มุมซ้ายบน แล้วจะอ่านไปทางขวาของบรรทัดบนสุดจนจบ ก่อนจะเลื่อนลงมาอ่านในบรรทัดถัดไป เป็นต้นค่ะ

 

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

 

ในกรณีที่ต้องมีการกรอกเนื้อหาบางอย่างลงไปในช่องที่กำหนด input เช่น search engines การทำกิจกรรมดังกล่าวจะต้องไม่มีผลกระทบอื่นใดในส่วนต่างๆ ของเนื้อหาเวบส่วนอื่นๆ ซึ่งอาจก่อให้เกิดความสับสนหรือเข้าใจผิดต่อผู้ใช้ และเมื่อการกรอกนั้นไม่ตรงไปตามเงื่อนไขที่ระบบได้ถูกจัดตั้งไว้ก็ควรจะมีข้อความอธิบายให้ชัดเจนว่าส่วนที่ผิดหรือไม่ผ่านนั้นเป็นเพราะสาเหตุใด เช่น การกรอกวันที่ บางเว็บจะให้เอาเดือนขึ้นก่อน ในขณะที่บางเวบกำหนดให้เอาปีขึ้นก่อน เว็บมาสเตอร์ควรมีตัวอย่างประกอบเพื่อให้เข้าใจได้ง่ายค่ะ)

 

4. Robust หรือพร้อมรับกับเทคโนโลยีในอนาคต เวบไซท์จะต้องมีคุณสมบัติที่สามารถปรับใช้กับเทคโนโลยีรูปแบบต่างๆ ได้รวมถึงเทคโนโลยีสิ่งอำนวยความสะดวกอื่นๆ ให้สามารถเข้าถึงเนื้อหาของเวบได้อย่างสมบูรณ์

 

(สำหรับข้อนี้ก็ง่ายๆ ค่ะ คือเขียนเว็บให้ได้ตามมาตรฐานของ w3c ซึ่งก็มีตัวช่วยสำหรับคนเขียนเว็บอยู่แล้ว ด้วยการเอาเว็บที่ตัวเองเขียนเข้าโปรแกรม validator ต่างๆ เพื่อดูว่าเว็บที่เราสร้างขึ้นมานั้นผ่านมาตรฐานหรือไม่ค่ะ)

 

อ้างอิงจาก: http://www.w3.org/TR/WCAG20/  

 

อ่านมาถึงบรรทัดนี้นักพัฒนาเว็บทั้งหลายอาจพูดว่า "ทำไมมันต้องยุ่งยากขนาดนี้ด้วยนะ" แต่ขอบอกว่าการทำเว็บแบบนี้ ไม่ใช่แค่เพื่อผลประโยชน์สำหรับคนเฉพาะกลุ่ม เช่น คนพิการอย่างเจ้าของบล๊อกนี้หรอกนะคะ แต่เพื่อประโยชน์ของคนอื่นๆ ด้วยค่ะ การทำเว็บให้เข้าใจได้ง่าย ดูสะอาดตา ไม่รกรุงรังเต็มไปด้วยลิงค์/รูปภาพประดามี และใช้งานได้ง่าย ก็จะทำให้ประสบการณ์การใช้เว็บของทุกๆ คน ดีขึ้นค่ะ จึงอยากเชิญชวนให้นักพัฒนาเว็บทั้งหลาย อย่าห่วงแต่เพียงความสะดวกสบายในการทำเว็บออกมาให้ได้หลายๆ เว็บ และเน้นเพียงความสวยงามเพียงอย่างเดียวแต่ขาดคุณภาพเลยนะคะ เดี๋ยวจะเหมือนที่มีคำพังเพย (หรือสุภาษิตกันแน่นะ) โบราณที่ว่าไว้ว่า "สวยแต่รูป จูบไม่หอม" ค่ะ

 

หมายเหตุ: ขอขอบคุณเปิ้ล guru ทางด้าน web accessibility ที่ช่วยให้ข้อมูลและตรวจสอบความถูกต้องของข้อมูลในเอนทรี่นี้ด้วยนะคะ

Comment

Comment:

Tweet

ดีใจด้วยครับพี่ปอมสำหรับเรื่องวิทยานิพนธ์นะครับ
เรื่อง accessibility นี่ไม่ใช่แค่ part technical อย่างเดียวเนาะครับ ทางด้าน content ก็ต้องเอื้อด้วย
ส่วนบล็อกผม ตอนนี้อัพแต่การ์ตูนหลายตอนแล้วแฮะ ไม่มีคำบรรยายซะด้วย อื้มมมม เอาเป็นว่าอาจจะมีบล็อกอื่นไว้ใช้สำหรับเขียนอะไรเป็นเรื่องเป็นราวอีกบล็อกในอนาคตก็เป็นได้ครับ

#6 By ไปกะเป้ on 2010-05-26 13:52

ขอบคุณสำหรับสาระความรู้ค่ะ surprised smile Hot!

#5 By Blood Lust Vampyre (::[o]::) on 2010-05-24 18:57

ขอบคุณสำหรับบทความดีดีนะคะ
อยากทราบว่าถ้าจะทดสอบด้วยโปรแกรม JAWS นี่ ดาวน์โหลดได้ที่ไหนหรอค่ะ และทดลองใช้ได้อย่างไรคะ sad smile
ต้องเสียค่าใช้จ่ายหรือเปล่าคะ
ขอบคุณมากค่ะๆ :D

#4 By googiw (125.25.176.160) on 2010-05-24 10:21

หากใครสนใจ สามารถ download เอกสาร
คู่มือการพัฒนาเว็บไซต์ให้เป็น "เว็บไซต์ที่ทุกคนเข้าถึงได้" จากกระทรวงเทคโนโลยีสารสนเทสและการสื่อสาร

ได้ตามลิ้งนี้
http://www.tab.or.th/tabradio/download/twcag2009.doc

Credit: www.tabod.com

#3 By ผ่านมา (58.64.92.133) on 2010-05-24 01:28

ว้าว ละเอียดดีจังครับ (อ่านแล้วทำให้รู้สึกอยากหาฉบับเต็มมาอ่าน)
Hot! Hot!
อยากให้คนได้อ่านกันเยอะๆ big smile

#2 By pawin35 on 2010-05-23 20:09

ได้ความรู้เยอะเลยค่ะ
ขอบคุณค่ะbig smile Hot! Hot! Hot!

ป.ล.แต่เว็บไม่ถึงไหนเลย คนทำมันดอง (ก็เราเนี่ยแหละ ฮาาา)