<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
  "translation_date": "2025-10-23T20:54:26+00:00",
  "source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
  "language_code": "th"
}
-->
# การตรวจสอบการเข้าถึงเว็บไซต์อย่างครอบคลุม

## คำแนะนำ

ในงานนี้ คุณจะทำการตรวจสอบการเข้าถึงเว็บไซต์ในระดับมืออาชีพ โดยใช้หลักการและเทคนิคที่คุณได้เรียนรู้ ประสบการณ์เชิงปฏิบัตินี้จะช่วยให้คุณเข้าใจอุปสรรคและวิธีแก้ไขปัญหาด้านการเข้าถึงได้ลึกซึ้งยิ่งขึ้น

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

### เฟส 1: การประเมินเชิงกลยุทธ์ด้วยมือ

ก่อนที่จะใช้เครื่องมืออัตโนมัติ ให้ทำการประเมินด้วยมืออย่างครอบคลุม วิธีการที่เน้นมนุษย์นี้มักจะเผยให้เห็นปัญหาที่เครื่องมืออาจมองข้าม และช่วยให้คุณเข้าใจประสบการณ์ของผู้ใช้จริง

**🔍 เกณฑ์การประเมินที่สำคัญ:**

**การนำทางและโครงสร้าง:**
- คุณสามารถนำทางเว็บไซต์ทั้งหมดโดยใช้แค่คีย์บอร์ด (Tab, Shift+Tab, Enter, Space, ลูกศร) ได้หรือไม่?
- ตัวชี้โฟกัสมองเห็นได้ชัดเจนบนองค์ประกอบที่สามารถโต้ตอบได้ทั้งหมดหรือไม่?
- โครงสร้างหัวข้อ (H1-H6) สร้างโครงร่างเนื้อหาได้อย่างมีเหตุผลหรือไม่?
- มีลิงก์ข้ามไปยังเนื้อหาหลักหรือไม่?

**การเข้าถึงทางสายตา:**
- มีความคมชัดของสีที่เพียงพอทั่วทั้งเว็บไซต์หรือไม่ (ขั้นต่ำ 4.5:1 สำหรับข้อความปกติ)?
- เว็บไซต์พึ่งพาสีเพียงอย่างเดียวในการสื่อสารข้อมูลสำคัญหรือไม่?
- รูปภาพทั้งหมดมีข้อความทางเลือกที่เหมาะสมหรือไม่?
- การจัดวางยังคงใช้งานได้เมื่อซูมถึง 200% หรือไม่?

**เนื้อหาและการสื่อสาร:**
- มีข้อความลิงก์ที่คลุมเครือ เช่น "คลิกที่นี่" หรือไม่?
- คุณสามารถเข้าใจเนื้อหาและฟังก์ชันการทำงานได้โดยไม่ต้องใช้ตัวชี้นำทางสายตาหรือไม่?
- ช่องกรอกข้อมูลมีการติดป้ายกำกับและจัดกลุ่มอย่างเหมาะสมหรือไม่?
- ข้อความแสดงข้อผิดพลาดชัดเจนและมีประโยชน์หรือไม่?

**องค์ประกอบที่โต้ตอบได้:**
- ปุ่มและการควบคุมฟอร์มทั้งหมดทำงานได้ด้วยคีย์บอร์ดเพียงอย่างเดียวหรือไม่?
- การเปลี่ยนแปลงเนื้อหาแบบไดนามิกมีการประกาศให้กับโปรแกรมอ่านหน้าจอหรือไม่?
- กล่องโต้ตอบแบบโมดอลและวิดเจ็ตที่ซับซ้อนปฏิบัติตามรูปแบบการเข้าถึงที่เหมาะสมหรือไม่?

📝 **บันทึกผลการค้นพบของคุณ** พร้อมตัวอย่างเฉพาะ ภาพหน้าจอ และ URL ของหน้าเว็บ ระบุทั้งปัญหาและสิ่งที่ทำได้ดี

### เฟส 2: การทดสอบอัตโนมัติอย่างครอบคลุม

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

**🛠️ เครื่องมือทดสอบที่จำเป็น:**

1. **Lighthouse Accessibility Audit** (ใน Chrome/Edge DevTools)
   - ทำการตรวจสอบในหลายหน้า
   - เน้นเมตริกและคำแนะนำเฉพาะ
   - บันทึกคะแนนการเข้าถึงและการละเมิดเฉพาะ

2. **axe DevTools** (ส่วนขยายเบราว์เซอร์ - มาตรฐานอุตสาหกรรม)
   - ตรวจจับปัญหาได้ละเอียดกว่าของ Lighthouse
   - ให้ตัวอย่างโค้ดเฉพาะสำหรับการแก้ไข
   - ทดสอบตามเกณฑ์ WCAG 2.1

3. **WAVE Web Accessibility Evaluator** (ส่วนขยายเบราว์เซอร์)
   - แสดงภาพคุณสมบัติการเข้าถึง
   - เน้นทั้งข้อผิดพลาดและคุณสมบัติที่ดี
   - เหมาะสำหรับการทำความเข้าใจโครงสร้างหน้าเว็บ

4. **Color Contrast Analyzers**
   - WebAIM Contrast Checker สำหรับคู่สีเฉพาะ
   - ส่วนขยายเบราว์เซอร์สำหรับการวิเคราะห์ทั่วทั้งหน้า
   - ทดสอบตามมาตรฐาน WCAG AA และ AAA

**🎧 การทดสอบเทคโนโลยีช่วยเหลือจริง:**
- **การทดสอบโปรแกรมอ่านหน้าจอ**: ใช้ NVDA (Windows), VoiceOver (Mac) หรือ TalkBack (Android)
- **การนำทางด้วยคีย์บอร์ดเท่านั้น**: ถอดเมาส์ออกและนำทางเว็บไซต์ทั้งหมด
- **การทดสอบการซูม**: ทดสอบการใช้งานที่ระดับการซูม 200% และ 400%
- **การทดสอบการควบคุมด้วยเสียง**: หากมี ลองใช้เครื่องมือการนำทางด้วยเสียง

**📊 จัดระเบียบผลลัพธ์ของคุณ** โดยสร้างสเปรดชีตหลักที่มี:
- คำอธิบายปัญหาและตำแหน่ง
- ระดับความรุนแรง (Critical/High/Medium/Low)
- เกณฑ์ความสำเร็จของ WCAG ที่ละเมิด
- เครื่องมือที่ตรวจพบปัญหา
- ภาพหน้าจอและหลักฐาน

### เฟส 3: การจัดทำเอกสารผลการค้นพบอย่างครอบคลุม

สร้างรายงานการตรวจสอบการเข้าถึงที่แสดงให้เห็นถึงความเข้าใจของคุณทั้งในด้านปัญหาทางเทคนิคและผลกระทบต่อผู้ใช้

**📋 ส่วนที่จำเป็นในรายงาน:**

1. **บทสรุปสำหรับผู้บริหาร** (1 หน้า)
   - URL ของเว็บไซต์และคำอธิบายโดยย่อ
   - ระดับความสมบูรณ์ของการเข้าถึงโดยรวม
   - 3 ปัญหาที่สำคัญที่สุด
   - ผลกระทบที่คาดการณ์ต่อผู้ใช้ที่มีความพิการ

2. **วิธีการ** (½ หน้า)
   - วิธีการทดสอบและเครื่องมือที่ใช้
   - หน้าที่ประเมินและการผสมผสานอุปกรณ์/เบราว์เซอร์
   - มาตรฐานที่ใช้ในการประเมิน (WCAG 2.1 AA)

3. **ผลการค้นพบโดยละเอียด** (2-3 หน้า)
   - ปัญหาที่จัดหมวดหมู่ตามหลักการของ WCAG (Perceivable, Operable, Understandable, Robust)
   - รวมภาพหน้าจอและตัวอย่างเฉพาะ
   - ระบุคุณสมบัติการเข้าถึงที่ดีที่คุณพบ
   - อ้างอิงผลลัพธ์จากเครื่องมืออัตโนมัติ

4. **การประเมินผลกระทบต่อผู้ใช้** (1 หน้า)
   - ปัญหาที่ระบุส่งผลต่อผู้ใช้ที่มีความพิการต่างๆ อย่างไร
   - สถานการณ์ที่อธิบายประสบการณ์ของผู้ใช้จริง
   - ผลกระทบทางธุรกิจ (ความเสี่ยงทางกฎหมาย SEO การขยายฐานผู้ใช้)

**📸 การรวบรวมหลักฐาน:**
- ภาพหน้าจอของการละเมิดการเข้าถึง
- การบันทึกหน้าจอของการใช้งานที่มีปัญหา
- รายงานเครื่องมือ (บันทึกเป็น PDF)
- ตัวอย่างโค้ดที่แสดงปัญหา

### เฟส 4: แผนการแก้ไขปัญหาอย่างมืออาชีพ

พัฒนาแผนการแก้ไขปัญหาเชิงกลยุทธ์ที่จัดลำดับความสำคัญของการแก้ไขปัญหาด้านการเข้าถึง แสดงให้เห็นถึงความสามารถของคุณในการคิดแบบนักพัฒนาเว็บมืออาชีพที่ต้องเผชิญกับข้อจำกัดทางธุรกิจจริง

**🎯 สร้างคำแนะนำการปรับปรุงโดยละเอียด (ขั้นต่ำ 10 ปัญหา):**

**สำหรับแต่ละปัญหาที่ระบุ ให้ระบุ:**

- **คำอธิบายปัญหา**: อธิบายอย่างชัดเจนว่าอะไรผิดพลาดและทำไมถึงเป็นปัญหา
- **อ้างอิง WCAG**: เกณฑ์ความสำเร็จที่ละเมิด (เช่น "2.4.4 Link Purpose (In Context) - Level A")
- **ผลกระทบต่อผู้ใช้**: ปัญหานี้ส่งผลต่อผู้ที่มีความพิการต่างๆ อย่างไร
- **วิธีแก้ไข**: การเปลี่ยนแปลงโค้ดเฉพาะ การปรับเปลี่ยนการออกแบบ หรือการปรับปรุงกระบวนการ
- **ระดับความสำคัญ**: Critical (ขัดขวางการใช้งานพื้นฐาน) / High (อุปสรรคสำคัญ) / Medium (ปัญหาการใช้งาน) / Low (การปรับปรุง)
- **ความพยายามในการดำเนินการ**: การประมาณเวลา/ความซับซ้อน (Quick win / Moderate effort / Major refactor)
- **การตรวจสอบการแก้ไข**: วิธีตรวจสอบว่าการแก้ไขใช้งานได้

**ตัวอย่างคำแนะนำการปรับปรุง:**

```
Issue: Generic "Read more" link text appears 8 times on homepage
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
User Impact: Screen reader users cannot distinguish between links when viewed in link list
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
Priority: High (major navigation barrier)
Effort: Low (30 minutes to update content)
Testing: Generate link list with screen reader - each link should be meaningful standalone
```

**📈 เฟสการดำเนินการเชิงกลยุทธ์:**

- **เฟส 1 (0-2 สัปดาห์)**: ปัญหาสำคัญที่ขัดขวางการใช้งานพื้นฐาน
- **เฟส 2 (1-2 เดือน)**: การปรับปรุงที่มีความสำคัญสูงเพื่อประสบการณ์ผู้ใช้ที่ดีขึ้น
- **เฟส 3 (3-6 เดือน)**: การปรับปรุงที่มีความสำคัญปานกลางและการปรับปรุงกระบวนการ
- **เฟส 4 (ต่อเนื่อง)**: การตรวจสอบและการปรับปรุงอย่างต่อเนื่อง

## เกณฑ์การประเมิน

การตรวจสอบการเข้าถึงเว็บไซต์ของคุณจะถูกประเมินทั้งในด้านความถูกต้องทางเทคนิคและการนำเสนออย่างมืออาชีพ:

| เกณฑ์ | ยอดเยี่ยม (90-100%) | ดี (80-89%) | พอใช้ (70-79%) | ต้องปรับปรุง (<70%) |
|----------|-------------------|---------------|---------------------|------------------------|
| **ความลึกของการทดสอบด้วยมือ** | การประเมินที่ครอบคลุมครอบคลุมหลักการ POUR ทั้งหมดพร้อมการสังเกตและสถานการณ์ผู้ใช้โดยละเอียด | ครอบคลุมพื้นที่การเข้าถึงส่วนใหญ่พร้อมผลการค้นพบที่ชัดเจนและการวิเคราะห์ผลกระทบต่อผู้ใช้บางส่วน | การประเมินพื้นฐานครอบคลุมพื้นที่สำคัญพร้อมการสังเกตที่เพียงพอ | การทดสอบที่จำกัดพร้อมการสังเกตที่ผิวเผินและการพิจารณาผลกระทบต่อผู้ใช้น้อย |
| **การใช้เครื่องมือและการวิเคราะห์** | ใช้เครื่องมือที่จำเป็นทั้งหมดอย่างมีประสิทธิภาพ อ้างอิงผลการค้นพบ รวมหลักฐานที่ชัดเจน และวิเคราะห์ข้อจำกัดของเครื่องมือ | ใช้เครื่องมือส่วนใหญ่พร้อมเอกสารประกอบที่ดี การอ้างอิงผลการค้นพบบางส่วน และหลักฐานที่เพียงพอ | ใช้เครื่องมือที่จำเป็นพร้อมเอกสารประกอบพื้นฐานและหลักฐานบางส่วน | ใช้เครื่องมืออย่างจำกัด เอกสารประกอบไม่ดี หรือไม่มีหลักฐาน |
| **การระบุและจัดหมวดหมู่ปัญหา** | ระบุปัญหาเฉพาะ 15+ รายการในทุกหลักการของ WCAG จัดหมวดหมู่ตามความรุนแรงอย่างถูกต้อง แสดงความเข้าใจลึกซึ้ง | ระบุปัญหา 10-14 รายการในหลักการ WCAG ส่วนใหญ่ จัดหมวดหมู่ได้ดี แสดงความเข้าใจที่มั่นคง | ระบุปัญหา 7-9 รายการพร้อมการครอบคลุม WCAG ที่เพียงพอและการจัดหมวดหมู่พื้นฐาน | ระบุปัญหาน้อยกว่า 7 รายการพร้อมขอบเขตที่จำกัดหรือการจัดหมวดหมู่ที่ไม่ดี |
| **คุณภาพและความเป็นไปได้ของวิธีแก้ไข** | 10+ วิธีแก้ไขที่ละเอียดและนำไปใช้ได้จริง พร้อมการอ้างอิง WCAG ที่ถูกต้อง กำหนดเวลาการดำเนินการที่สมจริง และวิธีการตรวจสอบ | 8-9 วิธีแก้ไขที่พัฒนามาอย่างดีพร้อมการอ้างอิงที่ถูกต้องส่วนใหญ่และรายละเอียดการดำเนินการที่ดี | 6-7 วิธีแก้ไขพื้นฐานพร้อมรายละเอียดบางส่วนและแนวทางที่สมจริงโดยทั่วไป | <6 วิธีแก้ไขหรือรายละเอียดไม่เพียงพอ การดำเนินการไม่สมจริง |
| **การสื่อสารอย่างมืออาชีพ** | รายงานมีการจัดระเบียบอย่างยอดเยี่ยม เขียนอย่างชัดเจน รวมบทสรุปสำหรับผู้บริหาร ใช้ภาษาทางเทคนิคที่เหมาะสม และปฏิบัติตามมาตรฐานเอกสารธุรกิจ | มีการจัดระเบียบที่ดีพร้อมคุณภาพการเขียนที่ดี รวมส่วนที่จำเป็นส่วนใหญ่ โทนที่เหมาะสม | มีการจัดระเบียบที่เพียงพอพร้อมการเขียนที่ยอมรับได้ รวมส่วนที่จำเป็นพื้นฐาน | การจัดระเบียบไม่ดี การเขียนไม่ชัดเจน หรือขาดส่วนสำคัญ |
| **การประยุกต์ใช้ในโลกจริง** | แสดงความเข้าใจผลกระทบทางธุรกิจ การพิจารณาด้านกฎหมาย ความหลากหลายของผู้ใช้ และความท้าทายในการดำเนินการจริง | แสดงความเข้าใจที่ดีเกี่ยวกับการประยุกต์ใช้จริงพร้อมบริบททางธุรกิจบางส่วน | ความเข้าใจพื้นฐานเกี่ยวกับการประยุกต์ใช้ในโลกจริง | การเชื่อมโยงกับการประยุกต์ใช้จริงที่จำกัด |

## ตัวเลือกความท้าทายขั้นสูง

**🚀 สำหรับนักเรียนที่ต้องการความท้าทายเพิ่มเติม:**

- **การวิเคราะห์เปรียบเทียบ**: ตรวจสอบเว็บไซต์คู่แข่ง 2-3 แห่งและเปรียบเทียบระดับความสมบูรณ์ของการเข้าถึง
- **การเน้นการเข้าถึงบนมือถือ**: เจาะลึกปัญหาการเข้าถึงเฉพาะมือถือโดยใช้ Android TalkBack หรือ iOS VoiceOver
- **มุมมองระหว่างประเทศ**: วิจัยและใช้มาตรฐานการเข้าถึงจากประเทศต่างๆ (EN 301 549, Section 508, ADA)
- **การตรวจสอบคำแถลงการเข้าถึง**: ประเมินคำแถลงการเข้าถึงที่มีอยู่ของเว็บไซต์ (ถ้ามี) เทียบกับผลการค้นพบของคุณ

## สิ่งที่ต้องส่ง

ส่งรายงานการตรวจสอบการเข้าถึงที่ครอบคลุมซึ่งแสดงการวิเคราะห์ในระดับมืออาชีพและการวางแผนการดำเนินการจริง:

**📄 ข้อกำหนดของรายงานสุดท้าย:**

1. **บทสรุปสำหรับผู้บริหาร** (1 หน้า)
   - ภาพรวมเว็บไซต์และการประเมินความสมบูรณ์ของการเข้าถึง
   - สรุปผลการค้นพบที่สำคัญพร้อมผลกระทบทางธุรกิจ
   - การดำเนินการที่มีความสำคัญสูงที่แนะนำ

2. **วิธีการและขอบเขต** (1 หน้า)
   - วิธีการทดสอบ เครื่องมือที่ใช้ และเกณฑ์การประเมิน
   - หน้าที่/ส่วนที่ประเมินและข้อจำกัดใดๆ
   - กรอบการปฏิบัติตามมาตรฐาน (WCAG 2.1 AA)

3. **รายงานผลการค้นพบโดยละเอียด** (3-4 หน้า)
   - การสังเกตการทดสอบด้วยมือพร้อมสถานการณ์ผู้ใช้
   - ผลลัพธ์เครื่องมืออัตโนมัติพร้อมการอ้างอิง
   - ปัญหาที่จัดหมวดหมู่ตามหลักการ WCAG พร้อมหลักฐาน
   - คุณสมบัติการเข้าถึงที่ดีที่ระบุ

4. **แผนการแก้ไขเชิงกลยุทธ์** (3-4 หน้า)
   - คำแนะนำการปรับปรุงที่จัดลำดับความสำคัญ (ขั้นต่ำ 10)
   - กำหนดเวลาการดำเนินการพร้อมการประมาณความพยายาม
   - เมตริกความสำเร็จและวิธีการตรวจสอบ
   - กลยุทธ์การบำรุงรักษาการเข้าถึงในระยะยาว

5. **หลักฐานสนับสนุน** (ภาคผนวก)
   - ภาพหน้าจอของการละเมิดการเข้าถึงและเครื่องมือทดสอบ
   - ตัวอย่างโค้ดที่แสดงปัญหาและวิธีแก้ไข
   - รายงานเครื่องมือและสรุปการตรวจสอบ
   - บันทึกหรือการบันทึกการทดสอบโปรแกรมอ่านหน้าจอ

**

---

**ข้อจำกัดความรับผิดชอบ**:  
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้