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

1. قبل البدء

شعار Angular باللون الأسود

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

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

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

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

ما ستنشئه

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

موقع إلكتروني لمتجر Dumpling Time بمظهر زهري وأحمر

ما ستتعلمه

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

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

المتطلبات

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

2. طريقة الإعداد

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

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

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

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

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

3- تحديد مقياس أساسي

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

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

موقع إلكتروني لمتجر Dumpling Time بمظهر باللونين الأرجواني والأخضر

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

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

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

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

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

كيف تعرف المشاكل التي يجب حلّها؟

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

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

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

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

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

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

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

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

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

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

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

افتح "أدوات مطوّري برامج Chrome".
انقر على علامة التبويب Lighthouse وضَع علامة في مربّع الاختيار إمكانية الوصول.
انقر على إنشاء تقرير لتشغيل عملية تدقيق Lighthouse بشأن إمكانية الوصول.

مثال على علامة تبويب Lighthouse تتضمّن زرًا لإنشاء تقرير في علامة تبويب "أدوات مطوّري البرامج في Chrome"

فأس

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

Linting

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

في 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 اليدوية:

تدقيق Lighthouse في "أدوات مطوّري البرامج في Chrome" مع تسجيل 82 نقطة

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

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

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

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

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

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

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

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

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

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

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

فعِّل VoiceOver.
استخدِم التنقّل بعلامات التبويب للتنقّل بين الصفحات.
تأكَّد من أنّ عنوان الصفحة متوافق دائمًا مع تسهيل الاستخدام في Angular.

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

متصفّح Chrome مع فتح ثلاث علامات تبويب تحمل عنوان الصفحة نفسه: "إمكانية الوصول في Angular"

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

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

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

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 مخصّص.

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

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

متصفّح Chrome مع فتح ثلاث علامات تبويب تحمل عناوين صفحات فريدة: "متجرنا - تسهيل الاستخدام في Angular" و"قصتنا - تسهيل الاستخدام في Angular" و"العثور علينا - تسهيل الاستخدام في Angular"

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

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

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

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

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

🛑 يجب أن تتوفّر في العناصر درجة تباين كافية في الألوان

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

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

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

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

"أدوات مطوّري البرامج في Chrome" تفحص عنصر زرّ "الشاشة الرئيسية" الذي يتضمّن تباينًا منخفضًا

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

نتائج تدقيق Lighthouse في "أدوات مطوّري البرامج في Chrome" مع ظهور الخطأ: "عدم احتواء الخلفية وألوان المقدّمة على نسبة تباين كافية"

تغيير لون مظهر Material

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

عدِّل نسق Material لاستخدام لون نص أغمق، ما يؤدي إلى زيادة نسبة التباين في الرموز:

src/styles.scss

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

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

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

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

"أدوات مطوّري البرامج في Chrome" تفحص عنصر زرّ "الشاشة الرئيسية" الذي يتضمّن تباينًا كافيًا

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

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

6. استخدام ترميز HTML الدلالي

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

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

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

🛑 يجب أن يكون HTML منظَّمًا بشكل منطقي وأن يتضمّن اسمًا ودورًا

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

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

فعِّل VoiceOver.
استخدِم التنقّل باستخدام مفتاح التبويب (Tab) للانتقال إلى علامة التبويب قصتنا.
لاحظ أنّ ترتيب علامات التبويب ليس تسلسليًا.
انقر على Purchas.
لاحظ أنّ الزر لا يتم التعرّف عليه كزر.

نتائج تدقيق Lighthouse في "أدوات مطوّري البرامج في Chrome" مع ظهور الخطأ: العناصر المُعنوَنة غير مرتبة بشكل تنازلي متسلسل إنّ العناوين المرتّبة بطريقة مناسبة ولا تتخطّى المستويات تنقل البنية الدلالية للصفحة، ما يسهِّل تصفُّحها والتعرّف عليها عند استخدام التكنولوجيا المساعِدة. مزيد من المعلومات

تغيير <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.

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

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

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

قائمة مربعات الاختيار الخاصة بالحشوات مع الخيارات التالية: حشوات نباتية، توفو وبوك تشوي وشيتاكي، لحم، دجاج، لحم نباتي

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

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

أولاً، أضِف قائمة الحشوات الجديدة ومتغيرًا لتخزين نكهات الحشوات المحدّدة:

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
    })
  }
}

أضِف <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، ولكن تتطلّب بعض المكوّنات سمات معيّنة لتتمكّن برامج قراءة الشاشة من التنقّل فيها بالكامل.

تساعد مواصفات تطبيقات الإنترنت الغنية التي يمكن الوصول إليها من مبادرة إمكانية الوصول إلى الويب (WAI-ARIA أو ARIA) في حل المشاكل التي لا يمكن إدارتها باستخدام HTML الأصلي. تتيح لك تحديد السمات التي تعدّل طريقة ترجمة عنصر إلى شجرة تسهيل الاستخدام.

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

🛑 قارئ الشاشة لا يقرأ قيم شريط التمرير

يمكنك العثور على كل خطوة من هذه الخطوات ضمن التعليقات: TODO: #8. Provide control labels with ARIA.

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

لتحديد هذه المشكلة، شغِّل قارئ الشاشة وحرِّك شريط التمرير:

فعِّل VoiceOver.
انتقِل إلى شريط تمرير الكمية وغيِّر القيمة.
لاحظ أنّ تصنيف القيمة مفقود.

نتائج تدقيق Lighthouse في أدوات مطوري البرامج في Chrome التي تتضمّن الخطأ: لا تحتوي حقول إدخال ARIA على أسماء يمكن الوصول إليها عند عدم ظهور اسم العنصر الظاهر على واجهة المستخدم لأحد حقول الإدخال، تشير قارئات الشاشة إلى هذا العنصر باستخدام اسم عام، ما يجعله غير قابل للاستخدام بالنسبة إلى المستخدمين الذين يعتمدون على قارئات الشاشة. مزيد من المعلومات

استخدام سمات 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>

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

فعِّل قارئ الشاشة مرة أخرى وتأكَّد من التغييرات. يمكنك الآن تحريك شريط التمرير.

تدقيق Lighthouse في "أدوات مطوّري البرامج في Chrome" مع اجتياز التدقيق لعناصر تحكّم ARIA في قارئ الشاشة

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

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

9- إضافة ميزة @angular/cdk/a11y

حتى الآن، كنت تعتمد على أدوات Angular المضمّنة لحلّ مشاكل تسهيل الاستخدام الشائعة. لنلقِ نظرة الآن على وحدة تسهيل الاستخدام في 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 عددًا من الأدوات لتحسين إمكانية الوصول، وهي مفيدة بشكل خاص لمؤلفي المكوّنات.

في الأقسام التالية، ستضيف ثلاث خدمات شائعة: FocusTrap وLiveAnnouncer وHighContrast.

لمزيد من المعلومات حول جميع الخدمات الأخرى التي يوفّرها @angular/cdk/a11y، يُرجى الاطّلاع على تسهيل الاستخدام.

10. التحكّم في التركيز باستخدام FocusTrap

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

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

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

🛑 يؤدي تركيز قارئ الشاشة في أداة اختيار الألوان إلى الخروج من مربّع الحوار

يمكنك العثور على هذه الخطوات ضمن التعليقات: TODO: #10. Control focus with FocusTrap.

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

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

فعِّل VoiceOver.
استخدِم التنقّل بعلامات التبويب لتغيير اللون.
تحقَّق من ترتيب التركيز البديهي وحصر التركيز في أداة اختيار الألوان.

موقع إلكتروني لمتجر Dumpling Time بتصميم باللونين الأرجواني والأخضر مع فتح مربّع حوار لاختيار لون غلاف الزلابية

Add FocusTrap

يمكن استخدام cdkFocusTrap لحصر ترتيب التركيز والتحكّم فيه في المكوّنات المخصّصة. استخدام mat-dialog-content يكفي لحلّ معظم المشاكل من خلال حصر التركيز في مربّع حوار. أضِف السمة cdkFocusInitial لتحديد منطقة التركيز الأولية على لون غلاف الزلابية <mat-selection-list> ضمن مربّع حوار "أداة اختيار الألوان".

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

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

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

فعِّل قارئ الشاشة مرة أخرى وتأكَّد من التغييرات. تم الآن ضبط التركيز في البداية على تغيير اللون في مربّع الحوار.

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

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

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

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

يتم استخدام LiveAnnouncer للإعلان عن الرسائل لمستخدمي برامج قراءة الشاشة باستخدام منطقة aria-live لضمان إعلام برامج قراءة الشاشة بالإشعارات والتغييرات المباشرة في الصفحة. لمزيد من المعلومات حول مناطق aria-live، يُرجى الاطّلاع على WAI-ARIA من W3C. في Angular، يكون استدعاء LiveAnnouncer كخدمة حلاً أسهل للاختبار من سمات aria-live.

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

🛑 عدم الإعلان عن التغييرات والأخطاء والإشعارات

يمكنك العثور على هذه الخطوات ضمن التعليقات: TODO: #11. Announce changes with LiveAnnouncer.

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

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

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

موقع إلكتروني لمتجر Dumpling Time بتصميم باللونين الوردي والأحمر مع فتح مربّع حوار لاختيار لون غلاف الزلابية

إضافة LiveAnnouncer إلى الرمز

أضِف LiveAnnouncer، وأعلن عن اختيار اللون وعملية الشراء الوهمية كسلسلة. في عملية التنفيذ الفعلية، قد تتم قراءة هذا الرمز عند الانتقال إلى نظام دفع تابع لجهة خارجية أو عند حدوث أخطاء في النموذج.

إضافة إعلان عند اختيار لون:

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();
  }
}

أضِف إعلانًا عند إجراء عملية شراء وهمية:

src/app/shop/shop.component.ts

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

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

  constructor(private liveAnnouncer: LiveAnnouncer) { }

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

    this.liveAnnouncer.announce(fakePurchase);
  }
}

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

فعِّل قارئ الشاشة مرة أخرى وتأكَّد من التغييرات. سيتم الآن إشعارك بالأخطاء.

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

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

12. تفعيل وضع HighContrast

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

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

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

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

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

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

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

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

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

إضافة إمكانية استخدام وضع التباين العالي

في styles.scss، استخدِم mixin 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);
    }
  }
}

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

أعِد تحميل تطبيقك وتأكَّد من التغييرات التي أجريتها. لقد أضفتَ مخططًا تفصيليًا للزر في "وضع التباين العالي".

موقع إلكتروني لمتجر Dumpling Time يعرض مظهرًا باللونين الأحمر والوردي مع تفعيل "وضع التباين العالي"، ويتم الآن التركيز بشكل كبير على زر الشراء من خلال إطار أحمر سميك

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

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

13. تهانينا!

تهانينا، لقد عالجت المشاكل الشائعة المتعلّقة بتسهيل استخدام الويب في تطبيق Angular. 🎉

للاطّلاع على جميع الحلول، يمكنك الانتقال إلى الفرع main.

يعرض موقع متجر Dumpling Time الإلكتروني الذي يستخدم المظهر الأحمر والوردي جميع التغييرات التي تم إجراؤها في هذا الدرس التطبيقي حول الترميز تدقيق Lighthouse في "أدوات مطوّري البرامج في Chrome" مع تسجيل 100/100

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

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

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

اطّلِع على المواد التالية:

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

1. قبل البدء

ما ستنشئه

ما ستتعلمه

المتطلبات

2. طريقة الإعداد

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

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

3- تحديد مقياس أساسي

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

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

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

كيف تعرف المشاكل التي يجب حلّها؟

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

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

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

فأس

Linting

نقطة البداية

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

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

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

src/app/app-routing.module.ts

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

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

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

تغيير لون مظهر Material

src/styles.scss

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

6. استخدام ترميز HTML الدلالي

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

تغيير <div> إلى <button>

src/app/shop/shop.component.html

استخدام عناصر العناوين بالتسلسل

src/app/about/about.component.html

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

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

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

تسهيل الاستخدام في Angular Material

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

src/app/shop/shop.component.ts

src/app/shop/shop.component.html

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

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

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

استخدام سمات ARIA

src/app/shop/shop.component.html

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

9- إضافة ميزة @angular/cdk/a11y

استيراد الوحدة

src/app/app.module.ts

ما هي وظيفة '@angular/cdk/a11y' ؟

10. التحكّم في التركيز باستخدام FocusTrap

Add FocusTrap

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

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

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

إضافة LiveAnnouncer إلى الرمز

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

src/app/shop/shop.component.ts

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

12. تفعيل وضع HighContrast

إضافة إمكانية استخدام وضع التباين العالي

src/app/shop/shop.component.scss

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

13. تهانينا!

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

ما هي وظيفة `'@angular/cdk/a11y'` ؟