ابدأ بخيار المستخدم ونظام رموز دلالية
استخدم إعداد النظام كافتراضي عبر prefers-color-scheme. إذا عرضت مفتاحًا، اجعل التحكم قابلاً للتشغيل من لوحة المفاتيح وله اسم قابل للوصول وكشف عن الاختيار النشط برمجيًا. اعطِ الاختيار اليدوي أسبقية في سياق المتصفح ذاك؛ لا تعد بأنه سيتبع المستخدم إلى جهاز آخر أو جلسة خاصة.
سمّ الألوان حسب الدور، لا بالمظهر: canvas، surface، text، muted text، border، link، accent، error، success، focus، و disabled. خرّط كل دور في كلتا الثيمتين. هذا يمنع تسرب رمادي خاص بالضوء إلى الوضع الداكن ويجعل الإصلاحات قابلة لإعادة الاستخدام. الظلام ليس بطبيعته أكثر قابلية للوصول أو مفضلاً عالميًا؛ إنه تجربة أخرى يجب جعلها قابلة للاستخدام.
وثّق ترتيبًا، مثل الاختيار المحفوظ أولًا وتفضيل النظام ثانيًا، حتى تختبر الفرق الفرق نفس النتيجة.
ضمّن حالات hover و focus و selected و invalid و disabled و loading و empty و visited-link، وليس فقط الافتراضات.
قِس التباين في الثيمة المُصاغة
تحدد WCAG 2.2 معيار النجاح 1.4.3 حدًا أدنى 4.5:1 للنص العادي وصور النص، و3:1 للنص الكبير. لا تُقرّب الأرقام: 4.499:1 لا تفي بمتطلب 4.5:1. الخطوط الرقيقة قد تبدو أضعف من لونها المحسوب، لذا استخدم خطًا أكثر صلابة أو هامشًا إضافيًا.
افحص كل لون أمامي وخلفية مجاورة أثناء العرض المُمَاثل. النص فوق الصور الفوتوغرافية أو التدرجات أو اللوحات نصف الشفافة أو الفيديو له خلفيات متغيرة، لذا لا يمكن لحساب رمز واحد أن يثبت قابليته للقراءة. استخدم خلفية معتمة، تراكبًا كافياً، أو وضعًا مختلفًا، ثم فحص عند أحجام العرض الواقعية.
بموجب WCAG 2.1 معيار النجاح 1.4.11، المعلومات المرئية اللازمة لتحديد عنصر تحكم نشط أو حالة مطلوبة أو رسم ذي مغزى تحتاج 3:1 مقابل الألوان المجاورة.
اقترن تغيّر اللون بنص أو أيقونة أو نمط أو موضع أو دلالة واضحة أخرى؛ لا تعتمد حالات الخطأ أو التحديد على صبغة خفيفة.
حافظ على تركيز لوحة المفاتيح والنماذج وتغيّر الحالات
انتقل باستخدام Tab عبر كلتا الثيمتين. يجب أن يكون التركيز مرئيًا على الروابط والأزرار وحقول الإدخال والقوائم والحوارات والودجتات المخصصة ومفتاح الثيمة. لا تزل الحلقة الافتراضية للمتصفح ما لم يُختبر البديل على كل سطح وحالة. غالبًا ما يكون محيط متموضع أوفست أوضح من توهّج يندمج.
مظهر التركيز في WCAG 2.2 هو معيار AAA، وليس برهانًا على أن الموقع يحقق مستوى AA. إنه هدف مفيد: مساحة مؤشر على الأقل بحجم محيط 2 بكسل CSS و3:1 تباين بين البكسلات المركزة وغير المركزة. تحقق أيضًا من أن حالات الخطأ والإلزام والاختيار وغير المتاحة تحتفظ بالمعنى.
اختبر نص التلميح في الحقول، والقيمة المدخلة، والوسم، ونص المساعدة، ونص الخطأ، والحد غير الصالح، وعلامة خانة الاختيار، وتحديد الراديو، وحالة الإرسال بشكل منفصل.
لعمليات الدفع أو أي تدفق مُنظّم آخر استخدم صندوق رمل مزوّد الخدمة واحصل على مراجعة مؤهلة للوصول والأمان عند الاقتضاء. هذه إرشادات تعليمية، ليست تقييم امتثال أو أمان.
تعامل مع الصور والوسائط المضمنة وواجهة المتصفح المقدمة
راجع الشعارات والرسوم التوضيحية واللقطات والشِّعارات والمخططات والأيقونات والنص المحفور في الصور في كلتا الثيمتين. قد يختفي شعار معاد استخدامه للضوء وتفشل وسيلة إيضاح المخطط حتى عندما يمرّ HTML المحيط. وفّر أصلًا مناسب الغرض أو خلفية مستقرة. يجب أن تبقى الصور التي تنقل تعليمات أو حالة أو بيانات مفهومة.
أعلن عن دعم للمخططات الفاتحة والداكنة، ثم نسّق محتوى الصفحة للثيمة المختارة. خاصية color-scheme توائم قماش المتصفح، وأشرطة التمرير، وعناصر النماذج، وواجهات المتصفح الأخرى. ضع البيانات الوصفية المقابلة مبكرًا في الوثيقة. يمكن لـ SVG المضمّن الاستجابة لمخطط الأصل؛ اختبر iframes والودجتات الخارجية نهاية إلى نهاية.
فضّل عناصر HTML الدلالية. سلوك forced-colors يستخدم الدلالات الأصلية، لا دور ARIA مضافًا إلى عنصر عام.
افحص الحالات المنزّلة والمخبّأة والبطيئة التحميل والفاشلة للصور، خاصة حيث يجلس نص أو دلائل فعل فوق الوسائط.
احترم forced-colors واختبر الإصدار كنظام
يطبق وضع forced-colors لوحة ألوان محدودة يختارها المستخدم، مثل وضع التباين العالي في Windows. يمكن للمتصفحات استبدال الألوان، وإزالة الظلال، وإضافة لواصق خلف النص. لا تحجب التجاوز. قم بإصلاحات مستهدفة حيث يفقد مكوّن حدّه أو معناه، مثل وضع حد حقيقي حيث حمل الظل قابلية الإدراك. لا يمكن للمحاكاة أن تمثل كل جهاز أو متصفح أو امتداد أو مستوى تكبير أو تجميعة تقنيات مساعدة.
شغّل مصفوفة المسارات والتفاعلات في الإعدادات الفاتحة والداكنة ووضع forced-colors قبل الإصدار. يمكن لـ Chrome DevTools محاكاة كلا الحالتين؛ استخدمه لتسريع المراجعة، ثم تنقّل يدويًا في مسارات الأولوية. الماسحات تجد مرشّحين لكنها لا تستطيع تحديد إمكانية الوصول بمفردها. تقوم SIU بعمليات ما قبل الطيران لأصول الثيمة والتفاعلات الحرجة، تُسجّل بوابة إصدار، وتحافظ على مسار تراجع مُختبر للتراجعات الشديدة في العرض؛ هذا ليس مراقبة وقت التشغيل.
ضمّن الصفحة الرئيسية، والتنقل، والبحث، والوصول إلى الحساب، والنماذج، وصفحات الخطأ، والشاشات بعد المصادقة، وتدفقات تحويل المواد.
احفظ عناوين URL المختبرة، وإصدارات المتصفح، والإعدادات، والاستثناءات، والمالك، ومشغّل التراجع لكي يبدأ الإصلاح من حقائق.