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