# องค์ประกอบในฟอร์มต้องมีป้ายกำกับ

<https://www.fixreports.com/th/issues/label>

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

ช่องกรอกข้อมูลบางช่องไม่มีป้ายกำกับ ผู้ใช้โปรแกรมอ่านหน้าจอจึงไม่รู้ว่าต้องกรอกอะไร

## กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าองค์ประกอบในฟอร์มทุกรายการมีป้ายกำกับ.

## ทำไมจึงสำคัญ
WCAG 1.3.1, 3.3.2 และ 4.1.2 กำหนดให้ช่องกรอกข้อมูลต้องมีป้ายกำกับ ช่องสมัครรับจดหมายข่าวและช่องค้นหามักเป็นต้นเหตุ

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

### บน Shopify
1. ใส่องค์ประกอบ <label for="field-id"> ให้ทุกช่อง หรืออย่างน้อยต้องมี aria-label
2. ข้อความ placeholder เพียงอย่างเดียวไม่นับเป็นป้ายกำกับ

### บน WooCommerce และ WordPress
1. ใส่องค์ประกอบ <label for="field-id"> ให้ทุกช่อง หรืออย่างน้อยต้องมี aria-label
2. ข้อความ placeholder เพียงอย่างเดียวไม่นับเป็นป้ายกำกับ

## วิธีตรวจสอบการแก้ไข
- สแกนอีกครั้งและยืนยันว่ากฎ label ไม่พบข้อผิดพลาดอีก
- คลิกป้ายกำกับแต่ละรายการ และตรวจว่าโฟกัสย้ายไปที่ช่องของป้ายนั้น

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