Web Accessibility Academy · درس

Placeholder ليس تسمية

تعرّف إلى سبب فشل التلميحات المختفية مع المستخدمين الحقيقيين.

الدرس 2 من 413 خطوة

Placeholder ليس تسمية درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.

الاختصار المغري

قد يبدو من المغري وضع نص تلميحي في الحقل والاستغناء عن التسمية. لكن placeholder تلميح وليست اسمًا. ⚠️

يختفي

بمجرد أن يبدأ شخص ما بالكتابة، يختفي placeholder. عندها لا يبقى ما يوضح الغرض من الحقل.

<input type="text" placeholder="Full name">

عبء التذكر

يجب على المستخدمين الذين يواجهون صعوبات في الذاكرة أو الانتباه أن يتذكروا التلميح بعد اختفائه. أما التسمية الدائمة فتزيل هذا العبء.

تباين منخفض افتراضيًا

يكون نص placeholder عادةً باللون الرمادي الفاتح، ما يجعله غالبًا غير مستوفٍ لقواعد التباين. وقد لا يتمكن المستخدمون ضعاف البصر من قراءته إطلاقًا.

يبدو ممتلئًا

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

غير متسق مع قارئات الشاشة

إن دعم قارئات الشاشة لاستخدام placeholder كاسم متقطع ويختلف باختلاف المتصفح. لذلك لا يمكنكم الاعتماد على إعلانه.

استخدمهما معًا، لا أحدهما فقط

لا بأس باستخدام Placeholders كتلميحات إضافية، مثل مثال على التنسيق. لكن اجمعوها مع تسمية حقيقية، ولا تستخدموها وحدها مطلقًا.

<label for="phone">Phone</label>
<input id="phone" placeholder="555-0100">

تتألق أمثلة التنسيق هنا

يُعد placeholder رائعًا لتقديم مثال على التنسيق، مثل نمط التاريخ. ومع ذلك تظل التسمية هي التي تحمل الاسم الفعلي للحقل.

التسميات العائمة

ترتفع التسميات العائمة عند الكتابة، فتحافظ على ظهور الاسم. إنها تسمية حقيقية، لكنها متحركة فقط، ولذلك فهي مستوفية للمتطلبات.

اختبره بملئه

تحقق سريع: اكتب في الحقل. إذا لم يعد بإمكانكم معرفة ما الذي يطلبه، فهذا يعني أن placeholder كان يؤدي وظيفة التسمية.

تؤكد WCAG ذلك

يتوقع معيار WCAG الخاص بـالتسميات أو التعليمات اسمًا واضحًا ودائمًا. وغالبًا ما تفشل الحقول التي تعتمد على placeholder فقط في عمليات التدقيق.

تحقق سريع

لماذا يُعد placeholder بديلًا ضعيفًا عن التسمية؟

مراجعة

إن placeholder تلميح يتلاشى، وليست اسمًا. حافظوا على تسمية حقيقية، واستخدموا Placeholders فقط للمساعدة الإضافية في التنسيق. 💡

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
30
الدروس
120

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

هل درس «Placeholder ليس تسمية» مجاني؟

نعم — نص درس «Placeholder ليس تسمية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.

ماذا ستتعلم في «Placeholder ليس تسمية»؟

تعرّف إلى سبب فشل التلميحات المختفية مع المستخدمين الحقيقيين. تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟

لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «Placeholder ليس تسمية»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟

نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. كل إدخال يحتاج إلى label حقيقي
  2. Placeholder ليس تسمية
  3. تجميع الحقول باستخدام fieldset وlegend
  4. إعلان نص المساعدة والحقول المطلوبة
← العودة إلى Web Accessibility Academy