Web-Dev-For-Beginners/translations/th/1-getting-started-lessons/3-accessibility/assignment.md

การตรวจสอบการเข้าถึงเว็บไซต์อย่างครอบคลุม

คำแนะนำ

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

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

เฟส 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 แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้