نماذج اتصال تراعي إمكانية الوصول وقانون إمكانية الوصول الأوروبي

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

ما الذي يغطيه قانون إمكانية الوصول الأوروبي

يطبق قانون إمكانية الوصول الأوروبي (التوجيه (EU) 2019/882) منذ 28 يونيو 2025. ويضع متطلبات لإمكانية الوصول لمنتجات وخدمات معينة تقدم للمستهلكين، منها التجارة الإلكترونية والخدمات المصرفية للمستهلكين والكتب الإلكترونية والاتصالات الإلكترونية وأجزاء من نقل الركاب. ويعني ذلك للموقع المتجر الإلكتروني أو الخدمة المصرفية بالكامل، بما يشمل النماذج التي يستخدمها العملاء للاتصال بكم أو طرح الأسئلة أو تقديم الشكاوى. وتعفى المؤسسات متناهية الصغر التي تقدم خدمات: وهي التي يقل موظفوها عن عشرة ولا يتجاوز رقم أعمالها السنوي أو مجموع ميزانيتها 2 مليون EUR. وتخرج العروض الموجهة حصرا للشركات الأخرى عموما من نطاقه.

حولت كل دولة عضو التوجيه إلى قانون وطني. ففي ألمانيا هو Barrierefreiheitsstärkungsgesetz (BFSG)، وفي بولندا قانون صدر عام 2024 بشأن ضمان استيفاء بعض المنتجات والخدمات لمتطلبات إمكانية الوصول. وتختلف السلطات الرقابية والعقوبات من بلد إلى آخر، لكن المقياس التقني متماثل عموما: عمليا المعيار الأوروبي EN 301 549، الذي يستند بدوره إلى إرشادات إتاحة محتوى الويب (WCAG).

لماذا يفيد حتى دون التزام قانوني

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

قائمة تحقق عملية مع مراجع WCAG 2.2

• تسميات مرئية مرتبطة بحقول الإدخال (1.3.1، 3.3.2): لكل حقل تسمية مرئية متصلة به عبر for/id. والنص النائب وحده ليس تسمية، إذ يختفي بمجرد بدء الكتابة.
• رسائل خطأ تشرح التصحيح (3.3.1، 3.3.3): سموا الحقل، وبينوا الخطأ وكيفية تصحيحه نصيا، وليس بإطار أحمر فقط. «يرجى إدخال عنوان بريد إلكتروني مثل name@example.com» أفضل من «إدخال غير صالح».
• تشغيل كامل بلوحة المفاتيح (2.1.1، 2.1.2): يمكن الوصول إلى كل حقل ومربع اختيار وCAPTCHA وزر الإرسال واستخدامها بمفاتيح Tab وSpace وEnter، دون احتجاز للوحة المفاتيح.
• تركيز مرئي (2.4.7): يمكن دائما رؤية الحقل النشط. وإزالة إطار التركيز في المتصفح دون بديل تخالف هذا المعيار.
• تباين كاف (1.4.3): للنص والتسميات ورسائل الخطأ نسبة تباين لا تقل عن 4.5:1 مقابل الخلفية (3:1 للنص الكبير).
• حجم الهدف (2.5.8): الأزرار ومربعات الاختيار والروابط بقياس 24 × 24 بكسل CSS على الأقل، أو بمسافة كافية حولها.
• بدائل CAPTCHA (1.1.1) والمصادقة التي تراعي إمكانية الوصول (3.3.8): يتطلب 1.1.1 بديلا نصيا وCAPTCHA بأكثر من شكل حسي واحد؛ ويغطي 3.3.8 حصرا خطوات تسجيل الدخول، لكن فكرته تمتد إلى هنا: لا ينبغي أن يكون لغز، مثل إعادة كتابة حروف مشوهة أو حل عملية جمع، السبيل الوحيد للمرور. وفروا بديلا أو استخدموا طريقة لا تتطلب لغزا أصلا.
• إخفاء حقول المصيدة عن التقنيات المساعدة: يوضع aria-hidden="true" على العنصر الحاوي لحقل المصيدة وtabindex="-1"، حتى لا يصل إليه مستخدمو قارئات الشاشة ولوحة المفاتيح.

CAPTCHA وحقول المصيدة: عندما تلتقي مكافحة البريد المزعج بإمكانية الوصول

يتعلق المعيار 3.3.8 بدقة بخطوات تسجيل الدخول والمصادقة، وليس بنماذج الاتصال. لكن فكرته مناسبة هنا أيضا: فكتابة حروف مشوهة أو حل عملية جمع أو اختيار إشارات المرور من شبكة صور يستبعد بعض الناس بالكامل. وتحجب الخيارات التي تعمل عادة دون ألغاز، مثل Cloudflare Turnstile وFriendly Captcha وحقل مصيدة مع فحص زمني أو تصفية على الخادم مثل Akismet، البريد المزعج دون مطالبة الزوار بإثبات شيء. ولا يكون حقل المصيدة مراعيا للمستخدمين إلا إذا كان غير مرئي حقا، لقارئات الشاشة ومستخدمي لوحة المفاتيح أيضا:

<div class="hp" aria-hidden="true">
  <label for="hp-website">اتركوا هذا الحقل فارغا</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

اختبروا نموذجكم خلال خمس عشرة دقيقة

1. 1ضعوا الفأرة جانبا واملؤوا النموذج كله بلوحة المفاتيح وحدها. هل تصلون إلى كل حقل وزر الإرسال، وهل ترون دائما موضعكم؟
2. 2أرسلوا النموذج فارغا، ثم بعنوان بريد إلكتروني خاطئ. هل تظهر الأخطاء نصيا بجوار الحقل الصحيح، وهل يتضح ما ينبغي فعله؟
3. 3افتحوا الصفحة على هاتف أو كبروا المتصفح إلى 200%. هل كل شيء مقروء، وهل يسهل لمس الأزرار، وهل يغطي شريط ملفات تعريف الارتباط أو عنصر دردشة زر الإرسال؟
4. 4شغلوا قارئ شاشة (VoiceOver أو NVDA أو TalkBack) واستمعوا: هل يعلن كل حقل مع تسميته، وهل يظل حقل المصيدة صامتا؟
5. 5شغلوا فحصا آليا مثل axe-core. يعثر بسرعة على التسميات المفقودة ومشكلات التباين، لكنه لا يجد كل شيء؛ وتظل الخطوات اليدوية أعلاه لازمة.

إذا فضلتم البدء بنظرة عامة، يفحص formexposed نماذجكم العامة من الخارج، دون إرسال شيء. وتشغل فحوصات إمكانية الوصول axe-core على كل نموذج، وتعلم CAPTCHA التي لا بديل لها يراعي إمكانية الوصول وحقول المصيدة التي تعلنها قارئات الشاشة، وتفحص النموذج على هاتف: أهداف اللمس، والطبقات التي تغطي زر الإرسال، والتمرير الأفقي. ويعرض الفحص المجاني المستوى العام؛ وترد هذه التفاصيل في التقرير الكامل. وهو نقطة بداية جيدة للقائمة أعلاه، وليس بديلا عن الاختبار مع أشخاص حقيقيين.