النص الإرشادي ليس تسمية للحقل

01لماذا تفشل فكرة استخدام النص الإرشادي بديلًا للتسمية

النص الإرشادي هو النص الرمادي الذي يظهر داخل الحقل الفارغ. تستخدمه بعض النماذج بدل التسمية لتوفير المساحة. يبدو الشكل نظيفًا لكنه يسبب مشكلات عدة للمستخدمين.

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

ويزيد الملء التلقائي المشكلة سوءًا: حين يملأ المتصفح الحقل يختفي النص الإرشادي ولا يبقى ما يوضح غرض القيمة.

02استخدم تسمية دائمة

ضع تسمية ظاهرة فوق كل حقل أو بجانبه، واربطها به عبر السمة <code>;for<;/code>; ومعرّف الحقل <code>;id<;/code>;. فتؤدي النقرة على التسمية إلى تركيز الحقل، مما يوسّع منطقة اللمس أيضًا.

يجب أن يكون نص التسمية قصيرًا ومحددًا: «البريد الإلكتروني» و«رقم الهاتف» و«الرمز البريدي».

التسمية تقول ما هو الحقل، والتلميح يقول كيف تملؤه.

• أبقِ التسمية ظاهرة في كل حالة: فارغ ومركّز ومملوء وخطأ.
• علّم الحقول الاختيارية بعبارة «(اختياري)» بدل وضع نجمة على كل حقل مطلوب.
• اكتب رسائل الخطأ بجوار الحقل وسمِّ الحقل في الرسالة.

03أضف نص تلميح عند الحاجة

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

• الصيغة

  التسمية «تاريخ الميلاد»، والتلميح «مثال: 15 03 1995»

• الحد

  التسمية «اسم المستخدم»، والتلميح «من 3 إلى 20 حرفًا، أحرف وأرقام فقط»

اربط التلميح بالحقل عبر <code>;aria-describedby<;/code>; لتقرأه التقنيات المساعدة مع التسمية.

04التسميات العائمة والاستخدام الجيد للنص الإرشادي

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

• إن استخدمت نصًا إرشاديًا فاجعله مثالًا قصيرًا مثل «name@example.com»، وتأكد أنه ليس مصدر المعلومة الوحيد.
• لا تضع التعليمات الأساسية أو الصيغ المطلوبة في النص الإرشادي وحده.

05المصادر

• W3C. Web Content Accessibility Guidelines (WCAG) 2.2, 1.4.3 Contrast (Minimum) and 3.3.2 Labels or Instructions. https://www.w3.org/TR/WCAG22/