# รูปภาพต้องมีข้อความทดแทน

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

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

รูปภาพไม่มีข้อความทดแทน ผู้ใช้โปรแกรมอ่านหน้าจอจึงไม่รู้ว่ารูปแสดงอะไร

## กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าองค์ประกอบ <img> มีข้อความทดแทน หรือมี role เป็น none หรือ presentation.

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

## วิธีแก้ไข
### บนเว็บไซต์ทุกประเภท
1. เพิ่มคำอธิบายสั้น ๆ ที่เจาะจงลงในข้อความ alt ของแต่ละรูปใน CMS หรือเทมเพลตของคุณ
2. อธิบายสิ่งที่ผู้ซื้อสนใจ: ชื่อสินค้า สี และมุมที่แสดง (เช่น 'กระเป๋าผ้าแคนวาสสีเขียวมะกอก ด้านหน้า')
3. รูปภาพตกแต่งควรมีแอตทริบิวต์ alt ว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป

### บน Shopify
1. ในหน้าผู้ดูแล Shopify ให้เปิด Products > [สินค้า] > Media คลิกแต่ละรูปแล้วกรอก 'Alt text' สำหรับรูปภาพในเซกชัน ให้เปิด Online Store > Themes > Customize แล้วตั้งค่าข้อความ alt ของรูปภาพในการตั้งค่าของเซกชัน
2. อธิบายสิ่งที่ผู้ซื้อสนใจ: ชื่อสินค้า สี และมุมที่แสดง (เช่น 'กระเป๋าผ้าแคนวาสสีเขียวมะกอก ด้านหน้า')
3. รูปภาพตกแต่งควรมีแอตทริบิวต์ alt ว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป

### บน WooCommerce และ WordPress
1. ใน WordPress ให้เปิด Media > Library เลือกแต่ละรูปแล้วกรอก 'Alternative Text' รูปภาพในแกลเลอรีสินค้าก็ใช้ช่องเดียวกันนี้
2. อธิบายสิ่งที่ผู้ซื้อสนใจ: ชื่อสินค้า สี และมุมที่แสดง (เช่น 'กระเป๋าผ้าแคนวาสสีเขียวมะกอก ด้านหน้า')
3. รูปภาพตกแต่งควรมีแอตทริบิวต์ alt ว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป

## วิธีตรวจสอบการแก้ไข
- สแกนหน้าที่ได้รับผลกระทบอีกครั้ง
- ใช้โปรแกรมอ่านหน้าจอ (VoiceOver: Cmd+F5 บน Mac) เพื่อฟังว่ารูปสินค้าถูกอ่านออกเสียงอย่างไร

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