jsx-a11y และแนวป้องกันระดับคอมโพเนนต์

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

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

ขยายการกำหนดค่า recommended ของปลั๊กอินเพื่อเปิดใช้ชุดกฎพื้นฐานที่แน่นหนาพร้อมกัน แทนการเปิดใช้ทีละกฎด้วยตนเอง

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

การใส่ onClick ให้ div โดยไม่รองรับแป้นพิมพ์จะทำให้เกิดคำเตือน วิธีแก้คือใช้ button จริง ซึ่งรับ focus ได้และพร้อมใช้งานด้วยแป้นพิมพ์

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

ปลั๊กอินตรวจสอบว่าแอตทริบิวต์และบทบาทของ ARIA มีอยู่จริงและใช้อย่างถูกต้อง การพิมพ์ผิดอย่าง aria-lable หรือบทบาทที่ไม่ถูกต้องจะถูกจับได้ทันที

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

ผนวกการเข้าถึงไว้ในคอมโพเนนต์ที่ใช้ร่วมกัน Button ที่นำกลับมาใช้ใหม่และแสดงองค์ประกอบ button จริงเสมอ จะช่วยกระจายพฤติกรรมที่ดีไปทั่วทั้งแอป

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

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

ใช้ jsx-a11y เพื่อตรวจจับข้อผิดพลาดทั่วไป สร้างคอมโพเนนต์ที่ใช้ร่วมกันและเข้าถึงได้ และกำหนดให้ตรวจสอบใน CI แต่ยังคงต้องพึ่งพาการทดสอบด้วยตนเองสำหรับส่วนที่เหลือ ✅