توافر واجهة الاختبار

1) لماذا وماذا نعتقد أنه «جاهز»

• تم استيفاء معايير WCAG 2. 1/2. 2 مستويات AA للمنصات المستهدفة ؛
• تمرير الواجهة بالكامل من لوحة المفاتيح ؛
• والعمل الصحيح مع قارئات الشاشة ؛
• ويتناقض مع المعايير ؛
• وجميع الحالات/الأخطاء/الحالات متاحة بعيدا عن الأنظار وبدون فأر ؛
• التوطين، RTL، الحد من الحركة والميزات المحمولة تؤخذ في الاعتبار.

2) استراتيجية الاختبار (A11y الهرم)

1. الاختبارات الذاتية/البطانات (تغطية سريعة تصل إلى 40-60٪ من فئات المشاكل).
2. فحص النمط اليدوي (لوحة المفاتيح، التركيز، المحتوى، المنطق).
3. جلسات Assistive Tech (AT): أجهزة قراءة الشاشة، والقياس، ومرشحات الألوان.
4. الاختبارات الميدانية مع المستخدمين (إن أمكن).

الهدف: اكتشاف العيوب النظامية على مستوى المكون/النمط بحيث لا تتكاثر في السمات.

3) قائمة مرجعية بالفحوصات الأساسية (تشغيل سريع)

• لوحة المفاتيح: يمكن الوصول إلى كل شيء عن طريق علامة تبويب/سهام ؛ وترتيب التركيز منطقي ؛ وهناك فخ خدعة في الوسائط ؛ ESC/Enter/Space تعمل.
• مؤشر التركيز واضح في أي موضوع/خلفية.
• التباين: نص ≥ 4. 5:1 (عادي)، ≥ 3:1 (كبير)، الرموز/الضوابط قابلة للقراءة.
• الدلالات: العلامات الصحيحة ("الزر"، "أ"، "التسمية"، "ul/li"، "th/td')، الأدوار و" aria "فقط إذا لزم الأمر.
• قارئ الشاشة: عناوين حسب التسلسل الهرمي، أسماء ذات مغزى للأزرار/الروابط، بدائل للأيقونات/الصور.
• النماذج: «التسمية» الصريحة، التلميحات/الأخطاء مترابطة («aria-despacby»)، نصوص الخطأ محددة.
• الديناميكيات: يتم الإعلان عن الخبز المحمص/اللافتات/الأخطاء عبر «aria-live» («مهذب »/« حازم»).
• تحترم الرسوم المتحركة «تفضل الحركة المخفضة» ؛ دون «هز» الواجهة.
• التوطين/RTL: يتم مواءمة الشاشات الرئيسية، ويتم تنسيق الأرقام/التواريخ/العملات بواسطة المرافق.
• التنقل: أهداف اللمس ≥ 44 × 44 بكسل، التكبير غير محظور، دوران الشاشة لا يكسر المحتوى.

4) الأدوار والمسؤوليات والتحف

نظام التصميم: A11y الاحتياجات في وصف كل عنصر.
المطورون: الفحص التلقائي، اختبارات الوحدة/التفاعل مع A11y-asserts.
QA: النصوص اليدوية + جلسات AT ؛ التقرير بشدة/تردد.
UX/المحتوى: تنظير مصغر للأخطاء/الحالات، سهولة القراءة بصوت عالٍ.
القطع الأثرية: قوائم مرجعية، نصوص، شاشات AT، قائمة العيوب مع مراجع WCAG، توصيات.

5) الشيكات الآلية

البطانات/المحللات: الفأس، eslint-plugin-jsx-a11y، p11y، المنارة.
في طور الإعداد: نمنع العلاقات العامة عن الانتهاكات الخطيرة (فخاخ الدور/التسمية/التباين/علامة التبويب).
لقطات التباين: الاختبارات المرئية للموضوعات/الحالات.

6) الاختبار اليدوي: السيناريوهات

6. 1 لوحة مفاتيح

مر عبر الصفحة فقط باستخدام لوحة المفاتيح (Tab/Shift + Tab/Enter/Space/Arrows).
تحقق: التركيز على الرؤية والأولوية وتوافر جميع الإجراءات وغياب «الفخاخ» والعناصر «الميتة».
في طريقة: التركيز في الداخل، عند الإغلاق، يعود إلى البادئ.

6. 2 قارئ الشاشة (المجموعة الدنيا)

سطح المكتب: NVDA/JAWS (Windows)، VoiceOver (macOS).
الهاتف المحمول: VoiceOver (iOS) و TalkBack (Android).
نتحقق من: العناوين الصحيحة (التسلسل الهرمي H)، أسماء الأزرار/الروابط، جداول القراءة ('ث '/' نطاق')، إعلان الحالات، أخطاء الشكل المفهومة.

6. 3 المحتوى والمنظار الدقيق

نقرأ النصوص النقدية بصوت عالٍ - دون غموض، بدون «خطأ 400».
خطأ = «ما الخطأ + كيفية إصلاح + قيد/تنسيق».

6. الديناميات 4 والمناطق الحية

نخب النجاح هو "aria-live =" مهذب "، الخطأ" حازم ".
شرح التقدم/التنزيل بالنص ؛ يفضل الهيكل العظمي على الدوار.

7) الأشكال والأخطاء (في العمق)

يحتوي كل مجال على ملصق مرتبط (وليس عنصرًا نائبًا).
ترتبط الأخطاء بالحقل: «aria-invalid =» true «،» aria-despacby = «[خطأ معرف]».
صيغ الشكل (التاريخ، رقم الهاتف) محددة مسبقا ؛ الأقنعة لا تكسر المدخلات/الإدراج.
ملخص لافتة الأخطاء عند تقديم + التمرير التلقائي والتركيز على الخطأ الأول.
نصوص الخطأ: محددة، بدون مصطلحات تقنية.

8) الجداول والقوائم والرسوم البيانية

الجداول: العناوين 'ث' مع 'نطاق =' col/row ''، التوقيعات، استئناف.
القوائم حقيقية «ul/ol/li» وليست مغنيات.
الرسوم البيانية - الجداول/الأوصاف البديلة ؛ والأساطير متاحة ؛ الألوان ≠ إشارة واحدة.

9) الوسائط المتعددة والرسوم المتحركة

فيديو: ترجمة/نص ؛ والتحكم في لوحة المفاتيح ؛ بدون تشغيل تلقائي (أو بهدوء).
صورة GIF/microanimations: إيقاف التشغيل عندما «تفضل الحركة المخفضة» ؛ تجنب تفشي المرض.
الاهتزازات/الأصوات - اختيارية ومكررة بصريًا/نصًا.

10) إمكانية الوصول عبر الهاتف المحمول

≥ تفاعلية 44 × 44 بكسل، فترات كافية.
لا تحظر التحجيم (meta viewport بدون «المستخدم القابل للتطوير = لا»).
النموذج/لوحة المفاتيح: الأنواع الصحيحة («هاتف»، «بريد إلكتروني»، «رقم»)، لا تخفي قدرات النظام.
تحقق من الموضوع المظلم وخطوط النظام «أكثر».

11) التوطين والأرقام و RTL

سلاسل من خلال مفاتيح i18n مع السياق ؛ اللغات الطويلة (DE/TR) لا تكسر التصميم.
أشكال التاريخ/العملة - المرافق وليس الأوتار.
وضع RTL: عكس أيقونات الملاحة، تحقق من ترتيب التركيز والعربة، الإدخال ثنائي الاتجاه.

12) خصوصية التدفق الحرج (iGaming)

المدفوعات/الاستنتاجات

تعليمات واضحة، حدود/مواعيد نهائية/لجان - في النص.
وتعلن أخطاء مقدمي الخدمات صراحة، دون رموز ؛ هناك بديل للعمل.
تأكيد العملية: التركيز على CTA المنطقي، إمكانية الإلغاء.

CCM/التحقق

نصائح خطوة بخطوة للصور/الوثائق ؛ والتقدم المحرز واتفاق إيتا.
أخطاء غير واضحة/وهجية/مقطوعة - مع أمثلة على التصحيح.
نغمة محايدة، لا روح الدعابة.

13) تقييم شدة العيوب

Blocker: لا يمكن إكمال المهمة الرئيسية (لوحة المفاتيح/قارئ الشاشة).
حاسمة: تعمل الوظائف الحاسمة، ولكن مع حواجز خطيرة.
الرائد: يعترض الطريق، هناك حل بديل.
مستحضرات التجميل/عدم الامتثال للأدلة دون التأثير على المهمة.

كل عيب هو إشارة إلى معيار WCAG والنص الذي يتم استنساخه.

14) تعريف المنجز (A11y)

تمرير نص لوحة المفاتيح بدون فأر 100٪.
الفأس/المنارة: لا توجد انتهاكات خطيرة/عالية.
AA يتناقض عبر جميع الموضوعات/الولايات.
تشغيل قارئ الشاشة للمسارات الرئيسية (navbar، molds، modals، toast).
وثائق A11y للمكونات/السمات الجديدة (نموذج يحتذى به، الأريا، التركيز، الأمثلة).
تراجع الاختبارات A11y باللون الأخضر في CI.

15) العمليات والتشغيل الآلي

قبل التطوير: A11y-criteria في المهام، التخطيطات مع التركيز/الخطأ.
في التنمية: بطانات/أهي أثناء التجمع المحلي ؛ لقطات بصرية من التباين/التركيز.
In CI: pa11y/axe-scan by critical pages; قطرة البناء تحت Blocker/Critical.
بعد الإصدار: عمليات تدقيق ربع سنوية، ورصد شكاوى المستخدمين من قبل A11y-tag.

16) الأنماط المضادة

العنصر المساعد بدلاً من التسمية.
"div 'inter of' button '/' a '.
حلقات التركيز المعوقة «من أجل الجمال».
اللون كحامل الحالة الوحيد.
الوسائط بدون فخ التركيز/ESC.
لا يوجد مقياس على الهاتف المحمول.
«خطأ 400/500» بدون تفسير بشري.

17) اختبار النماذج النصية

السيناريو 1 - تنقل لوحة المفاتيح (صفحة النموذج)

1. علامة تبويب للحقل الأول، أدخل البيانات.
2. Shift + Tab back - تحقق من الترتيب الصحيح.
3. التحقق من صحة المكالمة (إرسال) - ينتقل التركيز إلى الخطأ الأول.
4. أغلق المعدل بمفتاح ESC، وعاد التركيز إلى البادئ.

السيناريو 2 - قارئ الشاشة (صفحة الدفع)

1. اذهب إلى رأس الصفحة (h1)، واستمع إلى الأقسام.
2. فتح اختيار الطريقة - يتم الاستماع إلى إعلان الأدوار/الدول.
3. تعمد ارتكاب خطأ في المبلغ - تقرأ الرسالة وترتبط بالحقل.
4. أعلن نخب الدفع الناجح «مهذبًا».

السيناريو 3 - الديناميكيات

1. ابدأ العملية بانتظار> 3 ثوانٍ - هناك نص حول العملية/إيتا.
2. في حالة خطأ الشبكة - اللافتة «الحازمة»، التي يمكن الوصول إليها من لوحة المفاتيح، هناك مسار «تكرار/مساعدة».

18) قوالب دقيقة مفيدة

أدوار/أغنية للنخب

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

ربط الخطأ بالمجال

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

مودالكا (سمات دلالية)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) خطة التنفيذ السريع للممارسات A11y

1. مراجعة المكونات/الأنماط الحالية (دلالات التباين/التركيز/الدور).
2. تعديلات نظام التصميم: أضف قسمًا A11y إلى كل مكون.
3. الأدوات: ضبط بطانات up/axe/pa11y/Lighthouse محليًا وفي CI.
4. التدريب: أدلة قصيرة للمصممين/المطورين/مؤلفي الإعلانات.
5. طيار: إصلاح 3-5 من العيوب الأكثر شيوعًا (الوسائط والأشكال والخبز المحمص).
6. اللائحة: وزارة الدفاع بمعايير A11y ؛ المراجعة الفصلية للحسابات.

ورقة الغش النهائية

تحقق من لوحة المفاتيح والتركيز والتناقضات وقارئ الشاشة والديناميكيات.
الإعلان عن الأوضاع عبر aria-live ؛ الأخطاء المتعلقة بالميادين.
احترام تقليل الحركة، لا تحظر التحجيم.
فكر في الدلالات (العلامات/الأدوار)، وليس «كيف تبدو».
أتمتة الشيكات، ولكن تكمل دائمًا الشيكات اليدوية.
إصلاح العيوب بالإشارة إلى WCAG والشدة ونص التشغيل.