การตรวจรูปแบบและด่าน CI สำหรับการเข้าถึง

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

สำหรับโครงการ React ปลั๊กอิน ESLint eslint-plugin-jsx-a11y จะตรวจ JSX ของคุณเพื่อหาข้อผิดพลาดด้านการเข้าถึงที่พบบ่อยได้โดยตรงในเครื่องมือแก้ไขโค้ด

jsx-a11y ตรวจพบสิ่งต่าง ๆ เช่น รูปภาพที่ไม่มีคุณสมบัติ alt ลิงก์ที่ไม่มี href หรือตัวจัดการ click บนองค์ประกอบที่ไม่ใช่แบบโต้ตอบ

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

เครื่องมือตรวจโค้ดอ่าน ซอร์สโค้ด ไม่ใช่หน้าที่แสดงผลจริง จึงวัดคอนทราสต์หรือลำดับโฟกัสไม่ได้ ดังนั้นจึงเป็นการเสริม ไม่ใช่การทดแทนการสแกนด้วย axe

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

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

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

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

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

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

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