checklist เบื้องต้น กับ Web Accessibility (ตอนที่ 2)

กลับมากันอีกรอบครับ ต่อจาก ตอนที่ 1 ที่ได้เคยนำเสนอไปเมื่อเดือนที่แล้ว ทีนี้เราจะมาว่ากันในส่วนที่เหลือกันต่อว่าเราต้องตระเตรียมอะไรกันอีกบ้างสำหรับ Web Accessiblity ครับ

เนื้อหาที่เป็น Dynamic

• เราไม่ควรใช้ JavaScript events ใด ๆ ใช้โหลดหน้าเวปใหม่ขึ้นมาแทนที่เมื่อคลิก หรือ (จะอธิบายอย่างไรให้เห็นภาพดี) เหมือนเปลี่ยนหน้าใหม่แต่อยู่ที่ที่เดิม เหมือนการใช้ tag iframe

รูปภาพ และ multimedia (ขออนุญาติทับศัพท์ครับ)

• ต้องแน่ใจว่าคุณใส่ attribute alt ให้กับรูปภาพครบถ้วนแล้ว ถ้าเป็นไปได้พยายามใส่ข้อความอธิบายแบบกระชับได้ใจความ ลงไปด้วยนะครับ
• ถ้ามี link ที่รูปภาพ ต้องใส่ alt เพื่ออธิบาย link นั้น ๆ นะครับ
• ว่าด้วยเรื่อง คำอธิบายที่กระชับ อาทิ มีรูป ๆ หนึ่งที่ผมถ่ายคู่กับพร ควรจะอธิบายให้เข้าใจได้ว่า รดิส และ พร อันทะ เดินท่องไปตามถนน ม.ขอนแก่น ไม่ใช่แบบนี้ รูปถ่ายของอีปลา และ อีพร
• ในกรณีของไฟล์ vdo หรือ ไฟล์เสียง เป็นไปได้ควรทำบรรยายเป็นภาษานั้น ๆ (ตามกลุ่มเป้าหมายก็พอนะครับ หรือ ใครจะฟิตทำให้รองรับทุกประเทศก็ได้ ผมช่วยเชียร์) อาทิ เช่น vdo สอน photoshop ที่เป็นภาษาอังกฤษ จะเอามาสอนคนไทยก็เอามาพากย์ เป็นภาษาไทยเสีย หรือ ใส่ subtitle บรรยายไปด้วย
• อีกวิธีหนึ่งคือ ทำไฟล์บรรยายเกี่ยวกับไฟล์ vdo นั้น ๆ แยกออกมาต่างหากสำหรับผู้ที่ไม่สามารถมองเห็น เพื่อที่จะให้เขาได้เข้าใจไฟล์ vdo นั้น ๆ อย่างแจ่มแจ้ง (อาจจะไม่จำเป็นต้องทำเป็นไฟล์เสียงก็ได้ ทำเป็นเอกสาร .html อธิบายโดยละเอียดก็ได้ แยกกัน)
• ถ้าไฟล์ vdo นั้นไม่สามารถ autoplay ได้คุณต้องแน่ใจด้วยว่า มีปุ่มกด vdo panel (play, pause, stop …) ที่สามารถเข้าถึงได้ ใช้งานได้จริง ๆ
• การใช้ background image แทนตัวหนังสือควรใช้อย่างเหมาะสมนะครับ เอาเท่าที่จำเป็น
• ตรวจสอบให้แน่ใจว่า text ที่คุณใช้สามารถแสดงผลได้ดีในทุก ๆ browser ต้องตรวจสอบให้แน่ใจว่า font ตระกูลที่ใช้นั้นแสดงผลได้ดี มีในทุก ๆ OS (เรื่องลิขสิทธิ์ต้องช่วยตัวเองครับ ฮ่า ๆ)
• อย่าใช้ CAPCHA ถ้าไม่จำเป็นจริง ๆ ครับ ถ้าจะต้องใช้ควรจะเป็น audio CAPCHA ด้วยนะครับ

เกี่ยวกับแบบฟอร์มต่าง ๆ

• พยายามตั้งชื่อ ให้กับ field ต่าง ๆ ด้วย label เสมอ ๆ ถ้ามันเป็น field ที่ไม่มีคำอธิบาย หรือ คำจำเพาะให้ ให้ใส่ label เหมือนกันแต่ซ่อนไว้ด้วย CSS แล้วใช้ title เป็นตัวอธิบายว่า field นั้นใช้กรอกอะไร หรือ มีไว้เพื่อทำอะไร
• ใช้ fieldset และ legend ให้เป็นประโยชน์ในการแยกแยะ กลุ่ม filed ให้เป็นหมวดหมู่ อาทิ เหล่า radio และ checkbox ทั้งหลายนั้นควรถูกรวบไว้ใน legend ให้เรียบร้อยนะครับ (เสริมจากบทความเดิมของผม ที่อธิบายเกี่ยวกับการเขียน form)
• การแจ้ง error ควรแจ้งเป็นรูปแบบของ text จะดีกว่า หรือ ถ้าอยากทำเป็นรูปภาพ icon แสดงหลัง field ที่ error กรอกผิด ก็ให้เอา icon นั้นมาทำเป็น background image แล้วซ่อน ตัวหนังสือไว้ด้วย CSS ซะ และ ควรอย่างยิ่งที่จะวาง ข้อความสำหรับแจ้ง error ไว้หลัง field ที่ผิดนั้นเสมอ หรือ ทำเป็น กล่องแจ้งเตือนไว้ที่ส่วนบนของหน้าเลย พร้อมคำอธิบายพอเข้าใจ
• ใส่คำอธิบายสั้น ๆ สำหรับ field ที่อาจจะทำให้เกิดการงง สงสัยของ user หรือ ทำ link ให้กดไปอ่านคำอธิบาย สำหรับกรณีที่ต้องอธิบายโดยละเอียด
• จัดลำดับหน้าให้ดี อย่าให้ user complete ขั้นตอนที่สำคัญ ๆ โดยปราศจากการถาม ว่า user ต้องการ "ยืนยัน" ข้อมูลที่กรอกมาแล้วใช่หรือไม่? และ ต้องอนุญาติให้ user กลับไปแก้ไขได้ด้วยครับ ถ้าเขากรอกผิดพลาด
• พยายามใช้ xhtml elements ในทางที่ถูกต้อง เหมาะสมกับข้อมูลที่สุดครับ

เสร็จแล้วก็ต้องทดสอบ

• validate ให้เป็นนิจครับ อะไรที่ยังผิดพลาดก็พยายามแก้ไขให้เรียบร้อย ยกเว้นกรณีที่จำเป็น ก็ถามเจ้านาย ถามลูกค้าดูว่าอยากได้ ทางออกแบบไหน (ในความเป็นจริง บางอย่างเราก็ต้องอนุโลม)
• ดูเรื่องสีว่า สามารถทำให้คนตาบอดสีมองได้หรือไม่ ลองเช็คที่นี่ดูนะฮะ http://www.vischeck.com
• ให้ท่านผู้เชี่ยวชาญ หรือ ผู้ใช้งานจริงทดสอบ accessibility ของเวปไซท์ของคุณดูครับ

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

พบกันใหม่ครับ สวัสดี