กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าองค์ประกอบ <img> มีข้อความทดแทน หรือมี role เป็น none หรือ presentation.
ทำไมจึงสำคัญ
WCAG 1.1.1 กำหนดให้รูปภาพที่มีความหมายต้องมีข้อความทดแทน หากไม่มี ผู้ใช้โปรแกรมอ่านหน้าจอจะไม่รู้ว่ารูปนั้นเป็นสินค้าใด
วิธีแก้ไข
บนเว็บไซต์ทุกประเภท
- เพิ่มคำอธิบายสั้น ๆ ที่เจาะจงลงในข้อความ alt ของแต่ละรูปใน CMS หรือเทมเพลตของคุณ
- อธิบายสิ่งที่ผู้ซื้อสนใจ: ชื่อสินค้า สี และมุมที่แสดง (เช่น 'กระเป๋าผ้าแคนวาสสีเขียวมะกอก ด้านหน้า')
- รูปภาพตกแต่งควรมีแอตทริบิวต์ alt ว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป
บน Shopify
- ในหน้าผู้ดูแล Shopify ให้เปิด Products > [สินค้า] > Media คลิกแต่ละรูปแล้วกรอก 'Alt text' สำหรับรูปภาพในเซกชัน ให้เปิด Online Store > Themes > Customize แล้วตั้งค่าข้อความ alt ของรูปภาพในการตั้งค่าของเซกชัน
- อธิบายสิ่งที่ผู้ซื้อสนใจ: ชื่อสินค้า สี และมุมที่แสดง (เช่น 'กระเป๋าผ้าแคนวาสสีเขียวมะกอก ด้านหน้า')
- รูปภาพตกแต่งควรมีแอตทริบิวต์ alt ว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป
บน WooCommerce และ WordPress
- ใน WordPress ให้เปิด Media > Library เลือกแต่ละรูปแล้วกรอก 'Alternative Text' รูปภาพในแกลเลอรีสินค้าก็ใช้ช่องเดียวกันนี้
- อธิบายสิ่งที่ผู้ซื้อสนใจ: ชื่อสินค้า สี และมุมที่แสดง (เช่น 'กระเป๋าผ้าแคนวาสสีเขียวมะกอก ด้านหน้า')
- รูปภาพตกแต่งควรมีแอตทริบิวต์ alt ว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป
วิธีตรวจสอบการแก้ไข
- สแกนหน้าที่ได้รับผลกระทบอีกครั้ง
- ใช้โปรแกรมอ่านหน้าจอ (VoiceOver: Cmd+F5 บน Mac) เพื่อฟังว่ารูปสินค้าถูกอ่านออกเสียงอย่างไร
FixReports ตรวจพบอย่างไร
การสแกนของเราเรียกใช้กฎ image-alt ของ axe-core ในเบราว์เซอร์ Chrome จริงบนทุกหน้าที่ทดสอบ และรายงานองค์ประกอบที่ไม่ผ่านแต่ละรายการพร้อมหน้าที่พบ markup และภาพหน้าจอในกรณีที่มี
การทดสอบอัตโนมัติยืนยันได้ว่าปัญหานี้มีอยู่จริง แต่บอกไม่ได้ว่าส่วนอื่นของหน้าเข้าถึงได้หรือไม่ อุปสรรคบางอย่างจะปรากฏก็ต่อเมื่อมีคนตรวจหน้านั้นเท่านั้น