بريد HTML يبقى HTML يعرضه وكيل مستخدم — فتطبيق بريد الويب متصفح، ومحرك العرض في تطبيق البريد الأصلي لا يختلف عنه جوهريًا. لا تستثني معايير النجاح في WCAG البريد الإلكتروني استثناءً خاصًا، وهي تنطبق على استطلاع أو اختبار أو قائمة قابلة للطي مبنية بـ CSS فقط بالقدر نفسه الذي تنطبق به على المكوّن المكافئ على الويب. هذه قائمة تحقق عملية للمعايير الأربعة الأهم للبريد التفاعلي القائم على حيلة مربع الاختيار.
لماذا تنطبق WCAG هنا أصلًا
WCAG 2.2 مكتوبة بمصطلحات "المحتوى" الذي يعرضه "وكيل مستخدم"، لا "صفحات الويب" تحديدًا — وهي ليست معيارًا رسميًا خاصًا بالبريد الإلكتروني، إذ لا تذكر المواصفة البريد كوسيط إطلاقًا، لكن المحتوى الأساسي HTML في الحالتين. ولهذا يتعامل مجتمع إمكانية الوصول مع معايير النجاح في WCAG بوصفها المعيار العملي لمحتوى البريد، كما تفعل قائمة التحقق هذه، بدلًا من معاملة البريد كفئة منفصلة لا تشملها الإرشادات.
1.1.1 المحتوى غير النصي — كل صورة تحتاج إلى نص بديل حقيقي
صور المنتجات، والصور الرئيسية، والفواصل الزخرفية، والأزرار المكوّنة من أيقونة فقط، كلها تحتاج إلى سمة alt يستطيع قارئ الشاشة نطقها — أو، للصور الزخرفية حقًا التي لا تحمل أي معلومة، سمة فارغة صريحة alt="" ليتجاوزها قارئ الشاشة بدلًا من قراءة اسم ملف لا معنى له. ويزداد هذا أهمية في العناصر التفاعلية مقارنةً بالثابتة: فعجلة الحظ أو بطاقة الكشط القائمة بالكامل على الصور، دون بديل نصي يصف النتيجة، تترك مستخدم قارئ الشاشة دون أي وسيلة لمعرفة ما ربحه.
1.4.3 / 1.4.11 — التباين للنص وعناصر التحكم التفاعلية
تحدد WCAG حدًا أدنى لنسبة التباين يبلغ 4.5:1 لنص المتن العادي (و3:1 للنص الكبير، وفق 1.4.3)، وحدًا أدنى يبلغ 3:1 للحدود المرئية لمكوّنات واجهة المستخدم والرسومات (1.4.11). وكلاهما ينطبق مباشرة على العناصر التفاعلية، لا على فقرات النص فقط — حدّ خيار في استطلاع، وخلفية زر إجابة في اختبار مقابل الحاوية، وأرقام عدّاد تنازلي مقابل خلفيته. وعنصر التحكم التفاعلي منخفض التباين ليس مجرد إخفاق جمالي؛ فقد يجعله غير مرئي تمامًا لمستلم ضعيف البصر.
2.1.1 لوحة المفاتيح — الميزة الحقيقية لتقنية حيلة مربع الاختيار
حقل <input type="radio">/<input type="checkbox"> حقيقي مقترن بـ <label for="..."> يقبل التركيز أصلًا ويمكن تشغيله بمفتاح Tab مع المسافة أو Enter، في أي تطبيق بريد يعرض عناصر النماذج أصلًا — بلا ترميز إضافي وبلا جهد إضافي، لأن هذه هي الطريقة التي عاملت بها المتصفحات عناصر النماذج الحقيقية دائمًا. راجع آلات الحالة بـ CSS :checked لمعرفة كيف تعمل التقنية نفسها. هذه ميزة حقيقية مقارنةً بما يفعله عادةً عرض دوّار على الويب يعتمد على JavaScript — عنصر <div onclick> بلا معالج للوحة المفاتيح — وهي ميزة يحصل عليها البريد التفاعلي بحكم بنيته، لا بجهد إضافي، ما دامت تُستخدم أزواج <label>/<input> حقيقية بدلًا من عناصر <div> مجرّدة قابلة للنقر.
2.5.8 حجم الهدف (الحد الأدنى) — جديد في WCAG 2.2
يحدد معيار النجاح 2.5.8، الذي قُدّم في WCAG 2.2، حدًا أدنى يبلغ 24×24 بكسل CSS للأهداف التفاعلية، مع استثناءات للنص المضمَّن، وقيود التخطيط الأساسية، أو توفر عنصر تحكم مكافئ أكبر في مكان آخر. وهو الأكثر صلة بالجوال — حيث تحدث غالبية مرات فتح البريد — بالنسبة لأصغر العناصر التفاعلية التي يسهل في الاستوديو تصغيرها أكثر من اللازم: نقاط العرض الدوّار، وأيقونات التقييم بالنجوم، وشارات إجابات الاختبار المتراصة بإحكام.
4.1.2 الاسم والدور والقيمة — تسمية عناصر :checked بشكل صحيح
ينطق قارئ الشاشة اسم عنصر التحكم ودوره وحالته الحالية من الترميز الدلالي الحقيقي — وهذا بالضبط ما يوفّره مجانًا وسم <label> يحيط بحقل <input> حقيقي، وبالضبط ما يفتقده عنصر <div> مجرّد ومنسّق يقوم مقام زر. وعمليًا يعني هذا أن كل خيار في استطلاع، وكل إجابة في اختبار، وكل عنوان قسم في قائمة قابلة للطي يحتاج إلى نص تسمية حقيقي يستطيع قارئ الشاشة قراءته بصوت عالٍ، لا مجرد صورة خلفية أو أيقونة بلا نص مرافق.
قائمة التحقق العملية
- كل صورة تحمل سمة
altحقيقية، أو سمة فارغة صريحةalt=""إن كانت زخرفية. - نصوص عناصر التحكم التفاعلية وحدودها تحقق تباين 4.5:1 (للنص) / 3:1 (لمكوّنات واجهة المستخدم).
- كل تفاعل قائم على
:checkedيستخدم زوج<input>+<label for="...">حقيقيًا — لا عنصر<div>مجرّدًا قابلًا للنقر أبدًا. - الأهداف التفاعلية لا تقل عن 24×24 بكسل CSS، خصوصًا في العناصر الموجهة للجوال.
- تسميات الاستطلاعات والاختبارات والقوائم القابلة للطي تحمل نصًا حقيقيًا مقروءًا — لا صورة أو أيقونة وحدها.