หากต้องการทำให้เว็บไซต์ Angular เข้าถึงได้สำหรับทุกคน คุณมาถูกที่แล้ว
การทำให้แอปเข้าถึงได้หมายความว่าผู้ใช้ทุกคน รวมถึงผู้ที่มีความต้องการพิเศษจะสามารถใช้แอปและเข้าใจเนื้อหาได้ รายงานสุขภาพโลกระบุว่ามีผู้พิการมากกว่า 1 พันล้านคน หรือประมาณ 15% ของประชากรโลก ดังนั้นการช่วยเหลือพิเศษจึงเป็นสิ่งสำคัญสำหรับโปรเจ็กต์การพัฒนาใดๆ
ในโพสต์นี้ คุณจะได้เรียนรู้วิธีเพิ่มการตรวจสอบการช่วยเหลือพิเศษของ codelyzer ลงในกระบวนการบิลด์สำหรับแอป Angular วิธีนี้ช่วยให้คุณตรวจพบข้อบกพร่องด้านการช่วยเหลือพิเศษได้โดยตรงในโปรแกรมแก้ไขข้อความขณะเขียนโค้ด
การใช้ Codelyzer เพื่อตรวจหาองค์ประกอบที่เข้าถึงไม่ได้
codelyzer เป็นเครื่องมือที่อยู่เหนือ TSLint และตรวจสอบว่าโปรเจ็กต์ Angular TypeScript เป็นไปตามชุดกฎการ Lint หรือไม่ โปรเจ็กต์ที่ตั้งค่าด้วยอินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Angular จะมี Codelyzer โดยค่าเริ่มต้น
Codelyzer มีกฎมากกว่า 50 ข้อสำหรับตรวจสอบว่าแอปพลิเคชัน Angular เป็นไปตามแนวทางปฏิบัติแนะนำหรือไม่ โดยมีกฎประมาณ 10 ข้อสำหรับการบังคับใช้เกณฑ์การช่วยเหลือพิเศษ ดูข้อมูลเกี่ยวกับการตรวจสอบการช่วยเหลือพิเศษต่างๆ ที่ Codelyzer มีให้และเหตุผลในการตรวจสอบได้ที่บทความกฎการช่วยเหลือพิเศษใหม่ใน Codelyzer
ปัจจุบันกฎการช่วยเหลือพิเศษทั้งหมดเป็นแบบทดลองและปิดใช้โดยค่าเริ่มต้น คุณเปิดใช้ได้โดยเพิ่มลงในไฟล์การกำหนดค่า TSLint (tslint.json)
{
"rulesDirectory": [
"codelyzer"
],
"rules": {
...,
"template-accessibility-alt-text": true,
"template-accessibility-elements-content": true,
"template-accessibility-label-for": true,
"template-accessibility-tabindex-no-positive": true,
"template-accessibility-table-scope": true,
"template-accessibility-valid-aria": true,
"template-click-events-have-key-events": true,
"template-mouse-events-have-key-events": true,
"template-no-autofocus": true,
"template-no-distracting-elements": true
}
}
TSLint ทำงานร่วมกับโปรแกรมแก้ไขข้อความและ IDE ยอดนิยมทั้งหมด หากต้องการใช้กับ VSCode ให้ติดตั้งปลั๊กอิน TSLint ใน WebStorm ระบบจะเปิดใช้ TSLint โดยค่าเริ่มต้น สำหรับโปรแกรมแก้ไขอื่นๆ โปรดดู README ของ TSLint
เมื่อตั้งค่าการตรวจสอบการช่วยเหลือพิเศษของ Codelyzer แล้ว คุณจะเห็นป๊อปอัปที่แสดงข้อผิดพลาดด้านการช่วยเหลือพิเศษในไฟล์ TypeScript หรือเทมเพลตแบบอินไลน์ขณะเขียนโค้ด