ตรวจสอบความสามารถเข้าถึงได้ง่ายของแอป Angular ด้วยโค้ดไลเซอร์

ต้องการให้ทุกคนเข้าถึงเว็บไซต์ Angular ได้ใช่ไหม นี่คือที่ที่ถูกต้อง

Minko Gechev

Zama Khan Mohammed

การทำให้แอปเข้าถึงได้หมายความว่าผู้ใช้ทุกคนรวมถึงผู้มีความต้องการพิเศษจะสามารถใช้แอปและเข้าใจเนื้อหาได้ จากรายงานอนามัยโลก ผู้คนมากกว่า 1 พันล้านคนหรือประมาณ 15% ของประชากรโลกมีความพิการบางรูปแบบ ดังนั้นการช่วยเหลือพิเศษจึงเป็นสิ่งสำคัญสำหรับโครงการพัฒนาทุกโครงการ

ในโพสต์นี้ คุณจะได้เรียนรู้วิธีเพิ่มการตรวจสอบการช่วยเหลือพิเศษของ Codelyzer ลงในกระบวนการบิลด์สำหรับแอป Angular วิธีนี้ช่วยให้คุณพบข้อบกพร่องของการช่วยเหลือพิเศษในโปรแกรมแก้ไขข้อความได้โดยตรงขณะเขียนโค้ด

การใช้ Codelyzer เพื่อตรวจหาองค์ประกอบที่ไม่สามารถเข้าถึงได้

codelyzer คือเครื่องมือที่อยู่บน TSLint และตรวจสอบว่าโปรเจ็กต์ Angular TypeScript เป็นไปตามชุดของกฎ Linting หรือไม่ โปรเจ็กต์ที่ตั้งค่าด้วย Angular Command Line Interface (CLI) จะมี 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 จะเปิดใช้งานโดยค่าเริ่มต้น สำหรับเอดิเตอร์อื่นๆ โปรดดู TSLint README

เมื่อตั้งค่าการตรวจสอบการเข้าถึงของ Codelyzer คุณจะได้รับป๊อปอัปที่แสดงข้อผิดพลาดเกี่ยวกับการช่วยเหลือพิเศษในไฟล์ TypeScript หรือเทมเพลตในบรรทัดขณะที่เขียนโค้ด ดังนี้

หากต้องการเรียกใช้การวิเคราะห์ทั่วทั้งโปรเจ็กต์ (รวมถึงเทมเพลตภายนอก) ให้ใช้คำสั่ง ng lint:

กำลังเสริมตัวโค้ดไลเซอร์

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

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

การบังคับใช้การตรวจสอบการช่วยเหลือพิเศษในการผสานรวมอย่างต่อเนื่อง

การแนะนำการตรวจสอบการเข้าถึงแบบคงที่ในการผสานรวมอย่างต่อเนื่อง (CI) จะช่วยเพิ่มประสิทธิภาพให้กับขั้นตอนการพัฒนาของคุณได้เป็นอย่างดี เมื่อใช้ Codelyzer คุณจะบังคับใช้กฎการช่วยเหลือพิเศษบางอย่างหรือแนวทางปฏิบัติอื่นๆ ได้ง่ายๆ โดยเรียกใช้ ng lint ในการแก้ไขโค้ดแต่ละครั้ง (เช่น สำหรับคำขอพุลใหม่แต่ละรายการ)

วิธีนี้ทำให้ CI บอกคุณได้หากมีการละเมิดการช่วยเหลือพิเศษก่อนที่คุณจะดำเนินการตรวจสอบโค้ด

บทสรุป

วิธีปรับปรุงการช่วยเหลือพิเศษของแอป Angular

1. เปิดใช้กฎการช่วยเหลือพิเศษแบบทดลองใน Codelyzer
2. ทำการวิเคราะห์การช่วยเหลือพิเศษทั่วทั้งโปรเจ็กต์โดยใช้ Angular CLI
3. แก้ไขปัญหาการช่วยเหลือพิเศษทั้งหมดที่ Codelyzer รายงาน
4. ลองใช้ Lighthouse สำหรับการตรวจสอบการช่วยเหลือพิเศษระหว่างรันไทม์