เครื่องมือฟรี: การเข้าถึง

ตรวจสอบข้อความ alt ของรูปภาพ

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

ฟรี ตรวจที่อยู่ที่คุณกรอกในเวลาประมาณ 20 วินาที

สิ่งที่เครื่องมือนี้ตรวจ

  • รูปภาพที่ไม่มีข้อความ alt

    องค์ประกอบ img และปุ่มรูปภาพทุกรายการที่ไม่มีแอตทริบิวต์ alt และไม่มีชื่อที่เข้าถึงได้ (accessible name) อื่น เช่น aria-label

  • รูปภาพที่เป็นลิงก์ซึ่งทำให้ลิงก์ไม่มีชื่อ

    โลโก้และไอคอนภายในลิงก์หรือปุ่มที่ไม่มีข้อความ alt และไม่มีข้อความอื่น โปรแกรมอ่านหน้าจอจึงประกาศได้เพียงว่า “ลิงก์”

  • ข้อความ alt ที่ดูเหมือนชื่อไฟล์

    ค่าอย่าง IMG_2041.jpg, DSC0042 หรือตัวเลขยาวเหยียด ซึ่งหลายระบบกรอกให้อัตโนมัติตอนอัปโหลด

  • คำทั่วไป

    ข้อความ alt ที่มีเพียง “image”, “photo”, “logo” หรือ “banner” ไม่ได้บอกใครเลยว่ารูปภาพแสดงอะไร

  • ข้อความที่ซ้ำซ้อนและซ้ำกัน

    คำอธิบายที่ขึ้นต้นด้วย “image of” ซ้ำกับข้อความลิงก์ที่อยู่ข้างกัน หรือถูกใช้ซ้ำกับรูปภาพต่างกันตั้งแต่ 3 รูปขึ้นไป

  • รูปภาพตกแต่งและรูปภาพที่ซ่อนอยู่

    รูปภาพที่ระบุ alt="" หรือ role="presentation" และรูปภาพที่ซ่อนด้วย aria-hidden หรือ CSS จะแสดงแยกไว้ เพื่อให้คุณยืนยันได้ว่าแต่ละรูปเป็นภาพตกแต่งจริง

  • ภาพตัวอย่างของแต่ละรูป

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

สิ่งที่ตรวจไม่ได้

  • บอกว่าข้อความ alt ถูกต้องหรือไม่ มีเพียงคนที่มองเห็นรูปภาพและรู้ว่ารูปนั้นอยู่ในหน้าเพื่ออะไรเท่านั้นที่ตัดสินได้
  • ตรวจรูปภาพที่ตั้งเป็นพื้นหลังด้วย CSS หรือข้อความทดแทนของกราฟิก SVG และ canvas เครื่องมือนี้แสดงเฉพาะองค์ประกอบ img และปุ่มรูปภาพ
  • ตรวจรูปภาพภายในเฟรม เช่น วิดีโอ แผนที่ และโฆษณาที่ฝังไว้
  • แสดงรูปภาพมากกว่า 150 รูป ในหน้าที่ยาวมาก เครื่องมือจะแสดง 150 รูปแรกและบอกจำนวนทั้งหมด
  • ทดสอบหน้าอื่น การสแกนฟรีแบบเต็มจะตรวจข้อความ alt ร่วมกับเกณฑ์อื่นของ WCAG ในหน้าสำคัญได้สูงสุด 5 หน้า

ทำไมจึงสำคัญ

ข้อความ alt คือสิ่งที่โปรแกรมอ่านหน้าจออ่านแทนรูปภาพ และสิ่งที่เบราว์เซอร์แสดงเมื่อโหลดรูปภาพไม่สำเร็จ เกณฑ์ความสำเร็จ 1.1.1 ของ WCAG 2.2 ระดับ A กำหนดให้รูปภาพทุกรูปที่สื่อข้อมูลต้องมีข้อความทดแทน และรูปที่ไม่สื่อข้อมูลต้องมีข้อความทดแทนแบบว่าง

การไม่มีข้อความ alt เป็นปัญหาการเข้าถึงที่พบบ่อยเป็นอันดับสองบนเว็บ การวิเคราะห์ของ WebAIM ในปี 2026 พบปัญหานี้ใน 53.1% ของหน้าแรกของเว็บไซต์ยอดนิยม 1 ล้านอันดับแรก และ 16.2% ของรูปภาพทั้งหมดที่ตรวจไม่มีข้อความ alt

เครื่องมือค้นหาก็อ่านข้อความนี้ด้วย Google ระบุว่าใช้ข้อความ alt ร่วมกับคอมพิวเตอร์วิทัศน์และเนื้อหาของหน้าเพื่อทำความเข้าใจรูปภาพ และข้อความ alt ของรูปภาพที่เป็นลิงก์ทำหน้าที่เหมือนข้อความแองเคอร์ (anchor text) ของลิงก์

วิธีอ่านผลลัพธ์

ไม่มีข้อความ alt
รูปภาพไม่มีแอตทริบิวต์ alt และไม่มีชื่ออื่น โปรแกรมอ่านหน้าจออาจอ่านชื่อไฟล์หรือข้ามรูปนั้นไป ขึ้นอยู่กับซอฟต์แวร์
ตกแต่ง
alt="" หรือ role="presentation": โปรแกรมอ่านหน้าจอจะข้ามรูปภาพนี้ ถูกต้องสำหรับภาพตกแต่ง แต่ผิดสำหรับรูปที่สื่อข้อมูลหรือเป็นเนื้อหาเดียวของลิงก์
มีข้อความ alt
รูปภาพมีคำอธิบาย เราทำเครื่องหมายรายการที่ดูผิด ส่วนที่เหลือยังต้องให้คนตรวจว่าถูกต้อง
มีชื่อจาก ARIA หรือ title
ไม่มีแอตทริบิวต์ alt แต่มีชื่อจาก aria-label, aria-labelledby หรือ title ซึ่งผ่านการทดสอบอัตโนมัติ แต่ alt ยังเป็นตัวเลือกที่เชื่อถือได้มากกว่า
ซ่อนอยู่
ไม่ได้แสดงผล หรือซ่อนจากเทคโนโลยีสิ่งอำนวยความสะดวกด้วย aria-hidden ไม่ต้องแก้ไข เว้นแต่รูปนั้นควรมองเห็นได้
ลิงก์ที่ไม่มีชื่อ
ลิงก์หรือปุ่มที่มีเนื้อหาเพียงรูปภาพที่ไม่มีข้อความทดแทน กรณีนี้ไม่ผ่านแม้ตัวรูปภาพจะเป็นภาพตกแต่งก็ตาม
ตรวจ
ข้อความ alt ที่ดูเหมือนชื่อไฟล์หรือคำทั่วไป ขึ้นต้นด้วย “image of” ซ้ำกับข้อความลิงก์ ยาวมาก หรือถูกใช้ซ้ำกับหลายรูป

วิธีแก้ปัญหาที่พบบ่อยที่สุด

  • รูปสินค้าและรูปประกอบเนื้อหา

    อธิบายสิ่งที่คนจะพลาดไปหากไม่มีรูปนั้น ตามบริบทของหน้า สำหรับสินค้า: ตัวสินค้า สี และมุมที่แสดง สำหรับรูปในบทความ: สิ่งที่รูปแสดงแต่ข้อความไม่ได้บอก

  • โลโก้ที่ลิงก์ไปหน้าแรก

    รูปภาพที่เป็นลิงก์ควรบอกว่าลิงก์พาไปที่ใด สำหรับโลโก้ที่ลิงก์ไปหน้าแรก ให้ใช้ชื่อบริษัท เช่น alt="หน้าแรก Acme" แทนคำว่า “โลโก้”

  • ไอคอนภายในลิงก์และปุ่ม

    ใส่ข้อความ alt ที่บอกการทำงานให้ไอคอน เช่น “ค้นหา” หรือ “ตะกร้า” หรือใส่ aria-label ให้ลิงก์ แล้วทำเครื่องหมายไอคอนเป็นภาพตกแต่งด้วย alt=""

  • รูปภาพตกแต่ง

    ใช้ alt="" (ค่าว่าง ไม่ใช่การไม่ใส่แอตทริบิวต์) สำหรับเส้นคั่น ลวดลายพื้นหลัง และรูปภาพที่ซ้ำกับข้อความที่อยู่ข้างกัน

  • ชื่อไฟล์ที่แพลตฟอร์มกรอกให้

    หลายแพลตฟอร์มคัดลอกชื่อไฟล์ไปใส่ในช่อง alt ตอนอัปโหลด ให้แก้ไขในที่ที่จัดการรูปภาพ: ใน Shopify ที่สื่อของสินค้า ใน WordPress ที่ช่อง Alternative Text ใน Media Library

  • แผนภูมิและอินโฟกราฟิก

    ใส่ alt สั้นๆ ที่บอกว่าแผนภูมิแสดงอะไร และใส่ข้อมูลหรือสรุปไว้ในข้อความหรือตารางข้างแผนภูมิ

รูปภาพที่ไม่มีข้อความ alt: วิธีแก้บน Shopify, WooCommerce และเว็บไซต์ทุกประเภท

คำถามเกี่ยวกับเครื่องมือนี้

ข้อความ alt คืออะไร

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

รูปภาพทุกรูปต้องมีข้อความ alt หรือไม่

องค์ประกอบ img ทุกรายการควรมีแอตทริบิวต์ alt สำหรับรูปที่สื่อข้อมูล alt จะอธิบายรูปภาพ ส่วนรูปภาพตกแต่งควรเป็นค่าว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป

ข้อความ alt ควรยาวแค่ไหน

WCAG ไม่ได้กำหนดความยาว ข้อความ alt ที่ดีมักเป็นวลีหรือประโยคสั้นๆ หากรูปภาพต้องการคำอธิบายมากกว่านั้น ให้อธิบายในเนื้อหาของหน้าหรือคำบรรยายใต้ภาพ และใช้ alt สั้นๆ เราทำเครื่องหมายข้อความ alt ที่ยาวเกิน 150 อักขระให้ตรวจซ้ำ

ข้อความ alt ช่วย SEO หรือไม่

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

แอตทริบิวต์ title เหมือนกับ alt หรือไม่

ไม่เหมือนกัน แอตทริบิวต์ title จะแสดงเป็นคำแนะนำเครื่องมือ (tooltip) เมื่อชี้เมาส์ และโปรแกรมอ่านหน้าจอไม่ได้ประกาศอย่างสม่ำเสมอ รวมถึงใช้งานไม่ได้บนหน้าจอสัมผัส การทดสอบอัตโนมัติยอมรับ title เป็นชื่อเมื่อไม่มี alt แต่ alt เป็นตัวเลือกที่พึ่งพาได้

ให้ AI เขียนข้อความ alt ได้หรือไม่

AI ร่างคำอธิบายได้ แต่ไม่รู้ว่ารูปภาพอยู่ในหน้าของคุณเพื่ออะไร โปรดตรวจทุกฉบับร่าง เพราะข้อความ alt ที่ถูกต้องขึ้นอยู่กับบริบทที่มีเพียงคุณที่รู้

แหล่งอ้างอิง

เครื่องมือที่เกี่ยวข้อง

รายงานแก้ไขการเข้าถึง ($174 ชำระครั้งเดียว) เริ่มจากการสแกนฟรีแบบเต็ม แล้วเพิ่มจำนวนหน้า สิ่งที่ต้องเปลี่ยนสำหรับทุกปัญหาที่พบ ไฟล์ PDF และการทดสอบซ้ำเพื่อยืนยันการแก้ไข

เกี่ยวกับรายงานแก้ไขการเข้าถึง