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

หากต้องการทำให้เว็บไซต์ Angular เข้าถึงได้สำหรับทุกคน คุณมาถูกที่แล้ว

Minko Gechev

Zama Khan Mohammed

การทำให้แอปเข้าถึงได้หมายความว่าผู้ใช้ทุกคน รวมถึงผู้ที่มีความต้องการพิเศษจะสามารถใช้แอปและเข้าใจเนื้อหาได้ รายงานสุขภาพโลกระบุว่ามีผู้พิการมากกว่า 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 หรือเทมเพลตแบบอินไลน์ขณะเขียนโค้ด

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

การเสริม Codelyzer

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

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

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

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

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

บทสรุป

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

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