قائمة تحقق إمكانية الوصول في landing page

صفحة الهبوط الميسّرة صفحة يستطيع الشخص قراءتها والتنقل فيها بلوحة المفاتيح وإرسال نموذجها دون فأرة ودون نظر مثالي. وتبدأ هذه القائمة بأربع مراجعات تلتقط أغلب الإخفاقات: تباين نص لا يقل عن 4.5 إلى 1، وعناصر تفاعلية لا تقل عن 24 في 24 بكسل CSS، وحالة تركيز ظاهرة على كل عنصر تحكم، وتسمية حقيقية لكل حقل. الأربعة رخيصة في مرحلة التصميم وباهظة بعد الإطلاق.

التباين هو المكان الذي تسقط فيه أغلب الصفحات

تحدد WCAG أدنى نسبة تباين للنص العادي عند 4.5 إلى 1 مقابل خلفيته، في المستوى AA. والنص الكبير يحصل على 3 إلى 1. والكبير يعني 18 نقطة على الأقل، أو 14 نقطة عريضة، أي ما يقارب 24px أو 18.5px عريضة في CSS. والقيم تُؤخذ كما هي دون تقريب، فنسبة 4.499 إلى 1 ترسب. النص الرمادي الفاتح على أبيض هو المتهم المعتاد. ويليه النص الأبيض فوق صورة، حيث يصمد التباين في أعلى الصورة وينهار في أسفلها.

الأزرار والأيقونات تحتاج تباينًا أيضًا

النص نصف القصة. تطلب WCAG نسبة 3 إلى 1 لعناصر واجهة الاستخدام والرسوم ذات المعنى مقابل الألوان المجاورة لها، في المستوى AA أيضًا. وهذا يشمل حدود حقل الإدخال، وحدود الزر، ومربع الاختيار، ونجمة التقييم، وأي أيقونة تحمل معنى بمفردها. وحد الإدخال الرمادي الباهت على بطاقة بيضاء هو الخطأ الأكثر شيوعًا في صفحات الهبوط. وهو نفسه العنصر الذي يجب أن يلاحظه الناس قبل أن يتحولوا.

أعطِ كل مساحة لمس 24 في 24 بكسل

أضافت WCAG 2.2 قاعدة لحجم الهدف في المستوى AA. يجب ألا تقل الأهداف التفاعلية عن 24 في 24 بكسل CSS. ويُسمح بأهداف أصغر حين تتباعد بما يكفي لتظل دائرة قطرها 24 بكسل حول كل هدف دون تقاطع مع هدف آخر. والروابط داخل الجملة مستثناة. وعمليًا تصيب هذه القاعدة أزرار الأيقونات، وزر إغلاق النافذة المنبثقة، وأيقونات التواصل في التذييل، والروابط المتلاصقة في سطر الشروط أسفل الصفحة.

التنقل بلوحة المفاتيح اختبار من خمس دقائق

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

أعطِ كل حقل تسمية حقيقية

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

قواعد الاتحاد الأوروبي التي بدأت في 2025

دخل قانون إمكانية الوصول الأوروبي European Accessibility Act حيز التنفيذ في 28 يونيو 2025. وهو يسري على الخدمات المباعة للمستهلكين في الاتحاد الأوروبي، بما فيها التجارة الإلكترونية والخدمات المصرفية وحجز النقل. ويعتمد على معيار EN 301 549 المبني على مستوى WCAG AA. وإذا كنت تبيع للمستهلك الأوروبي، فقد انتقلت إمكانية الوصول من ممارسة جيدة إلى التزام قانوني. والتنفيذ يجري عبر الدول الأعضاء بدل جهة واحدة، وهذا يجعل حجم المخاطرة أصعب في التوقع، دون أن يجعله أصغر.

نفّذ هذه القائمة في عشرين دقيقة

ابدأ بأداة فحص آلية، ثم تجاهل الدرجة، لأن الأدوات الآلية تلتقط جزءًا فقط مما يهم. تنقل في الصفحة كاملة بمفتاح Tab. اسحب عينة من كل لون نص وزر إلى أداة فحص التباين. كبّر المتصفح إلى 200 بالمئة وتأكد أن كل شيء يبقى في مكانه دون تداخل أو اقتطاع. شغّل قارئ الشاشة المدمج في نظامك واستمع إلى القسم العلوي والنموذج. وأصلح قيم التباين في توكنات التصميم بدل إصلاحها صفحة صفحة، وإلا سيتكرر الخطأ نفسه في الصفحة التالية.