# พื้นที่ที่เลื่อนได้ต้องเข้าถึงได้ด้วยคีย์บอร์ด

<https://www.fixreports.com/th/issues/scrollable-region-focusable>

WCAG 2.1.1 Keyboard · ระดับ A

พื้นที่เลื่อนได้เข้าถึงด้วยคีย์บอร์ดไม่ได้ ผู้ใช้คีย์บอร์ดจึงเลื่อนพื้นที่นั้นไม่ได้

## กฎนี้ตรวจอะไร
ตรวจให้แน่ใจว่าองค์ประกอบที่มีเนื้อหาเลื่อนได้เข้าถึงได้ด้วยคีย์บอร์ดใน Safari.

## ทำไมจึงสำคัญ
WCAG 2.1.1 กำหนดให้ทุกอย่างใช้งานได้ด้วยคีย์บอร์ด

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

### บน Shopify
1. ทำให้คอนเทนเนอร์ที่เลื่อนได้รับโฟกัสได้ด้วย tabindex="0" และตั้งชื่อให้ หรือตรวจให้แน่ใจว่าภายในมีองค์ประกอบที่รับโฟกัสได้

### บน WooCommerce และ WordPress
1. ทำให้คอนเทนเนอร์ที่เลื่อนได้รับโฟกัสได้ด้วย tabindex="0" และตั้งชื่อให้ หรือตรวจให้แน่ใจว่าภายในมีองค์ประกอบที่รับโฟกัสได้

## วิธีตรวจสอบการแก้ไข
- กด Tab ไปที่พื้นที่นั้น แล้วเลื่อนด้วยปุ่มลูกศร

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