Accessibility Links

• Skip to Content
• Skip to Main Navigation
• Skip to thaicss.com Search
• Accessibility help
• Access keys help
• 

 

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

โดย Radiz เมื่อ 2008-09-10 22:59:37 ดูทั้งหมด 887 ครั้ง

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

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

• พูดคุยแลกเปลี่ยนกับ: checklist เบื้องต้น กับ Web Accessibility (ตอนที่ 1)

  • ทั้งหมด 15 ความคิดเห็น
  • อ่านความคิดเห็นของ : checklist เบื้องต้น กับ Web Accessibility (ตอนที่ 1)

• About Author: Radiz

  • 
  • Radiz

Back to Top

Tags:

1. WCAG
2. WAI
3. Checklist

เนื้อหาที่เกี่ยวข้อง

1. checklist เบื้องต้น กับ Web Accessibility (ตอนที่ 2)
2. checklist เบื้องต้น กับ Web Accessibility (ตอนที่ 1)
3. ผ่านมา แต่ไม่ได้ผ่านไป
4. มาประกวด Web Accessibility กันเถอะครับ !!!
5. SEO ผลพลอยได้จากการทำ Website ให้เกิด Accessibility สูง ๆ

หรือกำลังสนใจ

1. การสร้าง Graph โดยใช้ XHTML CSS

Unknown Version Unknown