قائمة مراجعة إمكانية الوصول لمصممي UX/UI

استنادًا إلى WCAG 2.2 AA - مُحدّثة ومحسنة للتصميم البصري وتجربة المستخدم

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

تباين النص يفي بنسبة 4.5:1 للنص العادي و3:1 للنص الكبير. العناصر التفاعلية لها تباين كافٍ مع الخلفية. لا يُستخدم اللون وحده للتعبير عن المعنى.

الخطوط والنصوص

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

التخطيط والبنية

تسلسل مرئي واضح باستخدام رؤوس h1 وh2 وh3. تجميع العناصر ذات العلاقة معًا. استخدام مساحة بيضاء كافية بين المحتويات. وضع المعلومات المهمة في الأعلى عند الإمكان.

تصميم التنقل

القوائم متسقة في جميع الصفحات. توفير رابط "تخطي إلى المحتوى الرئيسي".

تصميم النماذج

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

حجم الأهداف اللمسية

الأهداف التفاعلية لا تقل عن 44x44 بكسل. مسافة كافية بين العناصر لتفادي النقر العرضي.

حالات التركيز المرئية

مؤشرات التركيز مرئية وواضحة. تستخدم مؤشرات التركيز أكثر من مجرد اللون.

التصميم المتجاوب

التخطيط يتكيف مع جميع أحجام الشاشات دون فقدان محتوى أو وظيفة. لا حاجة للتمرير الأفقي عند عرض العرض 320 بكسل.

تجربة المستخدم في الجوال

التفاعلات بسيطة بإصبع واحد. وضع الأزرار المهمة ضمن نطاق الإبهام.

الحركة والرسوم

الرسوم المتحركة التلقائية يمكن تجنبها أو إيقافها. يتم احترام إعدادات "تقليل الحركة" للمستخدم.

الأيقونات والرموز

الأيقونات المهمة مصحوبة بتسميات نصية. لا يُستخدم اللون وحده للتعبير عن الحالة.

رسائل الخطأ

تظهر بجانب الحقل المعني. لا تعتمد فقط على اللون.

ترتيب القراءة والتركيز

يتطابق ترتيب القراءة مع الترتيب المنطقي والتركيز. يتم وضع العناصر المهمة أولاً أو بشكل متسق.

استخدام المكونات بشكل متسق

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