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

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

Minko Gechev

Zama Khan Mohammed

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

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

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

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

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

วันที่

ป๊อปอัปตัวแปลงรหัสที่แสดงข้อผิดพลาดในการติดป้ายกำกับองค์ประกอบแบบฟอร์ม

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

กำลังเสริม Codelyzer

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

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

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

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

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

บทสรุป

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

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