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

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

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

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

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

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

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

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

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

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

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

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

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

2. ตั้งค่า

ดูรหัส

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

โคลนที่เก็บและให้บริการแอป

VSCode หรือ IDE ในเครื่องเป็นเมธอดที่แนะนำสำหรับการทำงานผ่าน Codelab นี้

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

3. สร้างเกณฑ์พื้นฐาน

คุณควรเริ่มจากอะไร

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

สำรวจการสาธิต

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

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

ใช้ Angular เพื่อแก้ไขปัญหาทั่วไปด้านการเข้าถึงเว็บ

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

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

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

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

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

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

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

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

คุณใช้ VoiceOver ในตัวของ MacOS ได้ คลิกค่ากำหนดของระบบ > การช่วยเหลือพิเศษ > VoiceOver > เปิดใช้ VoiceOver เพื่อเปิด หากต้องการสลับ VoiceOver ให้กด TouchID เร็วๆ 3 ครั้งโดยกดปุ่ม Command ค้างไว้

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

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

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

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

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

แบบขวาน

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

ไม่เป็นขุย

คุณสามารถใช้กฎ Angular ESLint เพื่อแปลงโค้ดสำหรับแอตทริบิวต์ 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 และขวาน รวมทั้ง 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 หรือการสแกนแกนเพื่อดูปัญหาเกี่ยวกับอัตราส่วนคอนทราสต์เหล่านี้

เปลี่ยนสีธีม 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. คลิกการซื้อ
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 เพื่อสร้างตัวอย่าง 1 ตัวอย่างของรูปแบบการโต้ตอบนี้

ในตอนท้ายของส่วนนี้ แอปจะผ่านการตรวจสอบต่อไปนี้

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

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

ระบุปัญหา

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

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

A11y ในวัสดุเชิงมุม

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

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

ขั้นตอนเหล่านี้จะอยู่ในความคิดเห็น 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 และ HighCเข้าร่วมโปรแกรม

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

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

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

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

ในตอนท้ายของส่วนนี้ แอปจะผ่านการตรวจสอบต่อไปนี้

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

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

ระบุปัญหา

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

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

เพิ่ม FocusTrap

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

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
• วัสดุเชิงมุม a11y
• ความรู้พื้นฐานด้านการช่วยเหลือพิเศษ
• https://web.dev/accessible/