# ปุ่มต้องมีข้อความที่ระบุได้

<https://www.fixreports.com/th/issues/button-name>

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

ปุ่มบางปุ่มไม่มีชื่อที่เข้าถึงได้ ผู้ใช้โปรแกรมอ่านหน้าจอจึงได้ยินเพียงคำว่า 'ปุ่ม'

## กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าปุ่มมีข้อความที่ระบุได้.

## ทำไมจึงสำคัญ
WCAG 4.1.2 กำหนดให้ตัวควบคุมทุกตัวต้องมีชื่อ ปุ่มที่ไม่มีชื่อมักเป็นปุ่มเพิ่มลดจำนวน ปุ่มปิด และลูกศรของสไลเดอร์

## วิธีแก้ไข
### บนเว็บไซต์ทุกประเภท
1. ค้นหาปุ่มที่ไม่มีชื่อ ซึ่งมักเป็นปุ่มที่แสดงเพียงไอคอน
2. เพิ่มข้อความที่มองเห็นได้ ข้อความที่ซ่อนจากการมองเห็น หรือ aria-label ที่บอกว่าปุ่มทำอะไร (เช่น aria-label="Close" หรือ aria-label="Increase quantity")

### บน Shopify
1. ค้นหาปุ่มที่ไม่มีชื่อ ซึ่งมักเป็นปุ่มที่แสดงเพียงไอคอน
2. เพิ่มข้อความที่มองเห็นได้ ข้อความที่ซ่อนจากการมองเห็น หรือ aria-label ที่บอกว่าปุ่มทำอะไร (เช่น aria-label="Close" หรือ aria-label="Increase quantity")

### บน WooCommerce และ WordPress
1. ค้นหาปุ่มที่ไม่มีชื่อ ซึ่งมักเป็นปุ่มที่แสดงเพียงไอคอน
2. เพิ่มข้อความที่มองเห็นได้ ข้อความที่ซ่อนจากการมองเห็น หรือ aria-label ที่บอกว่าปุ่มทำอะไร (เช่น aria-label="Close" หรือ aria-label="Increase quantity")

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

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