# องค์ประกอบ [role="img"] และ [role="image"] ต้องมีข้อความทดแทน

<https://www.fixreports.com/th/issues/role-img-alt>

WCAG 1.1.1 Non-text Content · ระดับ A

องค์ประกอบที่แสดงเป็นรูปภาพไม่มีข้อความทดแทน

## กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าองค์ประกอบ [role="img"] และ [role="image"] มีข้อความทดแทน.

## ทำไมจึงสำคัญ
WCAG 1.1.1 กำหนดให้รูปภาพที่มีความหมายต้องมีข้อความทดแทน

## วิธีแก้ไข
### บนเว็บไซต์ทุกประเภท
1. เพิ่ม aria-label ให้องค์ประกอบ หรือนำ role="img" ออกหากใช้ตกแต่ง

### บน Shopify
1. เพิ่ม aria-label ให้องค์ประกอบ หรือนำ role="img" ออกหากใช้ตกแต่ง

### บน WooCommerce และ WordPress
1. เพิ่ม aria-label ให้องค์ประกอบ หรือนำ role="img" ออกหากใช้ตกแต่ง

## วิธีตรวจสอบการแก้ไข
- สแกนหน้าที่ได้รับผลกระทบอีกครั้ง

## แหล่งที่มา
- เอกสารกฎของ axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/role-img-alt
- ทำความเข้าใจ WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content