สร้างแอป Angular ที่เข้าถึงได้มากขึ้น

1. ก่อนเริ่มต้น

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

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

ในหลักสูตรนี้ a11y เป็นคำย่อของการช่วยเหลือพิเศษ โปรดสังเกตว่า a ตามด้วยอักขระ 11 ตัวและ y

ดูข้อมูลเบื้องต้นโดยละเอียดเกี่ยวกับปัญหาและเทคนิคในการออกแบบแอปที่เข้าถึงได้ที่การช่วยเหลือพิเศษ

สิ่งที่คุณจะสร้าง

• ใช้แนวทางปฏิบัติแนะนำและเทคนิคในตัวเพื่อแก้ไขปัญหาการช่วยเหลือพิเศษบนเว็บที่พบบ่อยในแอป Angular ของร้าน Dumpling Shop เวอร์ชันเดโม
• ปฏิบัติตามหลักเกณฑ์การช่วยเหลือพิเศษ, WCAG 2.0 และ ARIA 1.2 ทั้งหมด รวมถึงผ่านการตรวจสอบการช่วยเหลือพิเศษของ Axe และ Lighthouse

สิ่งที่คุณจะได้เรียนรู้

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

• ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Google Chrome, Lighthouse และ axe เพื่อตรวจสอบการช่วยเหลือพิเศษของแอป
• แก้ปัญหาที่พบบ่อยในแอปหน้าเว็บเดียว (SPA) ด้วยชื่อหน้าที่ไม่ซ้ำ
• แก้ไขปัญหาคอนทราสต์ของสีในระดับต่ำสำหรับผู้ใช้ที่มีสายตาเลือนราง
• ใช้ HTML ที่สื่อความหมายเพื่อให้โปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของหน้าเว็บได้อย่างถูกต้อง
• ใช้ Angular Material และเลิกซ้อนการควบคุมเพื่อให้โปรแกรมอ่านหน้าจอเข้าถึงการควบคุมทั้งหมดได้
• เพิ่มการรองรับ ARIA สำหรับโปรแกรมอ่านหน้าจอ
• นำเข้าและใช้แพ็กเกจ Angular CDK a11y
• ใช้ FocusTrap สำหรับการไปยังส่วนต่างๆ ของโปรแกรมอ่านหน้าจอของคอมโพเนนต์ที่กำหนดเอง
• ประกาศการแจ้งเตือนด้วย CDK LiveAnnouncer
• ตรวจหาผู้ใช้ที่ใช้โหมด HighContrast และใช้การจัดธีมคอนทราสต์สูง

สิ่งที่คุณต้องมี

• มีความรู้เกี่ยวกับ Angular, SCSS, Typescript, git และเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

2. ตั้งค่า

รับรหัส

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

โคลนที่เก็บและแสดงแอป

VSCode หรือ IDE ภายในเป็นวิธีที่แนะนำในการทำตาม Codelab นี้

1. เปิดแท็บใหม่ในเบราว์เซอร์แล้วไปที่ https://github.com/googlecodelabs/angular-accessibility
2. Fork และโคลนที่เก็บ แล้ว cd angular-accessibility/ ไปยังที่เก็บ
3. ดูสาขาโค้ดเริ่มต้น git checkout get-started
4. เปิดโค้ดใน VSCode หรือ IDE ที่ต้องการ
5. เรียกใช้ npm install เพื่อติดตั้งทรัพยากร Dependency ที่จำเป็นในการเรียกใช้เซิร์ฟเวอร์
6. เรียกใช้ ng serve เพื่อเรียกใช้เซิร์ฟเวอร์
7. เปิดแท็บเบราว์เซอร์ไปที่ http://localhost:4200

3. กำหนดพื้นฐาน

คุณเริ่มต้นจากตรงไหน

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

ดูเดโม

หากต้องการเริ่มต้นใช้งาน ให้ดูฟังก์ชันการทำงาน 3 อย่างของแอป

1. ใช้แถบนำทางเพื่อดูเส้นทางร้านค้าของเรา เรื่องราวของเรา และค้นหาเรา รวมถึงดูรายละเอียดเกี่ยวกับบริษัทเกี๊ยว
2. เปลี่ยนธีมเพื่อเปิด/ปิดโหมดสว่างและโหมดมืด
3. ปรับแต่งไส้ จำนวน และสีของเกี๊ยวในออเดอร์
4. เลือกซื้อเพื่อบันทึกคำสั่งซื้อที่กำหนดเองในคอนโซล

ใช้ Angular เพื่อแก้ปัญหาการช่วยเหลือพิเศษบนเว็บที่พบบ่อย

ในโค้ดแล็บนี้ คุณจะมุ่งเน้นที่การช่วยเหลือพิเศษของฟีเจอร์ที่มีอยู่ของแอปนี้ โดยจะเริ่มจากการระบุปัญหาด้านการช่วยเหลือพิเศษในแอป จากนั้นเปลี่ยน 🛑 เป็น ✅ โดยการใช้โซลูชัน

คุณจะทราบได้อย่างไรว่าควรแก้ไขอะไร

เริ่มต้นแต่ละตัวอย่างด้วยการระบุปัญหาการช่วยเหลือพิเศษโดยใช้การทดสอบทั้งด้วยตนเองและอัตโนมัติ

ในสถานะปัจจุบันของเว็บ การทดสอบการช่วยเหลือพิเศษด้วยตนเองเป็นสิ่งจำเป็น

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

การทดสอบด้วยตนเอง

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

ฝึกโดยเปิดโปรแกรมอ่านหน้าจอและไปยังส่วนต่างๆ ของหน้าจอ

คุณใช้ VoiceOver ในตัวของ MacOS ได้ คลิก System Preferences > Accessibility > VoiceOver > Enable VoiceOver to turn it on หากต้องการเปิด/ปิด VoiceOver ให้กด TouchID 3 ครั้งอย่างรวดเร็วขณะกดแป้น Command ค้างไว้

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

การทดสอบอัตโนมัติ

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

Lighthouse และเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

1. เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome
2. เลือกแท็บ Lighthouse แล้วเลือกช่องทำเครื่องหมายการช่วยเหลือพิเศษ
3. คลิกสร้างรายงานเพื่อเรียกใช้การตรวจสอบ Lighthouse เกี่ยวกับ a11y

ขวาน

1. ติดตั้งส่วนขยาย axe DevTools คุณอาจต้องรีสตาร์ทเบราว์เซอร์เพื่อดูส่วนขยาย
2. เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome
3. เลือกแท็บ axe DevTools แล้วเลือกสแกนทั้งหน้าเพื่อเรียกใช้การสแกน axe DevTools

การตรวจสอบโค้ด

คุณใช้กฎ ESLint ของ Angular เพื่อ Lint โค้ดสำหรับแอตทริบิวต์ a11y ที่ทำให้เป็นอัตโนมัติได้

ใน eslint.json ให้เพิ่มรายการต่อไปนี้ซึ่งใช้กับการช่วยเหลือพิเศษ

"@angular-eslint/template/accessibility-alt-text": 2,
"@angular-eslint/template/accessibility-elements-content": 2,
"@angular-eslint/template/accessibility-label-for": 2,
"@angular-eslint/template/no-positive-tabindex": 2,
"@angular-eslint/template/accessibility-table-scope": 2,
"@angular-eslint/template/accessibility-valid-aria": 2,
"@angular-eslint/template/click-events-have-key-events": 2,
"@angular-eslint/template/mouse-events-have-key-events": 2,
"@angular-eslint/template/no-autofocus": 2,
"@angular-eslint/template/no-distracting-elements": 2

ดูข้อมูลเพิ่มเติมได้ที่กฎ ESLint ล่าสุดใน GitHub

จุดเริ่มต้นของคุณ

เมื่อใช้วิธีการทดสอบใหม่ คุณจะระบุปัญหาต่อไปนี้ในแอปได้โดยใช้การตรวจสอบ Lighthouse และ axe รวมถึง VoiceOver ด้วยตนเอง

การตรวจสอบการช่วยเหลือพิเศษ

• 🛑 ทุกหน้ามีชื่อหน้าเว็บเดียวกัน
• 🛑 องค์ประกอบต้องมีคอนทราสต์สีที่เพียงพอ
• 🛑 HTML ควรมีลำดับ ชื่อ และบทบาทที่สมเหตุสมผล
• 🛑 โปรแกรมอ่านหน้าจอเลือกช่องทําเครื่องหมายที่ซ้อนกันไม่ได้
• 🛑 โปรแกรมอ่านหน้าจอไม่อ่านค่าแถบเลื่อน
• 🛑 โฟกัสของโปรแกรมอ่านหน้าจอในเครื่องมือเลือกสีจะออกจากกล่องโต้ตอบ
• 🛑 เราจะไม่ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน
• 🛑 ไม่ได้เปิดใช้โหมดคอนทราสต์สูง

4. กำหนดชื่อหน้าที่ไม่ซ้ำกัน

การระบุชื่อหน้าที่ไม่ซ้ำกันและกระชับจะช่วยให้ผู้ใช้ที่ใช้บริการ a11y เข้าใจเนื้อหาและวัตถุประสงค์ของหน้าเว็บได้อย่างรวดเร็ว ชื่อหน้าเว็บมีความสําคัญอย่างยิ่งต่อผู้ใช้ที่มีความบกพร่องทางสายตา เนื่องจากเป็นองค์ประกอบแรกของหน้าเว็บที่ซอฟต์แวร์อ่านหน้าจอประกาศ

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

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

เมื่อสิ้นสุดส่วนนี้ แอปของคุณจะผ่านการตรวจสอบต่อไปนี้

• 🛑 ทุกหน้ามีชื่อหน้าเว็บเดียวกัน

คุณจะเห็นขั้นตอนเหล่านี้ได้ที่ใต้ความคิดเห็น TODO: #4. Define unique page titles.

ระบุปัญหา

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

1. เปิด VoiceOver
2. ใช้การนำทางด้วยแท็บเพื่อไปยังหน้าต่างๆ
3. ตรวจสอบว่าชื่อหน้าเป็น a11y ใน Angular เสมอ

ปัญหานี้เกิดขึ้นเนื่องจากชื่อหน้าเว็บต้องไม่ซ้ำกันเพื่อให้ผู้ใช้เข้าใจได้อย่างรวดเร็วว่าหน้าเว็บนั้นเกี่ยวกับอะไรโดยไม่ต้องไปยังส่วนต่างๆ ของหน้าเว็บ

เพิ่มชื่อหน้าที่สื่อความหมาย

หากหน้าเว็บหรือมุมมองมีการเปลี่ยนแปลง คุณจะต้องจัดการชื่อหน้าเว็บอย่างเหมาะสม หากต้องการแก้ไขปัญหานี้ คุณต้องใช้พร็อพเพอร์ตี้ Router.title ในตัวของ Angular เพื่อกำหนดชื่อที่ไม่ซ้ำกันสำหรับแต่ละหน้า

1. เพิ่มชื่อที่ไม่ซ้ำให้กับเส้นทางที่กำหนดทั้ง 3 เส้นทาง

src/app/app-routing.module.ts

const routes: Routes = [
  { path: 'shop', component: ShopComponent, title: 'Our Shop – a11y in Angular' },
  { path: 'about', component: AboutComponent, title: 'Our Story - a11y in Angular' },
  { path: 'locate', component: LocationComponent, title: 'Find Us - a11y in Angular' },
  { path: '',   redirectTo: '/shop', pathMatch: 'full' },
  { path: '**', component: ShopComponent },
];

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

ยืนยันการเปลี่ยนแปลง

เปิดโปรแกรมอ่านหน้าจออีกครั้งและยืนยันการเปลี่ยนแปลง ตอนนี้หน้าเว็บควรมีชื่อที่ไม่ซ้ำกันแล้ว

การตรวจสอบการช่วยเหลือพิเศษ

• ✅ ทุกหน้ามีชื่อหน้าเว็บที่ไม่ซ้ำกัน
• 🛑 องค์ประกอบต้องมีคอนทราสต์สีที่เพียงพอ
• 🛑 HTML ควรมีลำดับ ชื่อ และบทบาทที่สมเหตุสมผล
• 🛑 โปรแกรมอ่านหน้าจอเลือกช่องทําเครื่องหมายที่ซ้อนกันไม่ได้
• 🛑 โปรแกรมอ่านหน้าจอไม่อ่านค่าแถบเลื่อน
• 🛑 โฟกัสของโปรแกรมอ่านหน้าจอในเครื่องมือเลือกสีจะออกจากกล่องโต้ตอบ
• 🛑 เราจะไม่ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน
• 🛑 ไม่ได้เปิดใช้โหมดคอนทราสต์สูง

5. ตรวจสอบว่าสีมีคอนทราสต์เพียงพอ

แม้ว่าการออกแบบของคุณอาจดูดี แต่ก็ไม่เป็นเช่นนั้นหากผู้ที่มีความบกพร่องทางสายตา เช่น ภาวะตาบอดสี อ่านเนื้อหาของคุณไม่ได้ หลักเกณฑ์เกี่ยวกับการเข้าถึงเนื้อหาเว็บ (WCAG 2.0) กำหนดชุดอัตราส่วนคอนทราสต์ของสี ซึ่งช่วยให้มั่นใจว่าเนื้อหาสามารถเข้าถึงได้ ใน Angular และบนเว็บ คุณสามารถกำหนดชุดสีเพื่อให้มั่นใจว่าคอมโพเนนต์เป็นไปตามมาตรฐานเหล่านี้ และผู้ใช้ที่มีสายตาเลือนรางและตาบอดสีจะมองเห็นได้

เมื่อสิ้นสุดส่วนนี้ แอปของคุณจะผ่านการตรวจสอบต่อไปนี้

• 🛑 องค์ประกอบต้องมีคอนทราสต์สีที่เพียงพอ

คุณจะเห็นขั้นตอนเหล่านี้ได้ในส่วนความคิดเห็น TODO: #5. Ensure adequate color contrast.

ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เพื่อระบุปัญหาคอนทราสต์ต่ำ

หากต้องการระบุปัญหานี้ ให้ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เพื่อตรวจสอบองค์ประกอบในแอป

1. ใช้เครื่องมือตรวจสอบเพื่อดูปุ่มไอคอนเมนู คุณจะเห็นว่าคอนทราสต์อยู่ที่ 1.85 ซึ่งต่ำกว่าข้อกำหนด WCAG มาก

2. เรียกใช้การตรวจสอบการช่วยเหลือพิเศษใน Lighthouse หรือการสแกนของ axe เพื่อดูปัญหาอัตราส่วนความคมชัดเหล่านี้

เปลี่ยนสีธีม Material

รูปแบบสีของคอมโพเนนต์จะกำหนดไว้ในธีม Material ที่กำหนดเอง คุณอัปเดตค่าธีมให้เป็นไปตามหลักเกณฑ์อัตราส่วนคอนทราสต์ของสี

อัปเดตธีม Material เพื่อใช้สีข้อความที่เข้มขึ้น ซึ่งจะเพิ่มอัตราส่วนคอนทราสต์ของไอคอน

src/styles.scss

$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);

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

ยืนยันการเปลี่ยนแปลง

ตรวจสอบองค์ประกอบอีกครั้งและยืนยันการเปลี่ยนแปลง ตอนนี้ธีมควรมีอัตราส่วนคอนทราสต์สีที่เพียงพอแล้ว

การตรวจสอบการช่วยเหลือพิเศษ

• ✅ ทุกหน้ามีชื่อหน้าเว็บที่ไม่ซ้ำกัน
• ✅ สีมีอัตราส่วนคอนทราสต์ที่เพียงพอ
• 🛑 HTML ควรมีลำดับ ชื่อ และบทบาทที่สมเหตุสมผล
• 🛑 โปรแกรมอ่านหน้าจอเลือกช่องทําเครื่องหมายที่ซ้อนกันไม่ได้
• 🛑 โปรแกรมอ่านหน้าจอไม่อ่านค่าแถบเลื่อน
• 🛑 โฟกัสของโปรแกรมอ่านหน้าจอในเครื่องมือเลือกสีจะออกจากกล่องโต้ตอบ
• 🛑 เราจะไม่ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน
• 🛑 ไม่ได้เปิดใช้โหมดคอนทราสต์สูง

6. ใช้ HTML เชิงความหมาย

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

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

เมื่อสิ้นสุดส่วนนี้ แอปของคุณจะผ่านการตรวจสอบต่อไปนี้

• 🛑 HTML ควรมีลำดับ ชื่อ และบทบาทที่สมเหตุสมผล

คุณจะเห็นขั้นตอนเหล่านี้ได้ในส่วนความคิดเห็น TODO: #6. Use Semantic HTML.

ระบุปัญหา

1. เปิด VoiceOver
2. ใช้การนำทางด้วยแท็บเพื่อคลิกไปยังแท็บเรื่องราวของเรา
3. โปรดทราบว่าลำดับแท็บไม่ได้เรียงตามลำดับ
4. คลิกPurchas
5. โปรดสังเกตว่าระบบไม่รู้จักปุ่มนี้ว่าเป็นปุ่ม

การเปลี่ยน <div> เป็น <button>

แทนที่ <div> ที่กำหนดเองด้วยปุ่ม Material ดังนี้

src/app/shop/shop.component.html

<button mat-flat-button 
  color="primary" 
  class="purchase-button"
  (click)="fauxPurchase()">
  Purchase
</button>

ใช้องค์ประกอบส่วนหัวตามลำดับ

จัดเรียงข้อความใหม่เพื่อใช้ HTML ที่สื่อความหมายและใช้การจัดรูปแบบโดยใช้การจัดรูปแบบข้อความของ Angular Material ดังนี้

src/app/about/about.component.html

<h2>Who are we?</h2>
<p class="mat-subheading-2">Have you ever thought, "wow, I love dumplings"?</p>
<p class="right mat-subheading-1">Who hasn't.</p>
<p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p> 
<p class="center mat-subheading-1">double the dumpling, double the fun.</p>
<div class="spacer"></div>
<h2>How are we different?</h2>
<p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
<p class="right mat-subheading-2">This shop is concept only.</p>

ยืนยันการเปลี่ยนแปลง

เปิดโปรแกรมอ่านหน้าจออีกครั้งและยืนยันการเปลี่ยนแปลง ตอนนี้ VoiceOver รู้จักปุ่มแล้วและจะอ่านข้อความตามลำดับที่สมเหตุสมผล

การตรวจสอบการช่วยเหลือพิเศษ

• ✅ ทุกหน้ามีชื่อหน้าเว็บที่ไม่ซ้ำกัน
• ✅ สีมีอัตราส่วนคอนทราสต์ที่เพียงพอ
• ✅ HTML เชิงความหมายช่วยให้มั่นใจได้ถึงการโต้ตอบเชิงตรรกะ
• 🛑 โปรแกรมอ่านหน้าจอเลือกช่องทําเครื่องหมายที่ซ้อนกันไม่ได้
• 🛑 โปรแกรมอ่านหน้าจอไม่อ่านค่าแถบเลื่อน
• 🛑 โฟกัสของโปรแกรมอ่านหน้าจอในเครื่องมือเลือกสีจะออกจากกล่องโต้ตอบ
• 🛑 เราจะไม่ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน
• 🛑 ไม่ได้เปิดใช้โหมดคอนทราสต์สูง

7. สร้างตัวควบคุมที่เลือกได้ด้วย Angular Material

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

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

เมื่อสิ้นสุดส่วนนี้ แอปของคุณจะผ่านการตรวจสอบต่อไปนี้

• 🛑 โปรแกรมอ่านหน้าจอเลือกช่องทําเครื่องหมายที่ซ้อนกันไม่ได้

คุณจะเห็นขั้นตอนเหล่านี้ได้ในส่วนความคิดเห็น TODO: #7. Create selectable controls with Angular Material.

ระบุปัญหา

หากต้องการระบุปัญหานี้ เราจะเปิดโปรแกรมอ่านหน้าจอและพยายามเลือกช่องทำเครื่องหมายที่ซ้อนกัน

1. เปิด VoiceOver
2. เลือกไส้รสชาติอื่น
3. โปรดทราบว่าช่องทำเครื่องหมายหลักไม่ได้ระบุบุตรหลานเมื่อ VoiceOver อ่าน คุณจะทราบได้อย่างไรว่าตอนนี้ไม่ได้เลือกช่องทำเครื่องหมายมังสวิรัติแล้วหลังจากที่คุณยกเลิกการเลือกช่องทำเครื่องหมายผักกาดขาว

การช่วยเหลือพิเศษใน Angular Material

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

แทนที่ช่องทำเครื่องหมายด้วยช่องทำเครื่องหมาย Material

1. ก่อนอื่น ให้เพิ่มรายการไส้ใหม่และตัวแปรเพื่อจัดเก็บรสชาติไส้ที่เลือก ดังนี้

src/app/shop/shop.component.ts

@Component(...)
export class ShopComponent implements OnInit {
  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
  selectedFillings: string[] = [];

  fauxPurchase(): void {
    let flavor = '';
    this.selectedFillings.forEach(filling => {
      flavor = flavor + " " + filling
    })
  }
}

2. เพิ่ม <mat-selection-list> เพื่อแทนที่การจัดกลุ่มช่องทำเครื่องหมาย HTML ที่ไม่เป็นระเบียบนี้

src/app/shop/shop.component.html

<mat-selection-list [(ngModel)]="selectedFillings" 
  aria-label="Dumpling fillings">
  <mat-list-option *ngFor="let flavor of fillings" 
    [value]="flavor" 
    color="primary">
    {{ flavor }}
  </mat-list-option>
</mat-selection-list>

TODOความคิดเห็นยังแสดงตำแหน่งที่คุณสามารถนำ Sass ที่ไม่ได้ใช้ออกใน src/app/shop/shop.component.scss เพื่อล้างการจัดรูปแบบได้ด้วย

ยืนยันการเปลี่ยนแปลง

เปิดโปรแกรมอ่านหน้าจออีกครั้งและยืนยันการเปลี่ยนแปลง ตอนนี้คุณเลือกช่องทำเครื่องหมายและไปยังส่วนต่างๆ ได้อย่างง่ายดายมากขึ้นด้วยโปรแกรมอ่านหน้าจอ

การตรวจสอบการช่วยเหลือพิเศษ

• ✅ ทุกหน้ามีชื่อหน้าเว็บที่ไม่ซ้ำกัน
• ✅ สีมีอัตราส่วนคอนทราสต์ที่เพียงพอ
• ✅ HTML เชิงความหมายช่วยให้มั่นใจได้ถึงการโต้ตอบเชิงตรรกะ
• ✅ โปรแกรมอ่านหน้าจอเข้าถึงการควบคุมทั้งหมดได้
• 🛑 โปรแกรมอ่านหน้าจอไม่อ่านค่าแถบเลื่อน
• 🛑 โฟกัสของโปรแกรมอ่านหน้าจอในเครื่องมือเลือกสีจะออกจากกล่องโต้ตอบ
• 🛑 เราจะไม่ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน
• 🛑 ไม่ได้เปิดใช้โหมดคอนทราสต์สูง

8. ระบุป้ายกำกับการควบคุมด้วย ARIA

คุณได้แก้ไข HTML ที่สื่อความหมายและคอมโพเนนต์ Material ของแอป Angular แล้ว แต่คอมโพเนนต์บางรายการต้องมีแอตทริบิวต์ที่เฉพาะเจาะจงเพื่อให้โปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ได้อย่างเต็มที่

ข้อกำหนด Accessible Rich Internet Applications ของ Web Accessibility Initiative (WAI-ARIA หรือ ARIA) ช่วยแก้ปัญหาที่จัดการด้วย HTML ดั้งเดิมไม่ได้ ซึ่งช่วยให้คุณระบุแอตทริบิวต์ที่แก้ไขวิธีแปลองค์ประกอบเป็นทรีการช่วยเหลือพิเศษได้

เมื่อสิ้นสุดส่วนนี้ แอปของคุณจะผ่านการตรวจสอบต่อไปนี้

• 🛑 โปรแกรมอ่านหน้าจอไม่อ่านค่าแถบเลื่อน

คุณจะเห็นขั้นตอนเหล่านี้ได้ในส่วนความคิดเห็น TODO: #8. Provide control labels with ARIA.

ระบุปัญหา

หากต้องการระบุปัญหานี้ ให้เปิดโปรแกรมอ่านหน้าจอและเลื่อนแถบเลื่อน

1. เปิด VoiceOver
2. ไปที่แถบเลื่อนจำนวนและเปลี่ยนค่า
3. โปรดสังเกตว่าไม่มีป้ายกำกับค่า

ใช้แอตทริบิวต์ ARIA

การควบคุมป้ายกำกับโดยใช้ aria-label กับ <mat-slider>

src/app/shop/shop.component.html

<mat-slider
  aria-label="Dumpling order quantity slider"
  id="quantity"
  name="quantity"
  color="primary"
  class="quantity-slider"
  [max]="13"
  [min]="1"
  [step]="1"
  [tickInterval]="1"
  thumbLabel
  [(ngModel)]="quantity">
</mat-slider>

ยืนยันการเปลี่ยนแปลง

เปิดโปรแกรมอ่านหน้าจออีกครั้งและยืนยันการเปลี่ยนแปลง ตอนนี้คุณเลื่อนแถบเลื่อนได้แล้ว

การตรวจสอบการช่วยเหลือพิเศษ

• ✅ ทุกหน้ามีชื่อหน้าเว็บที่ไม่ซ้ำกัน
• ✅ สีมีอัตราส่วนคอนทราสต์ที่เพียงพอ
• ✅ HTML เชิงความหมายช่วยให้มั่นใจได้ถึงการโต้ตอบเชิงตรรกะ
• ✅ โปรแกรมอ่านหน้าจอเข้าถึงการควบคุมทั้งหมดได้
• ✅ แถบเลื่อนใช้แอตทริบิวต์ ARIA เพื่อระบุป้ายกำกับ
• 🛑 โฟกัสของโปรแกรมอ่านหน้าจอในเครื่องมือเลือกสีจะออกจากกล่องโต้ตอบ
• 🛑 เราจะไม่ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน
• 🛑 ไม่ได้เปิดใช้โหมดคอนทราสต์สูง

9. เพิ่มประสิทธิภาพของ @angular/cdk/a11y

ที่ผ่านมา คุณใช้เครื่องมือ Angular ในตัวเพื่อแก้ไขปัญหาด้านการช่วยเหลือพิเศษที่พบบ่อย ตอนนี้มาดูโมดูล a11y ของ CDK และวิธีที่โมดูลนี้ช่วยเราแก้ปัญหาที่ซับซ้อนยิ่งขึ้นและปัญหาที่เฉพาะเจาะจงของ Angular กัน

เมื่อจบส่วนนี้ คุณจะเรียนหลักสูตรนี้ต่อด้วยเครื่องมือโมดูล a11y ของ Angular

คุณจะเห็นขั้นตอนเหล่านี้ใต้ความคิดเห็น TODO: #9. Add the power of @angular/cdk/a11y.

นำเข้าโมดูล

เพิ่มโมดูลลงในแอปโดยทำดังนี้

src/app/app.module.ts

import { A11yModule } from '@angular/cdk/a11y';

@NgModule({
  declarations: [...],
  imports: [
    A11yModule
  ],
  providers: [...],
  bootstrap: [...]
})

'@angular/cdk/a11y' ทำอะไรได้บ้าง

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

ในส่วนต่อไปนี้ คุณจะเพิ่มบริการที่ใช้กันทั่วไป 3 อย่าง ได้แก่ FocusTrap, LiveAnnouncer และ HighContrast

ดูข้อมูลเพิ่มเติมเกี่ยวกับบริการอื่นๆ ทั้งหมดที่ @angular/cdk/a11y มีให้บริการได้ที่การช่วยเหลือพิเศษ

10. ควบคุมโฟกัสด้วย FocusTrap

เมื่อกล่องโต้ตอบหรือโมดอลเปิดอยู่ ผู้ใช้จะโต้ตอบได้เฉพาะภายในกล่องโต้ตอบหรือโมดอลนั้น การอนุญาตให้โฟกัสหลุดออกไปนอกกล่องโต้ตอบจะทำให้บริบทปะปนกันและสร้างสถานะที่ผู้ใช้ไม่ทราบว่าตนเองอยู่ส่วนใดของหน้าเว็บ

ใน Angular ไดเรกทีฟ cdkTrapFocus จะดักจับtab-โฟกัสของคีย์ภายในองค์ประกอบ โดยมีจุดประสงค์เพื่อใช้สร้างประสบการณ์ที่เข้าถึงได้สำหรับคอมโพเนนต์ต่างๆ เช่น กล่องโต้ตอบแบบโมดอล ซึ่งต้องจำกัดโฟกัส

เมื่อสิ้นสุดส่วนนี้ แอปของคุณจะผ่านการตรวจสอบต่อไปนี้

• 🛑 โฟกัสของโปรแกรมอ่านหน้าจอในเครื่องมือเลือกสีจะออกจากกล่องโต้ตอบ

คุณจะเห็นขั้นตอนเหล่านี้ใต้ความคิดเห็น TODO: #10. Control focus with FocusTrap.

ระบุปัญหา

หากต้องการระบุปัญหานี้ ให้เปิดโปรแกรมอ่านหน้าจอแล้วเปิดกล่องโต้ตอบตัวเลือกสี

1. เปิด VoiceOver
2. ใช้การนำทางด้วยแท็บเพื่อเปลี่ยนสี
3. ดูโฟกัสที่ใช้งานง่ายและโฟกัสที่ดักจับในเครื่องมือเลือกสี

เพิ่ม FocusTrap

cdkFocusTrap ใช้เพื่อดักจับและควบคุมลำดับโฟกัสในคอมโพเนนต์ที่กำหนดเองได้ การใช้ mat-dialog-content ก็เพียงพอที่จะแก้ปัญหาส่วนใหญ่ได้โดยการดักโฟกัสในกล่องโต้ตอบ เพิ่มแอตทริบิวต์ cdkFocusInitial เพื่อกำหนดภูมิภาคโฟกัสเริ่มต้นในสีของแผ่นเกี๊ยว <mat-selection-list> ภายในกล่องโต้ตอบเครื่องมือเลือกสี

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html

<mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false" cdkFocusInitial>
  ...
</mat-selection-list>

ยืนยันการเปลี่ยนแปลง

เปิดโปรแกรมอ่านหน้าจออีกครั้งและยืนยันการเปลี่ยนแปลง ตอนนี้ระบบจะตั้งโฟกัสเริ่มต้นที่เปลี่ยนสีในกล่องโต้ตอบ

การตรวจสอบการช่วยเหลือพิเศษ

• ✅ ทุกหน้ามีชื่อหน้าเว็บที่ไม่ซ้ำกัน
• ✅ สีมีอัตราส่วนคอนทราสต์ที่เพียงพอ
• ✅ HTML เชิงความหมายช่วยให้มั่นใจได้ถึงการโต้ตอบเชิงตรรกะ
• ✅ โปรแกรมอ่านหน้าจอเข้าถึงการควบคุมทั้งหมดได้
• ✅ แถบเลื่อนใช้แอตทริบิวต์ ARIA เพื่อระบุป้ายกำกับ
• ✅ ตัวเลือกสีมีการดักจับโฟกัสที่ถูกต้อง
• 🛑 เราจะไม่ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน
• 🛑 ไม่ได้เปิดใช้โหมดคอนทราสต์สูง

11. ประกาศการเปลี่ยนแปลงด้วย LiveAnnouncer

โปรแกรมอ่านหน้าจอต้องได้รับการแจ้งเตือนเมื่อมีการเปลี่ยนแปลงในหน้าเว็บ ลองนึกภาพว่าคุณพยายามส่งแบบฟอร์มหรือทำการซื้อให้เสร็จสมบูรณ์ แต่ไม่รู้ว่ามีข้อผิดพลาดปรากฏขึ้นซึ่งทำให้ส่งแบบฟอร์มไม่ได้ น่าหงุดหงิดมากเลย

LiveAnnouncer ใช้เพื่อประกาศข้อความสำหรับผู้ใช้โปรแกรมอ่านหน้าจอโดยใช้ภูมิภาค aria-live เพื่อให้แน่ใจว่าโปรแกรมอ่านหน้าจอจะได้รับการแจ้งเตือนเกี่ยวกับการแจ้งเตือนและการเปลี่ยนแปลงหน้าเว็บแบบเรียลไทม์ ดูข้อมูลเพิ่มเติมเกี่ยวกับรีเจียน aria-live ได้ที่ WAI-ARIA ของ W3C ใน Angular การเรียกใช้ LiveAnnouncer เป็นบริการเป็นโซลูชันที่ทดสอบได้มากกว่าแอตทริบิวต์ aria-live

เมื่อสิ้นสุดส่วนนี้ แอปของคุณจะผ่านการตรวจสอบต่อไปนี้

• 🛑 เราจะไม่ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน

คุณจะเห็นขั้นตอนเหล่านี้ใต้ความคิดเห็น TODO: #11. Announce changes with LiveAnnouncer.

ระบุปัญหา

หากต้องการระบุปัญหานี้ ให้เปิดโปรแกรมอ่านหน้าจอ แล้วเลือกซื้อโดยไม่ต้องกรอกข้อมูลในช่องแบบฟอร์ม

1. เปิด VoiceOver
2. ใช้การนำทางด้วยแท็บเพื่อเปลี่ยนสีและทำการซื้อปลอม
3. โปรดทราบว่าไม่มีการระบุว่าเลือกสีใดเมื่อออกจากกล่องโต้ตอบและยังไม่ได้อ่านการซื้อ

เพิ่ม LiveAnnouncer ลงในโค้ด

เพิ่ม LiveAnnouncer และประกาศทั้งการเลือกสีและการซื้อปลอมเป็นสตริง ในการใช้งานจริง ระบบอาจอ่านข้อความนี้เมื่อคุณไปที่ระบบการชำระเงินของบุคคลที่สามหรือเมื่อเกิดข้อผิดพลาดในแบบฟอร์ม

1. เพิ่มประกาศเมื่อเลือกสี

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ColorPickerDialogComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ColorDialogData,
    private liveAnnouncer: LiveAnnouncer) { }

  public changeColor(color: string): void {
    this.liveAnnouncer.announce(`Select color: ${color}`);
    this.dialogRef.close();
  }
}

2. เพิ่มประกาศเมื่อมีการซื้อปลอม

src/app/shop/shop.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ShopComponent implements OnInit {

  constructor(private liveAnnouncer: LiveAnnouncer) { }

  fauxPurchase(): void {
    let flavor = '...';
    const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;

    this.liveAnnouncer.announce(fakePurchase);
  }
}

ยืนยันการเปลี่ยนแปลง

เปิดโปรแกรมอ่านหน้าจออีกครั้งและยืนยันการเปลี่ยนแปลง ตอนนี้คุณจะได้รับการแจ้งเตือนเกี่ยวกับข้อผิดพลาดแล้ว

การตรวจสอบการช่วยเหลือพิเศษ

• ✅ ทุกหน้ามีชื่อหน้าเว็บที่ไม่ซ้ำกัน
• ✅ สีมีอัตราส่วนคอนทราสต์ที่เพียงพอ
• ✅ HTML เชิงความหมายช่วยให้มั่นใจได้ถึงการโต้ตอบเชิงตรรกะ
• ✅ โปรแกรมอ่านหน้าจอเข้าถึงการควบคุมทั้งหมดได้
• ✅ แถบเลื่อนใช้แอตทริบิวต์ ARIA เพื่อระบุป้ายกำกับ
• ✅ ตัวเลือกสีมีการดักจับโฟกัสที่ถูกต้อง
• ✅ ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน
• 🛑 ไม่ได้เปิดใช้โหมดคอนทราสต์สูง

12. เปิดใช้โหมด HighContrast

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

HighContrastModeDetector ช่วยให้คุณพิจารณาได้ว่าเบราว์เซอร์อยู่ในสภาพแวดล้อมโหมดคอนทราสต์สูงหรือไม่

Internet Explorer, Microsoft Edge และ Firefox รองรับโหมดนี้ Google Chrome ไม่รองรับโหมดคอนทราสต์สูงของ Windows บริการนี้ไม่ตรวจหาโหมดคอนทราสต์สูงตามที่ส่วนขยายเบราว์เซอร์คอนทราสต์สูงของ Chrome เพิ่ม

เมื่อสิ้นสุดส่วนนี้ แอปของคุณจะผ่านการตรวจสอบต่อไปนี้

• 🛑 ไม่ได้เปิดใช้โหมดคอนทราสต์สูง

คุณจะเห็นขั้นตอนเหล่านี้ใต้ความคิดเห็น TODO: #12. Enable HighContrast mode.

ระบุปัญหา

หากต้องการระบุปัญหานี้ ให้เปิดแอปใน Internet Explorer, Microsoft Edge หรือ Firefox แล้วเปิดโหมดคอนทราสต์สูง จากนั้นสังเกตว่าไม่มีการเปลี่ยนแปลง

1. เปิดแอปใน Internet Explorer, Microsoft Edge หรือ Firefox
2. เปิดโหมดคอนทราสต์สูง
3. โปรดทราบว่าแอปพลิเคชันจะไม่มีการเปลี่ยนแปลง

เพิ่มการรองรับโหมดคอนทราสต์สูง

ใน styles.scss ให้ใช้มิกซ์อิน cdk-high-contrast ที่ระบุไว้ใน @angular/cdk/a11y เพื่อเพิ่มเส้นขอบให้กับปุ่มในโหมดคอนทราสต์สูง

src/app/shop/shop.component.scss

@use '@angular/cdk';

.purchase-button {
    border-radius: 5px;
    background-color: mat.get-color-from-palette(mat.$pink-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$pink-palette, 50);
    }
}

:host-context(.dark-theme) {
  .purchase-button {
    background-color: mat.get-color-from-palette(mat.$light-green-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$light-green-palette, 50);
    }
  }
}

ยืนยันการเปลี่ยนแปลง

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

การตรวจสอบการช่วยเหลือพิเศษ

• ✅ ทุกหน้ามีชื่อหน้าเว็บที่ไม่ซ้ำกัน
• ✅ สีมีอัตราส่วนคอนทราสต์ที่เพียงพอ
• ✅ HTML เชิงความหมายช่วยให้มั่นใจได้ถึงการโต้ตอบเชิงตรรกะ
• ✅ โปรแกรมอ่านหน้าจอเข้าถึงการควบคุมทั้งหมดได้
• ✅ แถบเลื่อนใช้แอตทริบิวต์ ARIA เพื่อระบุป้ายกำกับ
• ✅ ตัวเลือกสีมีการดักจับโฟกัสที่ถูกต้อง
• ✅ ประกาศการเปลี่ยนแปลง ข้อผิดพลาด และการแจ้งเตือน
• ✅ เปิดใช้โหมดคอนทราสต์สูงแล้ว

13. ยินดีด้วย

ขอแสดงความยินดี คุณได้แก้ไขปัญหาการช่วยเหลือพิเศษบนเว็บที่พบบ่อยในแอป Angular แล้ว 🎉

หากต้องการดูโซลูชันทั้งหมด โปรดดูmain

ตอนนี้คุณทราบขั้นตอนสำคัญที่จำเป็นในการแก้ไขข้อผิดพลาดด้านการช่วยเหลือพิเศษที่พบบ่อย 8 อย่างในแอปพลิเคชัน Angular แล้ว

ดูข้อมูลเพิ่มเติม

ลองใช้ Codelab เหล่านี้

• การสร้างเว็บแอปพลิเคชันด้วย Angular และ Firebase
• ค้นหาและแก้ไขข้อความที่มีคอนทราสต์ต่ำด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

อ่านเนื้อหาต่อไปนี้

• Angular.io
• Angular Material a11y
• หลักการพื้นฐานด้านการช่วยเหลือพิเศษ
• https://web.dev/accessible/