Accessibility

1. หัวข้อนี้คืออะไร

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

2. ทำไมหัวข้อนี้สำคัญ

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

3. ตัวอย่างจากชีวิตจริง

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

4. แนวคิดหลักที่ต้องเข้าใจ

• รูปที่มีความหมายควรมี alt ที่สื่อความหมายของรูปอย่างชัดเจน
• alt ที่ดีควรสั้น ชัด และตรงจุด ไม่ต้องเล่าเกินสิ่งที่รูปกำลังสื่อ
• ไม่ควรใส่คำอย่าง "รูปภาพของ..." ทุกครั้งโดยไม่จำเป็น เพราะมักไม่ได้เพิ่มประโยชน์
• ถ้ารูปเป็นเพียงของตกแต่งและไม่ได้เพิ่มความหมายให้เนื้อหา อาจใช้ `alt=""` ได้
• alt ที่ไม่ดีมักกว้างเกินไป คลุมเครือ หรือไม่เกี่ยวกับสิ่งที่รูปกำลังสื่อ
• การเขียน alt ควรคิดจากบทบาทของรูปในหน้านั้น ไม่ใช่คิดจากชื่อไฟล์หรือสิ่งที่คนสร้างรูปอยากเล่า

5. การทำงานทีละขั้นตอน

• 1) ดูก่อนว่ารูปนั้นมีความหมายต่อเนื้อหาหรือไม่
• 2) ถ้ามีความหมาย ให้เขียน alt ที่สรุปใจความของรูปแบบสั้นและชัด
• 3) ถ้ารูปเป็นของตกแต่งล้วน ๆ และไม่เพิ่มความหมาย ให้พิจารณาใช้ `alt=""`
• 4) ตรวจว่า alt ไม่กว้างเกินไป และไม่ยัดคำที่ไม่จำเป็นอย่าง "รูปภาพของ..." ทุกครั้ง
• 5) ลองถามตัวเองว่า ถ้าไม่เห็นรูป ผู้อ่านจะเข้าใจจาก alt นี้ได้หรือไม่

6. ตัวอย่างเชิงเทคนิค / โค้ด

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

7. จุดที่ผู้เริ่มต้นมักสับสน

• คิดว่า alt คือช่องที่ต้องใส่ข้อความอะไรก็ได้ให้ครบ
• ใส่ alt กว้างเกินไป เช่น "รูปภาพ" หรือ "ภาพประกอบ" จนไม่ช่วยสื่อความหมายจริง
• เขียน alt ยาวเกินจำเป็นจนกลายเป็นอธิบายทุกอย่างแทนที่จะสรุปใจความ
• ใส่คำว่า "รูปภาพของ..." ทุกครั้งแม้ในกรณีที่ไม่จำเป็น
• ไม่แน่ใจว่าเมื่อไรควรใช้ alt ว่างสำหรับรูปตกแต่ง

8. เปรียบเทียบกับสิ่งที่ใกล้เคียง

9. สรุปท้ายบทแบบจำง่าย

• alt text คือข้อความทางเลือกของรูปภาพ
• รูปที่มีความหมายควรมี alt ที่สั้น ชัด และตรงจุด
• รูปตกแต่งล้วน ๆ อาจใช้ `alt=""` ได้ในบริบทที่เหมาะสม
• อย่าใส่ alt แบบกว้าง ๆ หรือยัดคำว่า "รูปภาพของ..." โดยไม่จำเป็น

10. Lab สำหรับ Playground

ฝึก 3 ระดับเพื่อให้เข้าใจการเขียน alt ตั้งแต่การเพิ่ม alt พื้นฐาน การแก้ alt ที่ไม่สื่อความหมาย ไปจนถึงการเลือกว่าแต่ละรูปควรใช้ alt แบบใด