الإجابة المختصرة

امنح كل حقل تسمية ظاهرة مربوطة به عبر for وid، واكتب «إلزامي» نصًا للحقول المطلوبة، واجمع الخيارات المترابطة بـ fieldset وlegend، واعرض الأخطاء بالكلمات بجانب الحقل وفي ملخص، واستخدم أنواع الحقول الصحيحة والإكمال التلقائي، وتأكد من أن النموذج كله يعمل بلوحة المفاتيح.

أهم النقاط

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

وجد تقرير WebAIM Million لعام 2026 تسميات نماذج مفقودة في 51% من أكثر مليون صفحة رئيسية زيارة. من دون تسمية، يقول قارئ الشاشة فقط «حقل نص قابل للتعديل»، فيضطر الشخص إلى التخمين. وكل تخمين فرصة لخسارة بيع أو عميل محتمل.

الإصلاح خطوة بخطوة

  1. سمِّ كل حقل

    استخدم <label for="email">البريد الإلكتروني</label> مع <input id="email">. يجب أن يضع النقر على التسمية المؤشر في الحقل.

  2. وضّح الحقول الإلزامية

    اكتب «(إلزامي)» في التسمية، أو اشرح معنى النجمة في أعلى النموذج. وأضف السمة required.

  3. اجمع الخيارات المترابطة

    ضع أزرار الاختيار ومجموعات مربعات الاختيار داخل fieldset مع legend، مثل «طريقة التواصل المفضلة».

  4. استخدم الأنواع الصحيحة

    type=”email” وtype=”tel” وinputmode تُظهر لوحة المفاتيح المناسبة على الهاتف. أضف autocomplete=”email” و”name” و”postal-code” وغيرها.

  5. اكتب رسائل خطأ مفيدة

    اعرض الخطأ بجانب الحقل نصًا («أدخل تاريخًا مثل 2026-03-15»)، واربطه من ملخص في الأعلى، وصِله بالحقل عبر aria-describedby.

  6. اختبره

    املأ النموذج بلوحة المفاتيح فقط، ثم بقارئ شاشة، ثم ارتكب خطأ عمدًا لترى إن كانت الرسالة تساعد.

النص التوضيحي ليس تسمية

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

رسائل خطأ تساعد فعلًا

عبارة «إدخال غير صالح» لا تساعد أحدًا. قل ما الخطأ وكيف يُصلح: «يجب أن يتكون رقم الهاتف من 10 أرقام، مثل 514 555 0199». لا تعتمد على اللون وحده، وأضف أيقونة أو كلمة «خطأ». وعندما يفشل الإرسال، انقل التركيز إلى ملخص في الأعلى يسرد كل مشكلة كرابط إلى حقلها.

قواعد WCAG 2.2 الجديدة للنماذج

  • الإدخال المكرر (3.3.7): لا تطلب من الناس كتابة المعلومات نفسها مرتين في العملية نفسها. اعرض خيار «مثل عنوان الفوترة».
  • المصادقة سهلة الوصول (3.3.8): لا تجبر الناس على حل لغز أو تذكّر رمز لتسجيل الدخول. اسمح بمديري كلمات المرور واللصق.
  • حجم الهدف (2.5.8): يجب ألا تقل الأزرار ومربعات الاختيار عن 24 × 24 بكسل، أو أن تكون متباعدة بما يكفي ليسهل لمسها.

اقرأ القائمة الكاملة في شرح WCAG 2.2 بكلمات بسيطة.

إضافات نماذج التواصل

معظم إضافات النماذج الشائعة في ووردبريس قادرة على إنتاج كود سهل الوصول، لكن الإعدادات مهمة. فعّل التسميات (لا النص التوضيحي فقط)، واختر رسائل الخطأ المضمّنة، وتجنب اختبارات CAPTCHA بالصور. وبعد تغيير الإعدادات، شغّل فحصًا: يشير Accessible Nord إلى الحقول التي تفتقد التسميات في كل صفحة يفحصها.

المصادر

معظم المصادر وثائق رسمية باللغة الإنجليزية.

  1. The WebAIM Million, 2026 report
  2. W3C WAI: Forms tutorial
  3. Understanding WCAG 2.2: Redundant Entry (3.3.7)
  4. Understanding WCAG 2.2: Accessible Authentication (Minimum) (3.3.8)

آخر مراجعة في .

الأسئلة الشائعة

هل يمكنني إخفاء التسميات بصريًا؟

يمكنك استخدام تسمية مخفية بصريًا في الحالات البسيطة، مثل حقل بحث واحد مع زر بحث واضح. أما في معظم النماذج، فالتسميات الظاهرة تساعد الجميع، بمن فيهم من لديهم صعوبات في الذاكرة أو الانتباه.

هل اختبار CAPTCHA سهل الوصول؟

اختبارات CAPTCHA بالصور والألغاز تعيق كثيرًا من الناس. استخدم فحوصًا غير مرئية مثل حقل فخ مخفي، أو حدودًا لعدد المحاولات، أو تحديًا حديثًا لا يطلب حل مهمة.

هل أتحقق من الإدخال أثناء الكتابة؟

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

هذا الدليل معلومات عامة وليس استشارة قانونية. لمعرفة التزاماتك المحددة، استشر محاميًا أو الجهة التنظيمية المعنية.