แอตทริบิวต์ alt มีการ อธิบายทางข้อความ ที่อธิบายเนื้อหาหรือวัตถุประสงค์ของรูปภาพ บริการให้แก่ผู้ใช้และเครื่องมือที่มองไม่เห็นรูปภาพ
html
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
แอตทริบิวต์ alt มีการ อธิบายทางข้อความ ที่อธิบายเนื้อหาหรือวัตถุประสงค์ของรูปภาพ บริการให้แก่ผู้ใช้และเครื่องมือที่มองไม่เห็นรูปภาพ
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt ออกเสียง เพื่อให้ผู้ใช้ตาบอดทราบว่ารูปภาพถ่ายทำอะไร หากไม่มี พวกเขาจะได้ยินเพียงชื่อไฟล์หรือแค่ "รูปภาพ" — ไม่มีประโยชน์alt แทนไอคอนรูปภาพที่เสียalt เพื่อเข้าใจและสร้างดัชนีรูปภาพ (image SEO)<!-- ✅ describe the MEANING, not "image of..." -->
<img src="dog.jpg" alt="A golden retriever catching a frisbee" />
<!-- ✅ for functional images, describe the ACTION -->
<a href="/home"><img src="logo.png" alt="Acme home" /></a>
<!-- ✅ DECORATIVE images get an EMPTY alt so screen readers skip them -->
<img src="divider.png" alt="" />
alt="" (ว่างเปล่า แต่มี) มีความสำคัญ: บอก screen reader ว่า "นี่เป็นสิ่งตกแต่ง ละเว้น" การละเว้น alt ทั้งหมดจะแตกต่างกัน — จากนั้นหน่วยอ่านอาจประกาศชื่อไฟล์
alt เป็นแอตทริบิวต์ความสามารถเข้าถึงที่สำคัญที่สุดสำหรับรูปภาพและเป็นข้อกำหนดด้านกฎหมายตามมาตรฐานความสามารถเข้าถึง (WCAG)
ทำให้เนื้อหาสามารถเข้าถึงได้โดยผู้ใช้ที่มองไม่เห็น ให้ fallback เมื่อรูปภาพแตกหัก และช่วยด้าน SEO — อธิบายว่ารูปภาพ หมายความว่าอะไร ในบริบท และใช้ alt="" สำหรับรูปภาพที่ตกแต่งอย่างแท้จริง