Tag: check list

กลับมากันอีกรอบครับ ต่อจาก ตอนที่ 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 ด้วยนะครับ

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

เรามาเข้าสู่ checklist กันเลย

Markup

• แยกคำสั่งแสดงผลออกจาก markup ทั้งหมด คงเหลือไว้แต่ markup เพียว ๆ เท่านั้น และ ต้องไม่ลืมว่าเราต้องใช้ markup ให้ตรงกับชนิดของ content ที่ควรจะเป็น
• Header ทั้งหลาย สำคัญ และ เป็นประโยชน์มากต่อผู้พิการทางสายตา เพราะฉะนั้นควรลำดับความสำคัญ​ตามเนื้อหาให้ดีครับ (สมมติเหมือนกับว่าเรากำลังเขียนรายงานส่งอาจารย์ หรือ เจ้านายนั่นแหละครับ)
• คุณต้องมั่นใจว่า หลังจากเขียน markup แล้ว เนื้อหาของหน้าเวปนั้น ๆ อ่านเข้าใจ สมบูรณ์ไม่งง และ ใช้ <title> (xhtml tag) ให้เหมาะสมกับเนื้อหาของหน้านั้น ๆ จริง ๆ
• ใช้ lang (xhtml attribute) ช่วยบ่งบอกว่า เนื้อหาของหน้าเวปของคุณนั้นเป็นภาษาอะไร (ภาษามนุษย์นะครับ) เช่น <p><span lang="en">Hello</span> แปลว่า <q>สวัสดี</q></p>
• พยายามทำ link สำหรับ skip to content ไว้บนสุดของลำดับการเขียน markup (ก่อนการเขียน navigation หลักของเวป) เพื่อข้ามไปหาเนื้อหาหลัก (ใช้ได้ทั้งคนปกติ และ ผู้พิการทางสายตา)
• หัวข้อของตารางก็ควรใช้ <th> ครอบนะครับ ที่สำคัญคุณต้องวางเซลล์ที่เป็นเนื้อย่อยของหัวข้อนั้น ให้สัมพันธ์กันด้วยนะครับ (ทั้ง row และ column)
• ต้องแน่ใจเสมอว่า tabindex (xhtml attribute) ของคุณนั้น เป็นไปตามลำดับที่ดี ไม่ใช่ข้ามไปข้ามมาไม่รู้เรื่อง