# ลิงก์ต้องมีข้อความที่ระบุได้

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

WCAG 2.4.4 Link Purpose (In Context), 4.1.2 Name, Role, Value · ระดับ A

ลิงก์บางรายการไม่มีข้อความที่โปรแกรมอ่านหน้าจออ่านออกเสียงได้ ซึ่งมักเป็นลิงก์ที่มีแต่ไอคอน เช่น ไอคอนโซเชียลหรือไอคอนตะกร้า

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

## ทำไมจึงสำคัญ
WCAG 2.4.4 และ 4.1.2 กำหนดให้ลิงก์ต้องมีชื่อที่เข้าถึงได้ (accessible name) ซึ่งอธิบายจุดประสงค์ของลิงก์

## วิธีแก้ไข
### บนเว็บไซต์ทุกประเภท
1. ค้นหาลิงก์ที่ไม่มีชื่อ ส่วนใหญ่เป็นไอคอนหรือรูปภาพที่อยู่ในแท็ก <a>
2. เพิ่มข้อความที่ซ่อนจากการมองเห็น (visually hidden) ภายในลิงก์ หรือเพิ่ม aria-label เช่น aria-label="Instagram" หรือ aria-label="Cart"
3. หากลิงก์ครอบรูปภาพไว้ ให้ใส่ข้อความ alt ที่มีความหมายให้รูปภาพแทน

### บน Shopify
1. ค้นหาลิงก์ที่ไม่มีชื่อ ส่วนใหญ่เป็นไอคอนหรือรูปภาพที่อยู่ในแท็ก <a>
2. เพิ่มข้อความที่ซ่อนจากการมองเห็น (visually hidden) ภายในลิงก์ หรือเพิ่ม aria-label เช่น aria-label="Instagram" หรือ aria-label="Cart"
3. หากลิงก์ครอบรูปภาพไว้ ให้ใส่ข้อความ alt ที่มีความหมายให้รูปภาพแทน

### บน WooCommerce และ WordPress
1. ค้นหาลิงก์ที่ไม่มีชื่อ ส่วนใหญ่เป็นไอคอนหรือรูปภาพที่อยู่ในแท็ก <a>
2. เพิ่มข้อความที่ซ่อนจากการมองเห็น (visually hidden) ภายในลิงก์ หรือเพิ่ม aria-label เช่น aria-label="Instagram" หรือ aria-label="Cart"
3. หากลิงก์ครอบรูปภาพไว้ ให้ใส่ข้อความ alt ที่มีความหมายให้รูปภาพแทน

## วิธีตรวจสอบการแก้ไข
- สแกนอีกครั้งและยืนยันว่า link-name หายไปแล้ว
- เปิดโปรแกรมอ่านหน้าจอ แล้วกด Tab ไปยังแต่ละลิงก์เพื่อฟังชื่อ

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