การตรวจสอบการช่วยเหลือพิเศษด้วย response-axe และ eslint-plugin-jsx-a11y

เว็บไซต์ React จะไม่คืบหน้าหากเข้าถึงไม่ได้ การตรวจสอบในระหว่างการพัฒนาจะช่วยให้คุณพบปัญหาต่างๆ ได้

Houssein Djirdeh

react-axe คือไลบรารีที่ตรวจสอบ แสดงความรู้สึกต่อแอปพลิเคชันและบันทึกปัญหาการช่วยเหลือพิเศษใน Chrome DevTools คอนโซลผู้ดูแลระบบ โดยใช้ขวานโอเพนซอร์ส ไลบรารีการทดสอบเพื่อแจ้งปัญหาและความรุนแรง

eslint-plugin-jsx-a11y คือ ปลั๊กอิน ESLint ที่ระบุและบังคับใช้กฎการช่วยเหลือพิเศษหลายกฎ ใน JSX โดยตรง การใช้สิ่งนี้ร่วมกับเครื่องมือที่ทดสอบ DOM ที่แสดงผล เช่น react-axe จะช่วยคุณค้นหาและแก้ไขการช่วยเหลือพิเศษได้ ความกังวลบนเว็บไซต์ของคุณ

เหตุใดจึงมีประโยชน์

คุณจำเป็นต้องสร้างเว็บไซต์ที่ให้ผู้ใช้ทุกคน ความบกพร่องหรือข้อจำกัด ความสามารถในการเข้าถึงเนื้อหา การใช้การตรวจสอบ ไลบรารี เช่น react-axe และ eslint-plugin-jsx-a11y ในระหว่าง การพัฒนาแอปพลิเคชัน React จะแสดง ปัญหาการช่วยเหลือพิเศษที่ปรากฏขึ้น

ใช้ eslint-plugin-jsx-a11y

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

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

แสดงความรู้สึกในเอกสารเกี่ยวกับการช่วยเหลือพิเศษ ครอบคลุมรายละเอียดเล็กๆ น้อยๆ ทั้งหมดในการจัดการข้อกังวลด้านความสามารถเข้าถึงได้ง่ายใน React คอมโพเนนต์ เพื่อให้คุณตรวจพบปัญหาเหล่านี้ระหว่างการพัฒนาได้ง่ายขึ้น React App (CRA) มีปลั๊กอิน eslint-plugin-jsx-a11y สำหรับ ESLint โดย "ค่าเริ่มต้น"

วิธีเปิดใช้ Linting ที่กำหนดค่าล่วงหน้าซึ่งมาจาก CRA

  1. ติดตั้งปลั๊กอิน ESLint ที่เหมาะสมสำหรับตัวแก้ไขโค้ด
  2. เพิ่มไฟล์ .eslintrc.json ลงในโปรเจ็กต์
วันที่
{
  "extends": "react-app"
}

ตอนนี้ปัญหาบางอย่างเกี่ยวกับการช่วยเหลือพิเศษที่พบได้ทั่วไปจะปรากฏขึ้น

คำเตือนการช่วยเหลือพิเศษของรูปภาพในโปรแกรมวิเคราะห์โค้ด

หากต้องการดูกฎการช่วยเหลือพิเศษเพิ่มเติม ให้แก้ไขไฟล์เป็น รวมกฎที่แนะนำทั้งหมดในปลั๊กอิน:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

หากคุณต้องการชุดย่อยของกฎที่เคร่งครัดยิ่งขึ้น ให้เปลี่ยนไปใช้โหมดเข้มงวด โดยทำดังนี้

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

ข้อผิดพลาดการช่วยเหลือพิเศษของป้ายกำกับในโปรแกรมวิเคราะห์โค้ด

โปรเจ็กต์ เอกสารประกอบ จะให้ข้อมูลเกี่ยวกับความแตกต่างระหว่างโหมดที่แนะนำและโหมดเข้มงวด

ใช้แกนรีแอ็กชัน

eslint-plugin-jsx-a11y จะช่วยให้คุณระบุปัญหาด้านการช่วยเหลือพิเศษได้อย่างง่ายดาย ใน JSX ของคุณ แต่ไม่ได้ทดสอบเอาต์พุต HTML สุดท้ายใดๆ react-axe เป็นไลบรารีที่ทำหน้าที่นี้โดยเฉพาะ โดยให้มี React Wrapper รอบๆ เครื่องมือทดสอบ axe-core โดย Deque Labs

ติดตั้งไลบรารีเป็นทรัพยากร Dependency ในการพัฒนา ดังนี้

npm install --save-dev react-axe

ตอนนี้คุณจะต้องเริ่มต้นโมดูลใน index.js เท่านั้น

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

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

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

React Axe ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

นอกจากนี้ เรายังกำหนดระดับความรุนแรงสำหรับการละเมิดแต่ละรายการอีกด้วย ระดับเหล่านี้ ได้แก่

  • ผู้เยาว์
  • ปานกลาง
  • ร้ายแรง
  • วิกฤต

บทสรุป

  1. หากคุณกำลังสร้างเว็บไซต์ด้วย React ให้ใส่การตรวจสอบการช่วยเหลือพิเศษไว้ใน เวิร์กโฟลว์ของคุณตั้งแต่เนิ่นๆ เพื่อตรวจจับปัญหา ในขณะที่คุณสร้างคอมโพเนนต์
  2. ใช้ eslint-plugin-jsx-a11y เพื่อเพิ่มการตรวจสอบการช่วยเหลือพิเศษลงในโปรแกรมวิเคราะห์โค้ด CRA มาพร้อมกับเครื่องมือดังกล่าวอยู่แล้ว แต่ให้เปลี่ยนไปใช้ แนะนำหรือเข้มงวด
  3. นอกเหนือจากการทดสอบการพัฒนาในพื้นที่ ให้ใส่ react-axe ลงในไฟล์ เพื่อตรวจหาปัญหาใน DOM ที่แสดงผลขั้นสุดท้าย อย่าใส่รูปภาพไว้ ลงในแพ็กเกจเวอร์ชันที่ใช้งานจริง