You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
218 lines
28 KiB
218 lines
28 KiB
<!--
|
|
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) แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษามืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ |