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

พยายามขบคิดสรุป อะไรบางอย่างให้กับผู้ที่สนใจเรื่องนี้ ไม่แน่ใจว่าจะเป็นประโยชน์ มากน้อยเพียงใดนะครับ ช่วงนี้ รู้สึกว่า 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) ของคุณนั้น เป็นไปตามลำดับที่ดี ไม่ใช่ข้ามไปข้ามมาไม่รู้เรื่อง

เนื้อหา และ หน้าตาการแสดงผล

• ต้องแน่ใจว่า หน้าเวปของคุณเมื่อรูปภาพขาดหายไป หรือ โหลดมาไม่ได้ เนื้อหาของคุณก็ยังอ่านเข้าใจได้อยู่
• ต้องแน่ใจได้ว่าเมื่อ user กดขยายตัวหนังสือเป็นสองเท่าจาก original size แล้ว ยังอ่านรู้เรื่อง layout ไม่เละเทะจนใช้งานไม่ได้ (บางคนอาจทำส่วนสำหรับ accessibility แยกไว้อีกส่วนเลยก็ได้)
• ต้องแน่ใจว่า ทุกสิ่งทุกอย่างบนหน้าจอที่คุณออกแบบนั้น ใช้งานได้ด้วย keyboard เพียว ๆ ทั้งหมด เมื่อเวลาที่ไม่มี mouse
• ถ้าเป็นไปได้ให้เขียน header หรือ link ที่เข้าใจง่าย ๆ เพื่อให้เข้าใจถึงเนื้อหาที่มันจะ link ไปสู่ หรือ ที่มันเป็นหัวข้ออยู่
• สำหรับผู้ที่ตาบอดสี หรือ มีปัญหาทางสายตา หรือ ใช้จอที่เป็นรุ่นโบราณ คุณต้องแน่ใจได้ว่าหน้าเวปของคุณนั้น ตัวหนังสือ พื้นหลัง และ อื่น ๆ สามารถมองเห็นได้ชัดเจน ไม่กลืนกินกันจนดูไม่รู้เรื่อง
• อย่าใช้ effect หรือ รูปภาพ เนื้อหาที่มัน กระพริบ หรือ เด้งไปเด้งมา เกิน 3 ครั้งต่อวินาที เพราะจะสร้างความรำคาญให้กับผู้ใช้ (ความเป็นจริง คงเอาไปใช้หากินยากหน่อยล่ะ)
• อย่าใช้คำสั่งซ่อน cursor หรือ ตัวชี้ทางอื่น ๆ เพราะ user ที่ใช้ keyboard สำหรับเลื่อนดูเนื้อหา หรือ ใช้ keyboard แทน mouse นั้นจะได้ทราบว่าตอนนี้เค้าอยู่ ณ ​ที่จุดใดของหน้าเวปนั้น ๆ
• คุณไม่จำเป็นต้องบอก user ว่า ข้อความต่อไปเป็นอะไรที่สำคัญมาก หรือ ข้อความที่ highlight อยู่นั้นเป็นสิ่งที่ user ต้องจดต้องจำ (ลงไปในเนื้อหา) เพราะมีทางอื่นที่จะสื่อให้ user เข้าใจได้ไม่จำเป็นต้องเขียนอธิบายลงไปในเนื้อหา

มีต่อตอนที่สองอีกครับ ต้องขออภัยด้วยนะครับช่วงนี้ ภาระหน้าที่ค่อนข้างแน่นขนัด จะพยายาม แอบมาเขียนต่อ ที่ค้าง ๆ ให้เสร็จครับผม ขอบคุณครับ พบกันรอบต่อไปครับ