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

<https://www.fixreports.com/th/image-alt-text-checker>

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

## สิ่งที่เครื่องมือนี้ตรวจ
- รูปภาพที่ไม่มีข้อความ 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 คืออะไร

แอตทริบิวต์ 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 ที่ถูกต้องขึ้นอยู่กับบริบทที่มีเพียงคุณที่รู้

## แหล่งอ้างอิง
- [W3C: ทำความเข้าใจเกณฑ์ความสำเร็จ 1.1.1 Non-text Content ของ WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content)
- [W3C Images Tutorial: แผนผังการตัดสินใจเรื่อง alt (An alt decision tree)](https://www.w3.org/WAI/tutorials/images/decision-tree/)
- [W3C Images Tutorial: รูปภาพที่มีหน้าที่ (Functional images)](https://www.w3.org/WAI/tutorials/images/functional/)
- [Google Search Central: แนวทางปฏิบัติที่ดีที่สุดด้าน SEO สำหรับรูปภาพ](https://developers.google.com/search/docs/appearance/google-images)
- [Deque: กฎ image-alt ของ axe-core](https://dequeuniversity.com/rules/axe/4.13/image-alt)
- [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)