إنشاء تطبيقات Angular أكثر سهولة في الاستخدام

1. قبل البدء

تُعدّ تسهيل الاستخدام جزءًا حيويًا من تطوير الويب، ما يضمن قدرة المستخدمين على التعرّف على التطبيقات وفهمها والتنقّل فيها والتفاعل معها. في الواقع، يعاني 1 من كل 4 أشخاص في الولايات المتحدة من إعاقة تؤثر في أنشطة الحياة الرئيسية. يعاني حوالي ‎15% من سكان العالم، أي أكثر من مليار شخص، من أحد أشكال الإعاقة، ويواجه حوالي ‎2% إلى ‎4% من السكان صعوبات كبيرة.

تشمل الحالات الشائعة التي تؤثر في استخدام الشخص للويب العمى أو ضعف البصر، والصمم أو ضعف السمع، والمهارات الحركية المقيّدة، والإعاقات الإدراكية، وعمى الألوان - وهذه مجرد قائمة جزئية.

في هذه الدورة التدريبية، يشير الاختصار a11y إلى سهولة الاستخدام. لاحظ أنّ الحرف a متبوعًا بـ 11 حرفًا وy.

للاطّلاع على مقدمة تفصيلية عن المشاكل والتقنيات الخاصة بتصميم تطبيقات تسهيل الاستخدام، يُرجى الاطّلاع على تسهيل الاستخدام.

ما الذي ستنشئه

• استخدام أفضل الممارسات والتقنيات المضمّنة لمعالجة المشاكل الشائعة المتعلّقة بتسهيل استخدام الويب في إصدار تجريبي من تطبيق Dumpling Shop Angular
• استيفاء جميع إرشادات تسهيل الاستخدام، وWCAG 2.0، وARIA 1.2، واجتياز عمليات تدقيق تسهيل الاستخدام باستخدام axe وLighthouse

ما ستتعرّف عليه

ستتعرّف على ثماني مشاكل شائعة في سهولة الاستخدام في تطبيقات Angular تؤثّر في المستخدمين، وكيفية تحديدها وحلّها. وعلى وجه التحديد، عليك تنفيذ ما يلي:

• استخدام أدوات مطوّري برامج Google Chrome وLighthouse وaxe لتدقيق سهولة استخدام تطبيقك
• حلّ مشاكل تطبيق من صفحة واحدة (SPA) باستخدام عناوين صفحات فريدة
• حلّ مشاكل الألوان المنخفضة التباين للمستخدمين الذين يعانون من ضعف البصر
• استخدام HTML الدلالي لضمان تنقّل تطبيقات قراءة الشاشة في الصفحة بشكل صحيح
• استخدِم Angular Material وعناصر التحكّم غير المتداخلة لضمان تمكّن برامج قراءة الشاشة من الوصول إلى جميع عناصر التحكّم.
• إضافة تنسيق ARIA لبرامج قراءة الشاشة
• استيراد حزمة Angular CDK a11y واستخدامها
• استخدام FocusTrap للتنقّل في المكوّنات المخصّصة باستخدام قارئ الشاشة
• الإعلان عن الإشعارات باستخدام CDK LiveAnnouncer
• رصد المستخدمين باستخدام وضع التباين العالي واستخدام مظاهر عالية التباين

المتطلبات

• معرفة Angular وSCSS وTypescript وgit وأدوات مطوّري برامج Chrome

2. الإعداد

الحصول على الرمز

يمكنك العثور على كل ما تحتاجه لهذا المشروع في مستودع GitHub. للبدء، يمكنك استنساخ الرمز البرمجي وفتحه في بيئة المطوّر المفضّلة لديك.

استنساخ المستودع وعرض التطبيق

يُنصح باستخدام VSCode أو بيئة تطوير متكامل (IDE) محلية لتنفيذ هذا الدرس التطبيقي حول الترميز.

1. افتح علامة تبويب جديدة في المتصفح وانتقِل إلى https://github.com/googlecodelabs/angular-accessibility.
2. إنشاء نسخة من المستودع واستنساخه، وcd angular-accessibility/ إلى المستودع.
3. اطّلِع على فرع الرمز المُعدّ مسبقًا للمبتدئين git checkout get-started.
4. افتح الرمز في VSCode أو بيئة تطوير البرامج المتكاملة المفضّلة لديك.
5. شغِّل npm install لتثبيت التبعيات المطلوبة لتشغيل الخادم.
6. شغِّل ng serve لتشغيل الخادم.
7. افتح علامة تبويب في المتصفّح للانتقال إلى http://localhost:4200.

3- تحديد مرجع

ما هي نقطة البداية؟

نقطة البداية هي تطبيق أساسي لمطعم مصمَّم لهذا الدرس التطبيقي حول الترميز. تم تبسيط التعليمات البرمجية لعرض المفاهيم في هذا الدليل التعليمي للترميز، وهي لا تتضمن سوى وظائف قليلة.

استكشاف الإصدار التجريبي

للبدء، تعرّف على الوظائف الثلاث لتطبيقك:

1. يمكنك استخدام شريط التنقّل لعرض مسارات متاجرنا وقصتنا واعثر علينا، والاطّلاع على تفاصيل عن شركة فطائر الدامبلنغ.
2. تغيير المظاهر لتفعيل الوضع الفاتح أو الداكن
3. خصِّص حشوات الفطائر المقلية وكميتها ولونها.
4. انقر على شراء لتسجيل طلبك المخصّص في وحدة التحكّم.

استخدام Angular لحلّ المشاكل الشائعة في تسهيل الاستخدام على الويب

في هذا الدرس التطبيقي حول الترميز، ستركز على تسهيل استخدام الميزات الحالية في هذا التطبيق. ستبدأ بتحديد مشاكل تسهيل الاستخدام في تطبيقك، ثم تحويل رمز 🛑 إلى رمز ✅ من خلال تنفيذ حلّ.

كيف يمكنك معرفة ما يجب إصلاحه؟

ابدأ كل مثال من خلال التعرّف على مشكلة إمكانية الوصول باستخدام مزيج من الاختبار اليدوي والتلقائي.

في ظلّ الوضع الحالي للويب، يكون اختبار تسهيل الاستخدام يدويًا إلزاميًا.

تتوفّر لديك أدوات يمكنها تحديد مشاكل تسهيل الاستخدام، ولكن لا يمكن لأي أداة أن تقدّم شهادة بأنّ التطبيق سهل الاستخدام بالكامل. ويضمن الاختبار اليدوي إجراء الاختبارات للوصول إلى مجموعة واسعة من مفاهيم A11y التي تتضمّن ترتيبًا منطقيًا للمحتوى وتكافؤ الميزات.

الاختبار اليدوي

لاختبار تسهيل الاستخدام يدويًا في هذه الدورة التدريبية، عليك تفعيل قارئ الشاشة المدمج في جهاز الكمبيوتر والتنقّل في تطبيقك باستخدام لوحة المفاتيح. لمزيد من المعلومات، يُرجى الاطّلاع على الدلالات وتطبيقات قراءة الشاشة.

يمكنك التدرّب على ذلك من خلال تفعيل قارئ الشاشة والتنقّل في الشاشة.

يمكنك استخدام ميزة VoiceOver المدمجة في نظام التشغيل MacOS. انقر على System Preferences (الإعدادات المفضَّلة للنظام) > Accessibility (تسهيل الاستخدام) > VoiceOver (التعليق الصوتي) > Enable VoiceOver to turn it on (تفعيل ميزة "التعليق الصوتي"). لتفعيل ميزة VoiceOver أو إيقافها، اضغط بسرعة على زر TouchID ثلاث مرات مع الضغط مع الاستمرار على المفتاح Command.

في هذه الدورة التدريبية، ستختبر المشاكل يدويًا بشكل أساسي وتستخدم أدوات مبرمَجة للمساعدة في التحقّق من ميزات محدّدة قابلة للمعالجة تلقائيًا.

الاختبار الآلي

ويمكنك أيضًا استخدام بعض أدوات التطوير لأتمتة تطبيقك وفحصه. تتيح لك هذه الأدوات التحقّق من عناصر مثل توفّر نص بديل لصورة أو نسبة تباين لون نص. يمكنك التفكير في هذه الأدوات على أنها نصوص؛ حيث يمكنها التعرف على وجود النص البديل، ولكن يجب عليك التحقق يدويًا من أن المحتوى منطقي ويقدم قيمة.

أدوات Lighthouse وChrome للمطوّرين

1. افتح "أدوات مطوّري برامج Chrome".
2. اختَر علامة التبويب Lighthouse وضَع علامة في مربّع الاختيار تسهيل الاستخدام.
3. انقر على إنشاء تقرير لإجراء عملية تدقيق في Lighthouse بشأن مدى التوفّر.

فأس

1. ثبِّت إضافة axe DevTools. قد تحتاج إلى إعادة تشغيل المتصفّح للاطّلاع على الإضافة.
2. افتح "أدوات مطوّري برامج Chrome".
3. اختَر علامة التبويب axe DevTools، ثمّ اختَر فحص كل صفحتي لإجراء فحص axe DevTools.

الوبر

يمكنك استخدام قواعد Angular ESLint لفحص رمزك البرمجي بحثًا عن سمات تسهيل الاستخدام القابلة للبرمجة.

في 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 ترتيب ومَعلمة اسم ودور منطقي
• 🛑 لا يمكن لقارئات الشاشة اختيار مربّعات الاختيار المُدمجة.
• 🛑 لا يقرأ قارئ الشاشة قيم شريط التمرير
• 🛑 عند تركيز قارئ الشاشة على أداة اختيار الألوان، يتم الخروج من مربّع الحوار
• 🛑 لا يتم الإعلان عن التغييرات والأخطاء والإشعارات
• 🛑 وضع HighContrast غير مفعَّل

4. تحديد عناوين فريدة للصفحات

يساعد تقديم عناوين صفحات فريدة وموجزة المستخدمين الذين يستخدمون خدمات تسهيل الاستخدام على فهم محتوى صفحة الويب والغرض منها بسرعة. إنّ عناوين الصفحات مهمة للمستخدمين الذين يعانون من عجز بصري، لأنّها أول عنصر في الصفحة يُعلن عنه برنامج قراءة الشاشة.

‫Angular هو تطبيق صفحة واحدة، ونتيجةً لذلك، لا تتطلّب معظم عمليات النقل، مثل الانتقال إلى صفحة جديدة، إعادة تحميل الصفحة. حتى وقت قريب، كان هذا يعني أنّ لكل صفحة عنوان صفحة متطابق، ولم يقدّم أي قيمة لفهم محتوى الصفحة أو الغرض منها.

في الإصدار 14 من Angular، أضاف "الموجّه" طريقة مضمّنة لتحديد عناوين صفحات فريدة تلقائيًا. ويوفّر ذلك نهجًا سلسًا لضمان اتّباع المطوّرين لأفضل الممارسات المتعلّقة بعناوين الصفحات.

بنهاية هذا القسم، سيجتاز تطبيقك عملية التدقيق التالية:

• 🛑 تتضمّن جميع الصفحات عنوان الصفحة نفسه

يمكنك العثور على كل خطوة من هذه الخطوات ضمن التعليق: TODO: #4. Define unique page titles.

تحديد المشكلة

لتحديد هذه المشكلة، فعِّل قارئ الشاشة وانتقِل بين علامات التبويب متجرنا وقصتنا وكيفية العثور علينا للاطّلاع على عناوين الصفحات:

1. فعِّل VoiceOver.
2. استخدِم شريط التنقّل في علامات التبويب للتنقّل بين الصفحات.
3. تأكَّد من أنّ عنوان الصفحة متوافق دائمًا مع معايير A11y في Angular.

هذه مشكلة لأنّ عنوان الصفحة يجب أن يكون فريدًا حتى يتمكّن المستخدم من فهم محتوى الصفحة بسرعة بدون الحاجة إلى التنقّل فيها.

إضافة عناوين صفحات مفيدة

إذا تغيّرت صفحة أو طريقة عرض، عليك إدارة عنوان الصفحة بشكلٍ صحيح. لحلّ هذه المشكلة، يمكنك استخدام سمة Router.title المدمجة في Angular لتحديد عناوين فريدة لكل صفحة من صفحاتك.

1. أضِف عنوانًا فريدًا لكل مسار من المسارات الثلاثة المحدّدة:

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 ترتيب ومَعلمة اسم ودور منطقي
• 🛑 لا يمكن لقارئات الشاشة اختيار مربّعات الاختيار المُدمجة.
• 🛑 لا يقرأ قارئ الشاشة قيم شريط التمرير
• 🛑 عند تركيز قارئ الشاشة على أداة اختيار الألوان، يتم الخروج من مربّع الحوار
• 🛑 لا يتم الإعلان عن التغييرات والأخطاء والإشعارات
• 🛑 وضع HighContrast غير مفعَّل

5- ضمان تباين ألوان كافٍ

قد يبدو تصميمك رائعًا، ولكنّه لن يكون كذلك إذا لم يتمكّن الأشخاص الذين يعانون من عجز بصري، مثل عمى الألوان، من قراءة المحتوى الخاص بك. تحدِّد إرشادات إتاحة محتوى الويب (WCAG 2.0) سلسلة من نسب تباين الألوان التي تضمن إمكانية الوصول إلى المحتوى. في Angular وعلى الويب، يمكنك تحديد لوحات الألوان التي تضمن أن مكوناتك تفي بهذه المعايير ومرئية للمستخدمين الذين يعانون من ضعف في النظر وعمى الألوان.

بنهاية هذا القسم، سيجتاز تطبيقك عملية التدقيق التالية:

• 🛑 يجب أن تكون العناصر ذات ألوان متباينة بشكل كافٍ

يمكنك العثور على كلّ خطوة من هذه الخطوات ضمن التعليقات: TODO: #5. Ensure adequate color contrast..

استخدام أدوات مطوّري برامج Chrome لتحديد المشاكل المنخفضة التباين

لتحديد هذه المشكلة، استخدِم "أدوات مطوّري برامج Chrome" لفحص العناصر في تطبيقك.

1. استخدِم أداة الفحص لعرض أزرار رمز القائمة. يمكنك ملاحظة أنّ نسبة التباين هي 1.85، أي أقل بكثير من متطلبات WCAG.

2. يمكنك إجراء تدقيق في تسهيل الاستخدام في Lighthouse أو فحص axe للاطّلاع على مشاكل نسبة التباين هذه.

تغيير لون نسق المواد

يتم تحديد مخطط ألوان المكوّنات في تصميم Material المخصّص. عدِّل قيمة المظهر لاستيفاء إرشادات نسبة تباين الألوان.

عدِّل مظهر Material ليكون لون النص فيه أغمق، ما يزيد من نسبة التباين في الرموز:

src/styles.scss

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

يمكنك أيضًا استخدام أدوات تسهيل الاستخدام المضمَّنة في أدوات مطوّري برامج Chrome للعثور على لون يستوفي المعايير، أو تعديل قيم ألوان فردية في Sass.

التحقّق من التغييرات

تحقّق من العناصر مرة أخرى وتأكّد من التغييرات التي أجريتها. من المفترض أن يكون المظهر الآن يتضمّن نسب تباين ألوان كافية.

تدقيق تسهيل الاستخدام

• ✅ تتضمّن كل الصفحات عناوين فريدة
• ✅ نسبة تباين كافية للألوان
• 🛑 يجب أن يكون لعلامات HTML ترتيب ومَعلمة اسم ودور منطقي
• 🛑 لا يمكن لقارئات الشاشة اختيار مربّعات الاختيار المُدمجة.
• 🛑 لا يقرأ قارئ الشاشة قيم شريط التمرير
• 🛑 عند تركيز قارئ الشاشة على أداة اختيار الألوان، يتم الخروج من مربّع الحوار
• 🛑 لا يتم الإعلان عن التغييرات والأخطاء والإشعارات
• 🛑 وضع HighContrast غير مفعَّل

6- استخدام تنسيق HTML الدلالي

تلتقط عناصر HTML الأصلية عددًا من أنماط التفاعل العادية المهمة لسهولة الاستخدام. على الرغم من أنّه يمكن تنسيق الفقرة على أنّها عنصر span ويمكن تنسيق div على أنّه زر، يضمن عنصر HTML الدلالي أن يفهم تطبيقات قراءة الشاشة وعناصر التنقّل باستخدام لوحة المفاتيح التفاعلات وعناصر التحكّم في رمز HTML.

عند إنشاء مكونات Angular، يجب إعادة استخدام هذه العناصر الأصلية مباشرةً إن أمكن، بدلاً من استخدام السلوكيات المتوافقة بشكل جيد. يضمن هذا أن الصفحة بها بنية محتوى جيدة وتدفق محتوى طبيعي، وأن علامة التبويب مرتبة بترتيب منطقي لمساعدة المستخدمين في التنقل في موقع الويب بالاستخدام الفعال للوحة المفاتيح.

بنهاية هذا القسم، سيجتاز تطبيقك عملية التدقيق التالية:

• 🛑 يجب أن يكون لعلامات HTML ترتيب ومَعلمة اسم ودور منطقي

يمكنك العثور على كلّ خطوة من هذه الخطوات ضمن التعليقات: TODO: #6. Use Semantic HTML..

تحديد المشكلة

1. فعِّل ميزة VoiceOver.
2. استخدِم التنقّل بين علامات التبويب للوصول إلى علامة التبويب قصتنا.
3. لاحظ أن ترتيب التنقل بـ Tab ليس متسلسلاً.
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 الدلالية التفاعل المنطقي
• 🛑 مربّعات الاختيار المتداخلة غير قابلة للاختيار لبرامج قراءة الشاشة
• 🛑 لا يقرأ قارئ الشاشة قيم شريط التمرير
• 🛑 عند تركيز قارئ الشاشة على أداة اختيار الألوان، يتم الخروج من مربّع الحوار
• 🛑 لا يتم الإعلان عن التغييرات والأخطاء والإشعارات
• 🛑 وضع HighContrast غير مفعَّل

7- إنشاء عناصر تحكّم قابلة للاختيار باستخدام Angular Material

إنّ عناصر التحكّم المُدمجة هي أحد أنماط التفاعل المعقّدة لخدمات تسهيل الاستخدام. فكر في العناصر الفرعية في القائمة أو مربّعات الاختيار المتداخلة. كيف توضح للمستخدم أنه يمكنك تحديد مجموعة فرعية من الخيارات أو الانتقال إلى عنصر قائمة رئيسي؟

في Angular، يمكنك تبسيط القوائم وعناصر التحكّم لإنشاء مكونات قابلة للتنقّل من خلال تبسيط عناصر التحكّم قدر الإمكان. في هذا المثال، يمكنك استخدام مربع القائمة الخاص بـ Angular Material لإنشاء مثال واحد لنمط التفاعل هذا.

بنهاية هذا القسم، سيجتاز تطبيقك عملية التدقيق التالية:

• 🛑 مربّعات الاختيار المتداخلة غير قابلة للاختيار لبرامج قراءة الشاشة

يمكنك العثور على كلّ خطوة من هذه الخطوات ضمن التعليقات: TODO: #7. Create selectable controls with Angular Material.

تحديد المشكلة

لتحديد هذه المشكلة، سنفعّل قارئ الشاشة ونحاول اختيار مربّع اختيار متداخل.

1. فعِّل ميزة VoiceOver.
2. يُرجى اختيار نكهات حشو مختلفة.
3. يُرجى العلم أنّ مربّعات الاختيار الخاصة بالوالدَين لا تحدّد الأطفال عند قراءتها من خلال ميزة VoiceOver. كيف تعرف أنّ مربّع الاختيار أطعمة خالية من المشتقات الحيوانية قد تم إلغاء تحديده بعد إلغاء وضع علامة في مربّع الاختيار بوك تشوي؟

A11y في تصميم Angular

يمكنك استبدال مربّع الاختيار الدلالي بمربّع الاختيار Angular Material الذي يحتوي على معلومات مدمجة عن نمط التفاعل هذا. يُرجى العلم أنّ استبدال المكوّنات بعناصر Material Design لا يضمن تسهيل الاستخدام. وكما هو الحال مع أي مكوّن آخر، عليك إجراء الاختبار يدويًا لأنّ هناك العديد من الطرق لتنفيذ Material بشكل غير قابل للوصول إليه.

استبدال مربّعات الاختيار بمربّعات اختيار Material Design

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 الدلالية التفاعل المنطقي
• ✅ يمكن لتطبيقات قراءة الشاشة الوصول إلى جميع عناصر التحكّم
• 🛑 لا يقرأ قارئ الشاشة قيم شريط التمرير
• 🛑 عند تركيز قارئ الشاشة على أداة اختيار الألوان، يتم الخروج من مربّع الحوار
• 🛑 لا يتم الإعلان عن التغييرات والأخطاء والإشعارات
• 🛑 وضع HighContrast غير مفعَّل

8. توفير تصنيفات التحكّم باستخدام ARIA

عدّلت مكونات HTML الدلالية وMaterial في تطبيق Angular، ولكن تتطلّب بعض المكونات سمات محدّدة ليتمكّن تطبيقات قراءة الشاشة من التنقّل فيها بالكامل.

تساعد مواصفات تطبيقات الويب التفاعلية (ARIA) التي تقدّمها مبادرة إتاحة الويب (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 لتوفير تصنيف
• 🛑 تركيز قارئ الشاشة في أداة اختيار الألوان يخرج من مربع الحوار
• 🛑 لا يتم الإعلان عن التغييرات والأخطاء والإشعارات
• 🛑 وضع HighContrast غير مفعَّل

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 عددًا من الأدوات لتحسين إمكانية الاستخدام، وهي مفيدة بشكل خاص لمؤلفي المكوّنات.

في الأقسام التالية، ستضيف ثلاث خدمات شائعة: 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 لتقديم تصنيف
• ✅ تم ضبط علبة الألوان بشكل صحيح لتركيز العناصر على المحتوى
• 🛑 لا يتم الإعلان عن التغييرات والأخطاء والإشعارات.
• 🛑 وضع HighContrast غير مفعَّل

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 لتقديم تصنيف
• ✅ تم ضبط علبة الألوان بشكل صحيح على التركيز على العنصر المطلوب
• ✅ يتم الإعلان عن التغييرات والأخطاء والإشعارات.
• 🛑 وضع HighContrast غير مفعَّل

12. تفعيل وضع HighContrast

يدعم Microsoft Windows ميزة إمكانية الوصول تسمى وضع التباين العالي. يغيّر هذا الوضع مظهر جميع التطبيقات، بما في ذلك تطبيقات الويب، لزيادة التباين بشكل كبير. في Angular، عليك احترام الخيارات المفضّلة للمستخدم في تطبيقك.

يتيح لك الخيار HighContrastModeDetector تحديد ما إذا كان المتصفّح حاليًا في بيئة وضع التباين العالي.

يتيح Internet Explorer وMicrosoft Edge وFirefox هذا الوضع. لا يتيح متصفّح Google Chrome استخدام "وضع التباين العالي" في نظام التشغيل Windows. لم تكتشف هذه الخدمة وضع التباين العالي كما تمت إضافته من خلال إضافة متصفح Chrome High التباين.

بنهاية هذا القسم، سيجتاز تطبيقك عملية التدقيق التالية:

• 🛑 وضع HighContrast غير مفعَّل

يمكنك العثور على هذه الخطوات ضمن التعليقات: TODO: #12. Enable HighContrast mode.

تحديد المشكلة

لتحديد هذه المشكلة، افتح التطبيق في Internet Explorer أو Microsoft Edge أو Firefox، وفعِّل وضع التباين العالي، ولاحظ عدم حدوث أي تغيير:

1. افتح تطبيقك في Internet Explorer أو Microsoft Edge أو Firefox.
2. فعِّل وضع "التباين العالي".
3. يُرجى ملاحظة أنّ التطبيق لم يتغيّر.

إتاحة وضع التباين العالي

في styles.scss، استخدِم عنصر cdk-high-contrast mixin المقدَّم في @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.

أنت الآن تعرف الخطوات الرئيسية المطلوبة لحلّ ثمانية مشاكل شائعة في سهولة الاستخدام في تطبيق Angular.

مزيد من المعلومات

اطّلِع على الدروس التطبيقية التالية حول الترميز:

• إنشاء تطبيق ويب باستخدام Angular وFirebase
• اكتشاف النصوص ذات التباين المنخفض وحلّ المشاكل المتعلّقة بها باستخدام "أدوات مطوّري البرامج في Chrome"

اطّلِع على هذه المواد:

• Angular.io
• Angular Material a11y
• أساسيات تسهيل الاستخدام
• https://web.dev/accessible/