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

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

ฮูสเซน จอร์เดห์

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

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 Create React App (CRA) จะรวมปลั๊กอิน eslint-plugin-jsx-a11y สำหรับ ESLint โดยค่าเริ่มต้น เพื่อให้คุณตรวจพบปัญหาเหล่านี้ได้ง่ายขึ้นในระหว่างการพัฒนา

หากต้องการเปิดใช้การวิเคราะห์ข้อมูลที่กำหนดค่าไว้ล่วงหน้าซึ่งให้บริการโดย 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 เป็นไลบรารีที่ทำเช่นนี้ได้โดยการมอบ 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 DevTools โดยตรง

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

• เล็กน้อย
• ราคาปานกลาง
• จริงจัง
• วิกฤต

บทสรุป

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