แก้ไขโดยไม่ก่อการถดถอย
แก้ปัญหาและตรวจสอบว่าไม่มีสิ่งใหม่เสียหาย
แก้ไขโดยไม่ก่อการถดถอย เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
การแก้ไขสิ่งหนึ่งอาจทำให้อีกสิ่งเสียหาย
การแก้ไขด้านการเข้าถึงอย่างไม่ระมัดระวังอาจทำให้คุณลักษณะที่ใช้งานได้เสียหายโดยไม่รู้ตัว การแก้ไขปัญหาหมายถึงการซ่อมแซมปัญหาโดยไม่ทำให้เกิดการถดถอยใหม่ 🔧
ทำให้เกิดซ้ำก่อนซ่อมแซม
ขั้นแรกให้ ทำให้เกิดซ้ำตามที่รายงานไว้อย่างแม่นยำ หากคุณไม่สามารถทำให้ปัญหาล้มเหลวได้ตามต้องการ ก็ไม่อาจพิสูจน์ได้ว่าการแก้ไขทำงานจริง
เลือกใช้ HTML ดั้งเดิมก่อน
การแก้ไขที่ปลอดภัยที่สุดมักใช้โค้ดน้อยกว่า การเปลี่ยน divปลอมเป็นปุ่มจริงจะคืนความสามารถในการโฟกัส ปุ่มกด และบทบาทให้โดยไม่ต้องทำอะไรเพิ่ม
<!-- Replace this -->
<div onclick="save()">Save</div>
<!-- With this -->
<button onclick="save()">Save</button>เปลี่ยนเฉพาะส่วนที่เล็กที่สุด
แก้ไขเฉพาะส่วนที่ปัญหานั้นจำเป็นต้องแก้เท่านั้น การเปลี่ยนแปลงที่มี ขอบเขตจำกัด จะตรวจสอบได้ง่ายกว่ามาก และมีโอกาสส่งผลกระทบต่อคุณลักษณะอื่นน้อยกว่ามาก
ทดสอบซ้ำด้วยเครื่องมือเดิม
ตรวจสอบการแก้ไขด้วย แป้นพิมพ์และโปรแกรมอ่านหน้าจอเดียวกับที่พบปัญหา ทำตามขั้นตอนเดิมซ้ำ แล้วตรวจสอบให้แน่ใจว่าอุปสรรคหมดไปแล้ว
ตรวจสอบบริเวณโดยรอบ
ตรวจสอบให้ไกลกว่าองค์ประกอบที่แก้ไขแล้ว ป้ายกำกับ aria ใหม่หรือการย้ายโฟกัสอาจเปลี่ยนวิธีที่ตัวควบคุมใกล้เคียงประกาศข้อมูล ดังนั้นให้ทดสอบกระบวนการทั้งหมดซ้ำ
เฝ้าระวังการเปลี่ยนแปลงด้านภาพ
การทำให้เส้นขอบโฟกัสหรือความเปรียบต่างกลับคืนมาอาจทำให้เค้าโครงเปลี่ยน ตรวจสอบให้แน่ใจว่า การออกแบบด้านภาพ ยังคงเหมาะสมทั้งในขนาดปกติและเมื่อซูม
ยืนยันการแก้ไขด้วยการทดสอบ
เพิ่มการตรวจสอบอัตโนมัติ เช่น การตรวจยืนยันของ axe-core เพื่อให้ปัญหาเดิมทำให้การสร้างโปรแกรมไม่ผ่าน หากมีผู้ทำให้ปัญหากลับมาเกิดขึ้นอีกในภายหลัง
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);ตรวจสอบอย่างรวดเร็ว
นิสัยหนึ่งที่ช่วยป้องกันไม่ให้การแก้ไขก่อให้เกิดปัญหาย้อนกลับได้ดีที่สุดคืออะไร
อย่าซ่อนปัญหาเพื่อให้ผ่าน
อย่าใช้ aria-hidden หรือ display none เพื่อทำให้เครื่องมือสแกนไม่แสดงปัญหา วิธีนี้เพียงซ่อนอาการจากเครื่องมือ แต่ผู้ใช้จริงยังคงพบอุปสรรคอยู่
บันทึกสิ่งที่เปลี่ยนแปลง
บันทึกการแก้ไขไว้ในคำขอรวมโค้ดและใส่ลิงก์ไปยังปัญหาเดิม บันทึกการเปลี่ยนแปลงที่ชัดเจนช่วยให้ผู้ตรวจสอบและตัวคุณในอนาคตเข้าใจเหตุผลได้
ตรวจสอบในสภาพแวดล้อมจริง
ยืนยันการแก้ไขบนรุ่นสำหรับทดสอบ ไม่ใช่ตรวจเฉพาะในเครื่องของคุณ การทดสอบใน สภาพแวดล้อมจริงช่วยตรวจพบปัญหาที่ไม่คาดคิดจากแคช การรวมชุดโปรแกรม และการตั้งค่าได้ตั้งแต่เนิ่น ๆ
สรุป: การแก้ไขอย่างปลอดภัย
คุณจำลองปัญหา แก้ไขด้วยการเปลี่ยนแปลงแบบเนทีฟที่เล็กที่สุด ทดสอบกระบวนการทั้งหมดซ้ำ ป้องกันปัญหาด้วย การทดสอบ และตรวจสอบในรุ่นสำหรับทดสอบ ไม่มีปัญหาย้อนกลับ 🎉
คำถามที่พบบ่อย
บทเรียน “แก้ไขโดยไม่ก่อการถดถอย” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แก้ไขโดยไม่ก่อการถดถอย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แก้ไขโดยไม่ก่อการถดถอย”
แก้ปัญหาและตรวจสอบว่าไม่มีสิ่งใหม่เสียหาย คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “แก้ไขโดยไม่ก่อการถดถอย” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สร้างกระบวนการตรวจสอบด้วยตนเอง
- การจัดลำดับความรุนแรงและผลกระทบ
- เขียนรายงานข้อบกพร่องที่นักพัฒนานำไปแก้ได้
- แก้ไขโดยไม่ก่อการถดถอย