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

1. قبل البدء

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

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

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

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

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

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

المعلومات التي ستطّلع عليها

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

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

المتطلبات

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

2. الإعداد

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

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

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

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

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

3- وضع خط أساس

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

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

استكشاف العرض التوضيحي

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

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

استخدام Angular لمعالجة المشاكل الشائعة في إمكانية الوصول إلى الويب

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

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

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

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

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

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

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

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

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

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

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

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

أداة Lighthouse وأدوات مطوّري برامج Chrome

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

فأس

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

باستخدام أداة Lint

يمكنك استخدام قواعد 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. تحديد عناوين الصفحات الفريدة

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

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

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

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

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

• 🛑 يجب أن تحتوي العناصر على تباين ألوان كافٍ

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

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

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

1. استخدِم أداة الفحص لعرض أزرار رموز القائمة. يتضح لك أنّ التباين 1.85، أي أقلّ بكثير من متطلبات إرشادات إتاحة محتوى الويب (WCAG).

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

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

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

7. أنشِئ عناصر تحكُّم يمكن اختيارها باستخدام Angular Material.

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

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

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

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

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

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

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

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

A11y في تصميم Angular

تقوم باستبدال مربع الاختيار الدلالي بمربع الاختيار "Angular 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 أيضًا المكان الذي يمكن فيه إزالة بعض الأخطاء غير المستخدَمة في src/app/shop/shop.component.scss لتحسين التصميم.

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

فعِّل قارئ الشاشة مرة أخرى وتحقَّق من التغييرات التي أجريتها. أصبحت مربعات الاختيار الآن قابلة للتحديد والتنقل بسلاسة أكبر باستخدام قارئ الشاشة!

تدقيق إمكانية الوصول:

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

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

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

تساعد مواصفات تطبيقات الإنترنت الغنية بصريًا الخاصة بـ "مبادرة إمكانية الوصول على الويب" (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.

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

11. الإعلان عن التغييرات باستخدام LiveAnnouncer

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

يتم استخدام LiveAnnouncer للإعلان عن الرسائل لمستخدمي برامج قراءة الشاشة الذين يستخدمون منطقة aria-live لضمان تلقي برامج قراءة الشاشة للإشعارات والتغييرات التي يتم إجراؤها على الصفحة المباشرة. لمزيد من المعلومات حول المناطق النشطة في aria، يُرجى الاطّلاع على رابط W3C's WAI-ARIA. في 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 High التباين.

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

• 🛑 وضع التباين العالي غير مفعّل

يمكنك العثور على الخطوات التالية ضمن التعليقات: 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".

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

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

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

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

اقرأ هذه المواد:

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