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

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

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

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

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

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

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

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

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

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

• ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Google Chrome, Lighthouse และขวานเพื่อตรวจสอบการช่วยเหลือพิเศษของแอป
• แก้ปัญหาเกี่ยวกับแอปหน้าเว็บเดียว (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. แยกและโคลนที่เก็บ และ 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 เพื่อแก้ปัญหาการช่วยเหลือพิเศษบนเว็บที่พบบ่อย

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แบบขวาน

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 และ 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 หรือการสแกนขวานเพื่อดูปัญหาอัตราส่วนคอนทราสต์เหล่านี้

เปลี่ยนสีธีม 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 เดิมจะจับรูปแบบการโต้ตอบมาตรฐานจำนวนหนึ่งที่สําคัญต่อการช่วยเหลือพิเศษ แม้ว่าย่อหน้าจะมีการจัดสไตล์เป็น span และ 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 เพื่อสร้างตัวอย่างรูปแบบการโต้ตอบนี้

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

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

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

ระบุปัญหา

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

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

A11y ใน 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 มาดูโมดูล 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 เพื่อกำหนดพื้นที่โฟกัสเริ่มต้นบนสี 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
• Angular Material a11y
• Fundamentals of Accessibility
• https://web.dev/accessible/