วิธีเพิ่มข้อความทางเลือก (Alt Text) เมื่อองค์ประกอบแสดงไม่ได้ใน HTML

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

ตัวอย่าง

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ alt ใน HTML:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>HTML alt attribute</title> 
  </head> 
  </body> 
  <body> 
    <p>การแทรกรูปภาพง่ายๆ</p> 
    <img src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt="ห้องสมุดบทเรียน" /> 
  </body> 
</html>

แนวทางปฏิบัติที่ดี (Best Practices):

• เขียนคำอธิบายสั้น กระชับ สื่อความหมายของรูปภาพ
• หากรูปภาพเป็นการตกแต่งเท่านั้น ใช้ alt="" (ว่างเปล่า)
• สำคัญมากสำหรับการเข้าถึงได้ (Accessibility) และ SEO
• HTML5 กำหนดให้ <img> ต้องมีแอตทริบิวต์ alt เสมอ