# ปัญหาการเข้าถึงที่เราทดสอบ

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

แต่ละหน้าอธิบายปัญหาหนึ่งข้อที่การทดสอบอัตโนมัติของเราพบ ได้แก่ ความหมาย เกณฑ์ WCAG ที่เกี่ยวข้อง วิธีแก้บนเว็บไซต์ทุกประเภท บน Shopify และบน WooCommerce และวิธีตรวจสอบการแก้ไข

## ปัญหาการเข้าถึง
- [องค์ประกอบที่ซ่อนด้วย ARIA ต้องรับโฟกัสไม่ได้และต้องไม่มีองค์ประกอบที่รับโฟกัสได้อยู่ภายใน](https://www.fixreports.com/th/issues/aria-hidden-focus): WCAG 4.1.2 · ระดับ A. องค์ประกอบที่รับโฟกัสได้ถูกซ่อนจากโปรแกรมอ่านหน้าจอ แต่ยังเข้าถึงได้ด้วยคีย์บอร์ด (แอตทริบิวต์และ role ของ ARIA)
- [ต้องใช้แอตทริบิวต์ autocomplete อย่างถูกต้อง](https://www.fixreports.com/th/issues/autocomplete-valid): WCAG 1.3.5 · ระดับ AA. ช่องกรอกข้อมูลใช้ค่า autocomplete ที่เบราว์เซอร์ไม่รู้จัก (ช่องกรอกข้อมูลที่ไม่มีป้ายกำกับ)
- [ปุ่มต้องมีข้อความที่ระบุได้](https://www.fixreports.com/th/issues/button-name): WCAG 4.1.2 · ระดับ A. ปุ่มบางปุ่มไม่มีชื่อที่เข้าถึงได้ ผู้ใช้โปรแกรมอ่านหน้าจอจึงได้ยินเพียงคำว่า 'ปุ่ม' (ลิงก์และปุ่มที่ไม่มีชื่อ)
- [องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ](https://www.fixreports.com/th/issues/color-contrast): WCAG 1.4.3 · ระดับ AA. ข้อความบางส่วนตัดกับพื้นหลังไม่มากพอที่ผู้มีสายตาเลือนรางจะอ่านได้ (คอนทราสต์สีต่ำ)
- [เอกสารต้องมีองค์ประกอบ <title> เพื่อช่วยในการนำทาง](https://www.fixreports.com/th/issues/document-title): WCAG 2.4.2 · ระดับ A. หน้าไม่มี title ผู้ใช้จึงไม่รู้ว่ากำลังอยู่ที่หน้าใด (ชื่อหน้า)
- [ID ที่ใช้ใน ARIA และป้ายกำกับต้องไม่ซ้ำกัน](https://www.fixreports.com/th/issues/duplicate-id-aria): WCAG 4.1.2 · ระดับ A. หลายองค์ประกอบใช้ id เดียวกันซึ่งใช้กำกับหรืออธิบายบางสิ่ง เทคโนโลยีสิ่งอำนวยความสะดวกจึงอาจอ่านป้ายกำกับผิด (แอตทริบิวต์และ role ของ ARIA)
- [เฟรมต้องมีชื่อที่เข้าถึงได้](https://www.fixreports.com/th/issues/frame-title): WCAG 4.1.2 · ระดับ A. เฟรมที่ฝังไว้ (มักเป็นแผนที่ วิดีโอ หรือวิดเจ็ตของแอป) ไม่มี title ผู้ใช้โปรแกรมอ่านหน้าจอจึงไม่รู้ว่าเฟรมมีเนื้อหาอะไร (โครงสร้างหน้า หัวข้อ และแลนด์มาร์ก)
- [ระดับหัวข้อควรเพิ่มขึ้นทีละ 1 ระดับเท่านั้น](https://www.fixreports.com/th/issues/heading-order): แนวปฏิบัติที่ดีด้านการเข้าถึง. ระดับหัวข้อข้ามขั้น (เช่น จาก H2 ไป H4) ทำให้ผู้ใช้โปรแกรมอ่านหน้าจอสับสนกับโครงสร้างหน้า (โครงสร้างหน้า หัวข้อ และแลนด์มาร์ก)
- [องค์ประกอบ <html> ต้องมีแอตทริบิวต์ lang](https://www.fixreports.com/th/issues/html-has-lang): WCAG 3.1.1 · ระดับ A. หน้านี้ไม่ได้ประกาศภาษา โปรแกรมอ่านหน้าจอจึงอาจออกเสียงผิด (ภาษาของหน้า)
- [องค์ประกอบ <html> ต้องมีค่าแอตทริบิวต์ lang ที่ถูกต้อง](https://www.fixreports.com/th/issues/html-lang-valid): WCAG 3.1.1 · ระดับ A. รหัสภาษาของหน้าไม่ถูกต้อง โปรแกรมอ่านหน้าจอจึงเลือกเสียงที่ถูกต้องไม่ได้ (ภาษาของหน้า)
- [รูปภาพต้องมีข้อความทดแทน](https://www.fixreports.com/th/issues/image-alt): WCAG 1.1.1 · ระดับ A. รูปภาพไม่มีข้อความทดแทน ผู้ใช้โปรแกรมอ่านหน้าจอจึงไม่รู้ว่ารูปแสดงอะไร (รูปภาพที่ไม่มีข้อความทดแทน)
- [ปุ่ม input ต้องมีข้อความที่ระบุได้](https://www.fixreports.com/th/issues/input-button-name): WCAG 4.1.2 · ระดับ A. ปุ่ม input ไม่มีข้อความ โปรแกรมอ่านหน้าจอจึงบอกไม่ได้ว่าปุ่มทำอะไร (ช่องกรอกข้อมูลที่ไม่มีป้ายกำกับ)
- [ปุ่มรูปภาพต้องมีข้อความทดแทน](https://www.fixreports.com/th/issues/input-image-alt): WCAG 1.1.1, 4.1.2 · ระดับ A. ปุ่มรูปภาพไม่มีข้อความ alt โปรแกรมอ่านหน้าจอจึงบอกไม่ได้ว่าปุ่มทำอะไร (รูปภาพที่ไม่มีข้อความทดแทน)
- [องค์ประกอบในฟอร์มต้องมีป้ายกำกับ](https://www.fixreports.com/th/issues/label): WCAG 4.1.2 · ระดับ A. ช่องกรอกข้อมูลบางช่องไม่มีป้ายกำกับ ผู้ใช้โปรแกรมอ่านหน้าจอจึงไม่รู้ว่าต้องกรอกอะไร (ช่องกรอกข้อมูลที่ไม่มีป้ายกำกับ)
- [เอกสารควรมีแลนด์มาร์ก main 1 รายการ](https://www.fixreports.com/th/issues/landmark-one-main): แนวปฏิบัติที่ดีด้านการเข้าถึง. หน้านี้ไม่มีแลนด์มาร์ก main ผู้ใช้โปรแกรมอ่านหน้าจอจึงข้ามไปยังเนื้อหาโดยตรงไม่ได้ (โครงสร้างหน้า หัวข้อ และแลนด์มาร์ก)
- [ลิงก์ต้องแยกแยะได้โดยไม่อาศัยสี](https://www.fixreports.com/th/issues/link-in-text-block): WCAG 1.4.1 · ระดับ A. ลิงก์ในย่อหน้าแยกแยะได้ด้วยสีเท่านั้น ผู้ที่มองไม่เห็นความแตกต่างของสีจึงมองข้ามลิงก์ไป (คอนทราสต์สีต่ำ)
- [ลิงก์ต้องมีข้อความที่ระบุได้](https://www.fixreports.com/th/issues/link-name): WCAG 2.4.4, 4.1.2 · ระดับ A. ลิงก์บางรายการไม่มีข้อความที่โปรแกรมอ่านหน้าจออ่านออกเสียงได้ ซึ่งมักเป็นลิงก์ที่มีแต่ไอคอน เช่น ไอคอนโซเชียลหรือไอคอนตะกร้า (ลิงก์และปุ่มที่ไม่มีชื่อ)
- [ต้องไม่ปิดการซูมและการขยาย](https://www.fixreports.com/th/issues/meta-viewport): WCAG 1.4.4 · ระดับ AA. หน้านี้บล็อกการซูมด้วยสองนิ้วบนมือถือ (การซูมและ reflow)
- [หน้าควรมีหัวข้อระดับ 1](https://www.fixreports.com/th/issues/page-has-heading-one): แนวปฏิบัติที่ดีด้านการเข้าถึง. หน้านี้ไม่มีหัวข้อระดับบนสุด (โครงสร้างหน้า หัวข้อ และแลนด์มาร์ก)
- [เนื้อหาทั้งหมดของหน้าควรอยู่ภายในแลนด์มาร์ก](https://www.fixreports.com/th/issues/region): แนวปฏิบัติที่ดีด้านการเข้าถึง. เนื้อหาบางส่วนไม่ได้อยู่ภายในแลนด์มาร์กของหน้า (header, nav, main หรือ footer) (โครงสร้างหน้า หัวข้อ และแลนด์มาร์ก)
- [องค์ประกอบ [role="img"] และ [role="image"] ต้องมีข้อความทดแทน](https://www.fixreports.com/th/issues/role-img-alt): WCAG 1.1.1 · ระดับ A. องค์ประกอบที่แสดงเป็นรูปภาพไม่มีข้อความทดแทน (รูปภาพที่ไม่มีข้อความทดแทน)
- [พื้นที่ที่เลื่อนได้ต้องเข้าถึงได้ด้วยคีย์บอร์ด](https://www.fixreports.com/th/issues/scrollable-region-focusable): WCAG 2.1.1 · ระดับ A. พื้นที่เลื่อนได้เข้าถึงด้วยคีย์บอร์ดไม่ได้ ผู้ใช้คีย์บอร์ดจึงเลื่อนพื้นที่นั้นไม่ได้ (การเข้าถึงด้วยคีย์บอร์ดและโฟกัส)
- [องค์ประกอบ select ต้องมีชื่อที่เข้าถึงได้](https://www.fixreports.com/th/issues/select-name): WCAG 4.1.2 · ระดับ A. เมนูดรอปดาวน์ (มักเป็นตัวเลือกการเรียงลำดับหรือตัวเลือกสินค้า) ไม่มีป้ายกำกับ (ช่องกรอกข้อมูลที่ไม่มีป้ายกำกับ)
- [องค์ประกอบ <svg> ที่มี role เป็น img หรือ image ต้องมีข้อความทดแทน](https://www.fixreports.com/th/issues/svg-img-alt): WCAG 1.1.1 · ระดับ A. รูปภาพ SVG ที่สื่อข้อมูลไม่มีข้อความทดแทน (รูปภาพที่ไม่มีข้อความทดแทน)
- [เป้าหมายการแตะทุกจุดต้องมีขนาด 24px หรือมีระยะห่างรอบ ๆ มากพอ](https://www.fixreports.com/th/issues/target-size): WCAG 2.5.8 · ระดับ AA. เป้าหมายการแตะบางจุดเล็กกว่า 24 x 24 พิกเซลและอยู่ชิดกันเกินไป จึงแตะให้โดนได้ยากบนโทรศัพท์ (การเข้าถึงด้วยคีย์บอร์ดและโฟกัส)