# องค์ประกอบที่ซ่อนด้วย ARIA ต้องรับโฟกัสไม่ได้และต้องไม่มีองค์ประกอบที่รับโฟกัสได้อยู่ภายใน

<https://www.fixreports.com/th/issues/aria-hidden-focus>

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

องค์ประกอบที่รับโฟกัสได้ถูกซ่อนจากโปรแกรมอ่านหน้าจอ แต่ยังเข้าถึงได้ด้วยคีย์บอร์ด

## กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าองค์ประกอบที่มี aria-hidden รับโฟกัสไม่ได้และไม่มีองค์ประกอบที่รับโฟกัสได้อยู่ภายใน.

## ทำไมจึงสำคัญ
ผู้ใช้คีย์บอร์ดไปหยุดที่องค์ประกอบที่โปรแกรมอ่านหน้าจอไม่อ่านออกเสียง (WCAG 4.1.2)

## วิธีแก้ไข
### บนเว็บไซต์ทุกประเภท
1. นำ aria-hidden ออกจากคอนเทนเนอร์ที่มีองค์ประกอบที่รับโฟกัสได้ หรือเพิ่ม tabindex="-1" และแอตทริบิวต์ inert ให้เมนู off-canvas และสไลด์ที่ซ่อนอยู่

### บน Shopify
1. นำ aria-hidden ออกจากคอนเทนเนอร์ที่มีองค์ประกอบที่รับโฟกัสได้ หรือเพิ่ม tabindex="-1" และแอตทริบิวต์ inert ให้เมนู off-canvas และสไลด์ที่ซ่อนอยู่

### บน WooCommerce และ WordPress
1. นำ aria-hidden ออกจากคอนเทนเนอร์ที่มีองค์ประกอบที่รับโฟกัสได้ หรือเพิ่ม tabindex="-1" และแอตทริบิวต์ inert ให้เมนู off-canvas และสไลด์ที่ซ่อนอยู่

## วิธีตรวจสอบการแก้ไข
- เปิดโปรแกรมอ่านหน้าจอแล้วกด Tab ไล่ไปทั่วหน้า

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