قائمة التحقق من إمكانية الوصول إلى WCAG للمنتجات الحقيقية
من لوحة المفاتيح والتركيز إلى التباين والنماذج وARIA - ما الذي يجب على فرق المنتج قفله قبل الإطلاق، وليس بعد الشكاوى.
علي مرتضوي
مؤسس بارادايس كود
إمكانية الوصول هي جودة المنتج، وليس طبقة لاحقة
إذا تعطلت لوحة المفاتيح، فسيتم حظر جزء من المستخدمين، والعديد من المستخدمين المتميزين. تعامل مع WCAG كخط أساس قانوني/أخلاقي وكإشارة للجودة الهندسية. تكلف الإصلاحات المتأخرة أكثر من تصميمها بشكل صحيح منذ اليوم الأول.
الهدف العملي لمعظم المنتجات: AA ذات مغزى في الرحلات الأساسية، مع الاختبار الآلي واليدوي كمكملات.
لوحة المفاتيح والتركيز والنظام
يجب أن تكتمل جميع التفاعلات الأساسية بدون استخدام الماوس. يجب أن يكون التركيز مرئيًا، ومحاصرًا بشكل منطقي في الوسائط، ويتم استعادته إلى نقطة معقولة عند الإغلاق. `المخطط التفصيلي: لا شيء` بدون بديل يعد بمثابة مخالفة للتصميم.
يجب أن يتطابق ترتيب علامات التبويب مع الترتيب المرئي. أنشئ عناصر واجهة مستخدم مخصصة للأدوار الصحيحة - أو استخدم مكتبات يمكن الوصول إليها مثل أنماط HeroUI/React Aria.
دلالات HTML قبل ARIA
الزر هو `<زر>`؛ الرابط هو `<a href>`. ARIA مخصص عندما لا يكون HTML الأصلي كافيًا، ومن ثم يجب أن يكون كاملاً وصحيحًا. إن "تصنيف الأغنية" الخاطئ هو أسوأ من لا شيء لأنه يكمن في التكنولوجيا المساعدة.
يجب أن تشكل العناوين تسلسلاً هرميًا حقيقيًا. المعالم (الرأس/التنقل/الرئيسي) تجعل التنقل عبر قارئ الشاشة ممكنًا.
النماذج والأخطاء والحالة
يحتاج كل إدخال إلى تسمية مرئية، فالعنصر النائب ليس تسمية. يجب أن تكون الأخطاء نصية، ومرتبطة بالمجال، وقابلة للتركيز. أعلن عن النجاح/الفشل باستخدام مناطق "aria-live" المناسبة.
بالنسبة للنماذج متعددة الخطوات، اعرض الخطوة الحالية والتقدم للجميع، وليس فقط عبر اللون.
التباين والحركة والوسائط
يحتاج النص وعناصر التحكم إلى تباين كافٍ؛ إقران الحالات المعطلة بمعنى إضافي. الشرف "يفضل الحركة المخفضة" للرسوم المتحركة. الصور ذات المعنى تحتاج إلى نص بديل؛ الصور المزخرفة تحصل على بديل فارغ.
يحتاج الفيديو الأساسي إلى تسميات توضيحية. ننسى التشغيل التلقائي مع الصوت.
اختبار في تعريف تم
ضع الأدوات الآلية (الفأس وما شابه) في CI، لكن لا تثق بها وحدها - فهي تكتشف جزءًا فقط من المشكلات. يتطلب إجراء فحص يدوي للوحة المفاتيح وتمرير قارئ الشاشة لمسارات الأموال.
يجب أن يكون لكل مكون من مكونات نظام التصميم قصة واحدة. عندما تكون البدائيات صحيحة، تنقطع الميزات بشكل أقل.
الأسئلة الشائعة
هل AA كافية أم يجب أن نطارد AAA؟
بالنسبة لمعظم منتجات الويب، يعد AA هو الهدف الواقعي. متابعة AAA على أسطح محددة عند الحاجة.
هل يمكن للون وحده أن يشير إلى الأخطاء؟
لا، قم بإقران اللون مع النص/الأيقونات/الأنماط حتى لا يتخلف المستخدمون المصابون بعمى الألوان عن الركب.
إنشاء نموذج مخصص أو استخدام نموذج جاهز؟
ما لم تكن لديك خبرة عميقة، استخدم نمطًا جاهزًا يسهل الوصول إليه. تعد الوسائط من بين أصعب الأدوات.
كيف ينبغي لنا أن نحدد الأولويات؟
التسجيل وتسجيل الدخول والدفع والمحتوى الأساسي أولاً؛ صفحات ذات حركة مرور أقل لاحقًا.
المعرفة والمقالات
تحتاج تطبيق هذه المفاهيم في منتجك؟
بارادايس كود معك من الاستشارة حتى التسليم الكامل.