# องค์ประกอบ <svg> ที่มี role เป็น img หรือ image ต้องมีข้อความทดแทน

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

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

รูปภาพ SVG ที่สื่อข้อมูลไม่มีข้อความทดแทน

## กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าองค์ประกอบ <svg> ที่มี role เป็น img, image, graphics-document หรือ graphics-symbol มีข้อความที่เข้าถึงได้.

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

## วิธีแก้ไข
### บนเว็บไซต์ทุกประเภท
1. เพิ่ม aria-label หรือองค์ประกอบ <title> ให้ SVG ที่มีความหมาย หรือใส่ aria-hidden="true" ให้ SVG ที่ใช้ตกแต่งเท่านั้น

### บน Shopify
1. เพิ่ม aria-label หรือองค์ประกอบ <title> ให้ SVG ที่มีความหมาย หรือใส่ aria-hidden="true" ให้ SVG ที่ใช้ตกแต่งเท่านั้น

### บน WooCommerce และ WordPress
1. เพิ่ม aria-label หรือองค์ประกอบ <title> ให้ SVG ที่มีความหมาย หรือใส่ aria-hidden="true" ให้ SVG ที่ใช้ตกแต่งเท่านั้น

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

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