قائمة التحقق من إمكانية الوصول للمطورين

استنادًا إلى WCAG 2.2 AA، ومصممة لمراجعة متطلبات التطوير والتنفيذ.

متطلبات إمكانية الوصول العامة

يمكن تشغيل جميع الوظائف باستخدام لوحة المفاتيح فقط. ترتيب الانتقال بمفتاح Tab منطقي ومتوقع. مؤشر التركيز مرئي بوضوح على جميع العناصر التفاعلية. لا توجد مصائد للوحة المفاتيح. استخدم المعالم الدلالية الصحيحة مثل <header> و<nav> و<main> و<footer>، واستخدم ARIA عند الحاجة. تحتوي الصفحة على عنصر <title> ذي معنى، وتُحدد لغة المحتوى باستخدام الخاصية lang.

الروابط

نص الرابط وصفي وواضح، ولا يعتمد على عبارات عامة مثل «اضغط هنا». يمكن الوصول إلى الروابط وتشغيلها باستخدام لوحة المفاتيح وقارئات الشاشة. حالة التركيز على الروابط مرئية بوضوح.

الأزرار

للأزرار أسماء واضحة يمكن للتقنيات المساعدة التعرف عليها، من خلال النص المرئي أو تسمية برمجية مناسبة. تعمل الأزرار الأصلية باستخدام مفتاحي Enter وSpace وفق السلوك المتوقع. نمط التركيز مرئي بوضوح.

النماذج وحقول الإدخال

الحقول النصية

لكل حقل إدخال تسمية مرتبطة به برمجيًا.

أزرار الاختيار ومربعات الاختيار

تُجمع الخيارات المرتبطة باستخدام

و عند الحاجة.

القوائم المنسدلة

استخدم عنصر

معالجة الأخطاء

اربط رسائل الخطأ بالحقول ذات الصلة برمجيًا. رسائل الخطأ واضحة ومرئية وتشرح المشكلة وطريقة تصحيحها.

الصور والمحتوى غير النصي

للصور المعلوماتية نص بديل مناسب وذو معنى. تستخدم الصور الزخرفية قيمة alt="" فارغة. للصور والرسومات المعقدة وصف مختصر مناسب ووصف تفصيلي عند الحاجة.

الجداول

تستخدم الجداول لخلايا العناوين مع تحديد العلاقات المناسبة، مثل scope عند ملاءمته. بنية الجدول وترتيب قراءته منطقيان عند استخدام قارئات الشاشة.

القوائم

يمكن استخدام القوائم بالكامل باستخدام لوحة المفاتيح. تُحدد الصفحة الحالية برمجيًا باستخدام aria-current أو أسلوب مكافئ.

الأقسام القابلة للطي وعلامات التبويب

يمكن تشغيل الأقسام القابلة للطي بلوحة المفاتيح، وتدعم علامات التبويب نمط لوحة المفاتيح المناسب. تُحدَّث حالة التوسيع والطي برمجيًا، مثل استخدام aria-expanded عند الحاجة.

النوافذ الحوارية

يبقى التركيز داخل النافذة الحوارية أثناء فتحها عندما يكون ذلك هو السلوك المناسب. يمكن إغلاق النافذة الحوارية بمفتاح Escape عندما يكون ذلك مناسبًا. للنافذة الحوارية دور مناسب واسم واضح يمكن للتقنيات المساعدة التعرف عليه.

المحتوى الديناميكي وتطبيقات الصفحة الواحدة

تُعلن التحديثات الديناميكية المهمة للتقنيات المساعدة باستخدام مناطق الحالة أو ARIA live عند الحاجة. تُحدّث تغييرات العرض في تطبيقات الصفحة الواحدة عنصر <title> وتوفر إشعارًا مناسبًا لمستخدمي قارئات الشاشة. يُحدَّث سجل المتصفح بصورة صحيحة بعد التنقل الديناميكي، بحيث يعمل زر الرجوع كما هو متوقع.

العروض الدوارة والشرائح

يمكن تشغيل عناصر التحكم، مثل إيقاف مؤقت والتالي والسابق، باستخدام لوحة المفاتيح. يمكن إيقاف التشغيل التلقائي للشرائح مؤقتًا أو إيقافه.

الإطارات والمحتوى المضمّن

للإطارات <iframe> سمة title وصفية عندما تكون مطلوبة لتمييز محتواها.

التحميل الكسول والتمرير اللانهائي

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

تباين الألوان

يحقق النص نسبة التباين المطلوبة وفق WCAG، بما في ذلك 4.5:1 للنص العادي عند انطباقها. للعناصر التفاعلية مؤشرات تركيز مرئية وذات تباين كافٍ.

التكبير وإعادة تدفق المحتوى

لا يتطلب المحتوى تمريرًا أفقيًا عند عرض 320 بكسل، إلا عندما يكون ذلك ضروريًا لطبيعة المحتوى. يحافظ المحتوى على معناه ووظائفه عند التكبير إلى 200%.

متطلبات خاصة بالأجهزة المحمولة

وفّر أهداف تفاعل بحجم ومسافات مناسبة للمس، مع مراعاة متطلبات WCAG 2.2 والاستثناءات المرتبطة بها. لا تعتمد الوظائف على تمرير المؤشر وحده دون بديل يمكن الوصول إليه.

أساسيات ARIA

استخدم عناصر HTML الأصلية ودلالاتها قبل اللجوء إلى أدوار ARIA كلما أمكن. حدّث أدوار ARIA وحالاتها وخصائصها ديناميكيًا عندما تتغير حالة المكوّن. استخدم مناطق ARIA live باعتدال ولإعلان التغييرات المهمة فقط.