قائمة التحقق من إمكانية الوصول لمصممي UX/UI

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

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

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

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

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

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

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

تصميم التنقل

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

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

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

حجم أهداف المؤشر واللمس

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

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

مؤشرات التركيز مرئية وواضحة. لا تعتمد مؤشرات التركيز على تغيير اللون وحده، واجعلها واضحة وسهلة التمييز.

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

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

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

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

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

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

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

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

رسائل الخطأ

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

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

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

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

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