# ID ที่ใช้ใน ARIA และป้ายกำกับต้องไม่ซ้ำกัน

<https://www.fixreports.com/th/issues/duplicate-id-aria>

WCAG 4.1.2 Name, Role, Value · ระดับ A

หลายองค์ประกอบใช้ id เดียวกันซึ่งใช้กำกับหรืออธิบายบางสิ่ง เทคโนโลยีสิ่งอำนวยความสะดวกจึงอาจอ่านป้ายกำกับผิด

## กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าค่าแอตทริบิวต์ id ทุกค่าที่ใช้ใน ARIA และในป้ายกำกับไม่ซ้ำกัน.

## ทำไมจึงสำคัญ
ป้ายกำกับและคำอธิบายอ้างอิงองค์ประกอบด้วย id หาก id ซ้ำกัน การเชื่อมโยงนั้นจะเสีย (WCAG 4.1.2)

## วิธีแก้ไข
### บนเว็บไซต์ทุกประเภท
1. กำหนด id ที่ไม่ซ้ำให้แต่ละองค์ประกอบ และอัปเดตแอตทริบิวต์ที่อ้างอิง id นั้น (for aria-labelledby aria-describedby)
2. ในเซกชันของ Shopify ให้เพิ่ม {{ section.id }} ลงใน id เพื่อให้เซกชันที่ใช้ซ้ำยังมี id ไม่ซ้ำกัน

### บน Shopify
1. กำหนด id ที่ไม่ซ้ำให้แต่ละองค์ประกอบ และอัปเดตแอตทริบิวต์ที่อ้างอิง id นั้น (for aria-labelledby aria-describedby)
2. ในเซกชันของ Shopify ให้เพิ่ม {{ section.id }} ลงใน id เพื่อให้เซกชันที่ใช้ซ้ำยังมี id ไม่ซ้ำกัน

### บน WooCommerce และ WordPress
1. กำหนด id ที่ไม่ซ้ำให้แต่ละองค์ประกอบ และอัปเดตแอตทริบิวต์ที่อ้างอิง id นั้น (for aria-labelledby aria-describedby)
2. ในเซกชันของ Shopify ให้เพิ่ม {{ section.id }} ลงใน id เพื่อให้เซกชันที่ใช้ซ้ำยังมี id ไม่ซ้ำกัน

## วิธีตรวจสอบการแก้ไข
- สแกนอีกครั้งและยืนยันว่ากฎ duplicate-id ผ่าน

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