ما هو
التصنيف المُبرمج بشكل صحيح هو نص مرتبط صراحة بحقل نموذج محدد في الكود الأساسي للصفحة (عادة من خلال سمة for تطابق id الحقل)، بحيث يعلن قارئ الشاشة ذلك التصنيف في اللحظة التي ينقل فيها الزائر التركيز إلى الحقل — "عنوان البريد الإلكتروني، تحرير نص"، على سبيل المثال. هذا متطلب أكثر صرامة وتقنية من مجرد وجود نص يشبه التصنيف مرئيًا بالقرب من الحقل، وهي الزاوية المشمولة في دليلنا العام لتصنيف حقول النماذج المركّز على معدلات التحويل.
يمكن أن يبدو حقل مُصنَّفًا بشكل مثالي لزائر مبصر (نص يجلس مباشرة بجانب المربع) بينما لا يوجد اتصال برمجي فعلي بين ذلك النص والحقل على الإطلاق — وهذا بالضبط هو الفجوة التي تبحث عنها هذه الفحوصات المركّزة على إمكانية الوصول.
لماذا يهم
لا يرى قارئ الشاشة التخطيط المرئي لصفحة — يقرأ بنية الكود الأساسية، لذا فإن تصنيفًا قريبًا بصريًا فقط من حقل لكنه غير مرتبط به صراحة في الكود قد لا يُعلن أبدًا عندما يصل مستخدم قارئ شاشة إلى ذلك الحقل. بدون سماع الغرض من حقل، يُتركون للتخمين أو تخطيه تمامًا، مما قد يعني أن مستخدم قارئ شاشة لا يستطيع ببساطة إكمال نموذج يجده زائر مبصر واضحًا تمامًا.
هذا واحد من أكثر المتطلبات رسوخًا وتحديدًا بالاسم في WCAG (إرشادات إمكانية الوصول القياسية التي يتعين على العديد من المؤسسات الالتزام بها قانونيًا)، تحديدًا لأن النماذج مركزية جدًا لإتمام مهمة فعليًا على الويب — التسجيل، الدفع، التواصل.
كيفية الإصلاح
- لكل حقل نموذج، أضف عنصر
<label>بسمةforتطابق سمةidالخاصة بذلك الحقل تمامًا. - بدلاً من ذلك، لفّ الحقل مباشرة داخل وسم
<label>نفسه، مما يخلق نفس الاتصال الصريح دون الحاجة لمعرفات متطابقة. - بالنسبة لحقل بدون تصنيف مرئي على الإطلاق بالتصميم (حقل بأيقونة بحث فقط، على سبيل المثال)، استخدم
aria-label="بحث"مباشرة على الحقل بحيث لا يزال قارئ الشاشة يعلن غرضه. - تجنب الاعتماد على نص العنصر النائب وحده كبديل لتصنيف حقيقي — تتعامل قارئات الشاشة مع نص العنصر النائب بشكل غير متسق، ويختفي بمجرد إدخال النص على أي حال.
- اختبر بالتنقل عبر نموذجك باستخدام لوحة المفاتيح فقط وقارئ شاشة مجاني (NVDA، VoiceOver) للتأكد من أن كل حقل يعلن غرضًا واضحًا.