أفضل الممارسات المتعلّقة بنموذج تسجيل الدخول

استخدِم ميزات المتصفّح من عدّة أنظمة أساسية لإنشاء نماذج تسجيل دخول آمنة وسهلة الاستخدام ويمكن الوصول إليها.

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

في ما يلي مثال على نموذج تسجيل دخول بسيط يعرض جميع أفضل الممارسات:

قائمة التحقق

• استخدام عناصر HTML مفيدة: <form> و<input> و<label> و<button>.
• تسمية كل إدخال باستخدام <label>.
• استخدِم سمات العناصر للوصول إلى ميزات المتصفّح المضمَّنة: type وname وautocomplete وrequired.
• أدخِل قيمًا ثابتة للإدخالَين name وid لا تتغير بين عمليات تحميل الصفحات أو عمليات نشر الموقع الإلكتروني.
• ضَع تسجيل الدخول في عنصر <form> خاص به.
• التأكد من إرسال النموذج بنجاح:
• يمكنك استخدام autocomplete="new-password" وid="new-password" لإدخال كلمة المرور في نموذج الاشتراك، وكلمة المرور الجديدة في نموذج إعادة ضبط كلمة المرور.
• استخدِم autocomplete="current-password" وid="current-password" لإدخال كلمة مرور لتسجيل الدخول.
• توفير وظيفة إظهار كلمة المرور
• استخدام aria-label وaria-describedby لإدخال كلمات المرور
• لا تضاعف الإدخالات.
• صمِّم نماذج بحيث لا تحجب لوحة مفاتيح الأجهزة الجوّالة الإدخالات أو الأزرار.
• تأكَّد من أنّ النماذج قابلة للاستخدام على الأجهزة الجوّالة: استخدِم نصًّا مقروءًا، واحرص على أن تكون الإدخالات والأزرار كبيرة بما يكفي للعمل كجهات لمس.
• حافظ على العلامة التجارية والأسلوب في صفحات الاشتراك وتسجيل الدخول.
• أجرِ اختبارًا في المجال والمختبر: أنشئ إحصاءات للصفحات وإحصاءات التفاعل وقياس الأداء المتمركز حول المستخدم ضمن خطوات الاشتراك وتسجيل الدخول.
• الاختبار على المتصفحات والأجهزة: يختلف سلوك النموذج بشكلٍ كبير على الأنظمة الأساسية.

استخدام ترميز HTML مفيد

استخدام العناصر التي تم إنشاؤها للمهمة: <form> و<label> و<button> وتعمل هذه الميزات على تفعيل وظائف المتصفّح المضمَّنة، وتحسين إمكانية الوصول، وإضافة معنى إلى الترميز.

استخدام <form>

قد تميل إلى لفّ الإدخالات في <div> والتعامل مع إرسال بيانات الإدخال باستخدام JavaScript فقط. ومن الأفضل بشكل عام استخدام عنصر <form> قديم بسيط. ويتيح ذلك لبرامج قراءة الشاشة والأجهزة المساعدة الأخرى إمكانية الوصول إلى موقعك الإلكتروني، ويمكّن مجموعة من ميزات المتصفّح المضمَّنة، ويسهّل إنشاء تسجيل دخول وظيفي أساسي للمتصفّحات القديمة، ويمكن أن يستمر في العمل حتى إذا تعذّر استخدام JavaScript.

استخدام <label>

لتصنيف إدخال، استخدِم <label>.

<label for="email">Email</label>
<input id="email" …>

سببان:

• يؤدي النقر على التصنيف إلى نقل التركيز إلى الإدخال الخاص به. اربط تصنيفًا بأحد الإدخالات عن طريق استخدام سمة for للتصنيف مع name للإدخال أو id.
• يعلن قارئات الشاشة عن نص التسمية عندما يتم التركيز على التصنيف أو إدخال التصنيف.

ولا تستخدم العناصر النائبة كتسميات إدخال. يكون الأشخاص مسؤولين عن نسيان ما تم إدخاله عند بدء إدخال النص، خاصةً إذا تشتت انتباههم ("هل أدخلتُ عنوان بريد إلكتروني أو رقم هاتف أو رقم تعريف حساب؟"). هناك الكثير من المشكلات المحتملة الأخرى المتعلقة بالعناصر النائبة: راجع عدم استخدام سمة العنصر النائب والعناصر النائبة في حقول النموذج ضارة إذا لم تكن مقتنعًا.

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

افتح تأثير موضع التصنيف على جهاز جوّال لتشاهده بنفسك.

استخدام <button>

استخدِم <button> للأزرار. توفر عناصر الأزرار سلوكًا يمكن الوصول إليه ووظيفة إرسال نموذج مدمجة، ويمكن تصميمها بسهولة. فليس هناك جدوى من استخدام <div> أو عنصر آخر يتظاهر بأنه زر.

تأكَّد من أنّ زر الإرسال يشير إلى الدور الذي تؤديه. تشمل الأمثلة إنشاء حساب أو تسجيل الدخول، وليس إرسال أو بدء.

التأكّد من إرسال النموذج بنجاح

ساعِد مدراء كلمات المرور في إدراك أنّه تم إرسال نموذج. هناك طريقتان للقيام بذلك:

• انتقِل إلى صفحة مختلفة.
• يمكنك محاكاة التنقّل باستخدام History.pushState() أو History.replaceState() وإزالة نموذج كلمة المرور.

في حال استخدام طلب XMLHttpRequest أو fetch، يمكنك التأكّد من تسجيل الدخول بنجاح في الردّ والتعامل مع هذه العملية من خلال إزالة النموذج من نموذج العناصر في المستند (DOM) مع توضيح نجاح العملية للمستخدم.

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

وفي المقابل، لا يمكنك إيقاف إرسال النموذج الذي ينتظر البيانات من المستخدم. على سبيل المثال، لا توقِف زر تسجيل الدخول إذا لم يُدخل المستخدمون رقم التعريف الشخصي للعميل. قد يفتقد المستخدمون شيئًا ما في النموذج، ثم يحاولون النقر بشكل متكرر على زر تسجيل الدخول (المعطل) ويعتقدون أنه لا يعمل. على الأقل، إذا كان عليك إيقاف إرسال النموذج، اشرح للمستخدم ما هو مفقود عند النقر على الزر "غير مفعّل".

عدم تكرار الإدخالات

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

الاستفادة إلى أقصى حد من سمات العناصر

هذا هو المكان الذي يحدث فيه السحر حقًا! تحتوي المتصفحات على العديد من الميزات المضمنة المفيدة التي تستخدم سمات عناصر الإدخال.

الحفاظ على خصوصية كلمات المرور مع السماح للمستخدمين بالاطِّلاع عليها عند الرغبة

يجب أن تتضمن إدخالات كلمات المرور type="password" لإخفاء نص كلمة المرور ومساعدة المتصفّح في معرفة أنّ الإدخال مخصّص لكلمات المرور. (يُرجى ملاحظة أنّ المتصفّحات تستخدم مجموعة متنوعة من الأساليب لفهم أدوار الإدخال وتحديد ما إذا كنت تريد عرض حفظ كلمات المرور أم لا).

عليك إضافة مفتاح تبديل عرض كلمة المرور لتمكين المستخدمين من التحقق من النص الذي أدخلوه، ولا تنسَ إضافة رابط نسيت كلمة المرور. يمكنك الاطّلاع على تفعيل عرض كلمة المرور.

منح مستخدمي الأجهزة الجوّالة لوحة المفاتيح المناسبة

استخدِم <input type="email"> لمنح مستخدمي الأجهزة الجوّالة لوحة مفاتيح مناسبة وتفعيل التحقق الأساسي من عنوان البريد الإلكتروني المضمَّن في المتصفِّح... بدون الحاجة إلى JavaScript.

إذا كنت بحاجة إلى استخدام رقم هاتف بدلاً من عنوان بريد إلكتروني، يتيح <input type="tel"> استخدام لوحة مفاتيح هاتف على الأجهزة الجوّالة. يمكنك أيضًا استخدام سمة inputmode عند الضرورة: يُعدّ inputmode="numeric" مثاليًا لأرقام رقم التعريف الشخصي. يحتوي كل ما أردت معرفته عن وضع الإدخال على مزيد من التفاصيل.

منع لوحة مفاتيح الجوّال من إعاقة زر تسجيل الدخول

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

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

الاختبار على مجموعة من الأجهزة

سيتعين عليك إجراء اختبار على مجموعة من الأجهزة لجمهورك المستهدف، وتعديل هذه المعلومات وفقًا لذلك. يتيح BrowserStack اختبارًا مجانيًا للمشروعات مفتوحة المصدر على مجموعة من الأجهزة والمتصفحات الحقيقية.

ننصحك باستخدام صفحتين.

تتجنب بعض المواقع (بما في ذلك Amazon وeBay) المشكلة عن طريق طلب البريد الإلكتروني/الهاتف وكلمة المرور على صفحتين. يعمل هذا النهج أيضًا على تبسيط التجربة: يتم تكليف المستخدم بشيء واحد فقط في كل مرة.

يُنصح بتنفيذ ذلك باستخدام <form> واحد. استخدِم JavaScript لعرض إدخال البريد الإلكتروني فقط مبدئيًا، ثم إخفاؤه وإظهار إدخال كلمة المرور. إذا كان لا بد من إجبار المستخدم على الانتقال إلى صفحة جديدة بين إدخال عنوان البريد الإلكتروني وكلمة المرور، يجب أن يحتوي النموذج على الصفحة الثانية على عنصر إدخال مخفي يتضمّن قيمة البريد الإلكتروني، وذلك للمساعدة على تمكين مدراء كلمات المرور من تخزين القيمة الصحيحة. وتوفر أنماط نماذج كلمات المرور التي يفهمها Chromium مثالاً للتعليمة البرمجية.

مساعدة المستخدمين على تجنُّب إعادة إدخال البيانات

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

هناك جزءان لذلك:

1. تساعد السمات autocomplete وname وid وtype المتصفّحات في فهم دور الإدخالات من أجل تخزين البيانات التي يمكن استخدامها لاحقًا للملء التلقائي. للسماح بتخزين البيانات من أجل الملء التلقائي، تتطلّب المتصفِّحات الحديثة أيضًا إدخال البيانات بحيث تحتوي على قيمة ثابتة name أو id (لا يتم إنشاؤها عشوائيًا عند كل تحميل للصفحة أو عند نشر الموقع الإلكتروني)، وأن تكون في شكل <form> يتضمّن الزر submit.

2. تساعد السمة autocomplete المتصفحات في الملء التلقائي للإدخالات تلقائيًا بشكل صحيح باستخدام البيانات المخزّنة.

استخدِم autocomplete="username" لإدخالات البريد الإلكتروني، حيث يتم التعرف على username من خلال برامج إدارة كلمات المرور في المتصفحات الحديثة، على الرغم من أنه يجب استخدام type="email" واستخدام id="email" وname="email".

عند إدخال كلمات المرور، يمكنك استخدام قيمتَي autocomplete وid المناسبتَين لمساعدة المتصفّحات في التفريق بين كلمات المرور الجديدة والحالية.

استخدام autocomplete="new-password" وid="new-password" لإنشاء كلمة مرور جديدة

• يُرجى استخدام autocomplete="new-password" وid="new-password" لإدخال كلمة المرور في نموذج الاشتراك، أو إدخال كلمة المرور الجديدة في نموذج تغيير كلمة المرور.

استخدام autocomplete="current-password" وid="current-password" لكلمة مرور حالية

• يمكنك استخدام autocomplete="current-password" وid="current-password" لإدخال كلمة المرور في نموذج تسجيل الدخول أو إدخال كلمة المرور القديمة للمستخدم في نموذج تغيير كلمة المرور. وهذا يخبر المتصفح أنك تريد أن يستخدم كلمة المرور الحالية التي تم تخزينها للموقع.

بالنسبة إلى نموذج الاشتراك:

<input type="password" autocomplete="new-password" id="new-password" …>

لتسجيل الدخول:

<input type="password" autocomplete="current-password" id="current-password" …>

دعم خدمات إدارة كلمات المرور

تتعامل المتصفحات المختلفة مع الملء التلقائي للبريد الإلكتروني واقتراح كلمات المرور بشكل مختلف إلى حدٍ ما، ولكن التأثيرات متشابهة كثيرًا. على سبيل المثال، في الإصدار 11 من متصفّح Safari والإصدارات الأحدث على أجهزة الكمبيوتر المكتبي، يتم عرض مدير كلمات المرور، وبعد ذلك يتم استخدام المصادقة بالمقاييس الحيوية (بصمة الإصبع أو التعرّف على الوجوه) في حال توفّرها.

يعرض متصفّح Chrome على أجهزة الكمبيوتر المكتبي اقتراحات البريد الإلكتروني ويعرض مدير كلمات المرور ويملأ كلمة المرور تلقائيًا.

أنظمة كلمات مرور المتصفح والملء التلقائي ليست بسيطة. لا يتم توحيد خوارزميات تخمين القيم وتخزينها وعرضها، كما أنها تختلف من نظام أساسي إلى آخر. على سبيل المثال، كما أوضحنا في مقالة Hidde de Vries: "يكمّل مدير كلمات المرور في فايرفوكس أساليبه الإرشادية باستخدام نظام وصفات طعام".

الملء التلقائي: المعلومات التي يجب أن يعرفها مطورو الويب، ولكن لا تتوفّر لديهم المزيد من المعلومات حول استخدام name وautocomplete. تسرد مواصفات HTML جميع القيم المحتملة البالغ عددها 59.

تفعيل المتصفّح لاقتراح كلمة مرور قوية

تستخدم المتصفحات الحديثة الإرشادات لتحديد وقت عرض واجهة مستخدم مدير كلمات المرور واقتراح كلمة مرور قوية.

إليك طريقة تنفيذ ذلك في متصفّح Safari على أجهزة الكمبيوتر المكتبي.

(يتوفر اقتراح قوي لكلمة المرور الفريدة في Safari بدءًا من الإصدار 12.0.)

تعني أدوات إنشاء كلمات المرور المضمَّنة في المتصفحات أنّ المستخدمين والمطوّرين ليسوا بحاجة إلى معرفة "كلمة المرور القوية". وبما أنّ المتصفِّحات يمكنها تخزين كلمات المرور بشكلٍ آمن وملؤها تلقائيًا حسب الضرورة، لن يحتاجوا إلى تذكُّر كلمات المرور أو إدخالها. إنّ تشجيع المستخدِمين على الاستفادة من أدوات إنشاء كلمات المرور المضمَّنة في المتصفّح يعني أيضًا أنّهم يميلون أكثر إلى استخدام كلمة مرور فريدة وقوية على موقعك الإلكتروني ويقلّ احتمال إعادة استخدام كلمة مرور يمكن اختراقها في مكان آخر.

المساعدة في حماية المستخدمين من الإدخالات المفقودة عن طريق الخطأ

أضِف السمة required إلى حقلَي البريد الإلكتروني وكلمة المرور. تطلب المتصفحات الحديثة ضبط التركيز تلقائيًا على البيانات الناقصة. لا حاجة إلى JavaScript

تصميم ليناسب الأصابع والإبهام

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

احرص على أن تكون الإدخالات والأزرار كبيرة بما يكفي.

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

ووفقًا لإرشادات تسهيل الاستخدام في نظام التشغيل Android، يبلغ حجم الهدف المقترَح لكائنات الشاشة التي تعمل باللمس من 7 إلى 10 ملم. وتشير إرشادات واجهة Apple إلى الحجم 48×48 بكسل، وتقترح النسخة المتوافقة مع معيار W3C 44x44 بكسل CSS على الأقل. بناءً على هذا الأساس، أضِف (على الأقل) مساحة متروكة تبلغ حوالي 15 بكسل لإدخال العناصر والأزرار للأجهزة الجوّالة وحوالي 10 بكسل على الكمبيوتر المكتبي. جرب هذا باستخدام جهاز محمول حقيقي وإبهام حقيقي أو إصبع حقيقي. يجب أن تكون قادرًا على النقر فوق كل مدخلات وأزرار بشكل مريح.

عدم تحديد حجم أهداف النقر بشكلٍ مناسب يمكن أن يساعدك تدقيق Lighthouse في برمجة عملية اكتشاف عناصر الإدخال الصغيرة جدًا.

تصميم يتناسب مع الإبهام

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

جعل النص كبيرًا بما يكفي

كما هو الحال مع الحجم والمساحة المتروكة، يكون حجم الخط الافتراضي لعناصر الإدخال والأزرار صغيرًا جدًا، لا سيما على الأجهزة الجوّالة.

تختلف أحجام الخطوط على المتصفحات التي تعمل بالأنظمة الأساسية المختلفة، لذلك من الصعب تحديد حجم خط معيّن يناسب كل مكان. أظهر استطلاع سريع لمواقع الويب الشهيرة أحجامًا تتراوح بين 13 و16 بكسل على أجهزة الكمبيوتر المكتبي: إنّ مطابقة هذا الحجم الفعلي هو الحدّ الأدنى الجيد للنص على الأجهزة الجوّالة.

هذا يعني أنّك بحاجة إلى استخدام حجم أكبر بالبكسل على الأجهزة الجوّالة: إنّ قراءة النص 16px على متصفّح Chrome على أجهزة الكمبيوتر المكتبي واضحة، ولكن من الصعب قراءة النص 16px على Chrome على أجهزة Android إذا كانت هذه الرؤية جيدة. يمكنك ضبط أحجام مختلفة لوحدات البكسل للخط لأحجام إطار العرض المختلفة باستخدام استعلامات الوسائط. يمكنك استخدام 20px على الأجهزة الجوّالة، ولكن يجب اختباره مع الأصدقاء أو الزملاء الذين يعانون من ضعف في النظر.

لا يستخدم المستند أحجام خطوط قابلة للقراءة يمكن أن يساعدك تدقيق Lighthouse في برمجة عملية اكتشاف النص الصغير جدًا.

توفير مساحة كافية بين مصادر الإدخال

أضِف هامشًا كافيًا لتعمل الإدخالات بشكلٍ جيد مثل أهداف اللمس. بمعنى آخر، يجب أن يكون عرض الإصبع في الهامش حوالي.

تأكَّد من أنّ البيانات التي يتم إدخالها تظهر بوضوح.

يجعل نمط الحدود التلقائي للمدخلات من الصعب رؤيتها. إنها غير مرئية تقريبًا على بعض الأنظمة الأساسية مثل Chrome لنظام Android.

بالإضافة إلى المساحة المتروكة، يمكنك إضافة حد: على خلفية بيضاء، من القواعد العامة الجيدة استخدام #ccc أو ألوان داكنة أكثر.

استخدام ميزات المتصفّح المضمَّنة للتحذير من قيم الإدخال غير الصالحة

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

يمكنك استخدام أداة اختيار لغة CSS :invalid لتمييز البيانات غير الصالحة. استخدِم :not(:placeholder-shown) لتجنب اختيار إدخالات لا تتضمن أي محتوى.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

جرِّب طرقًا مختلفة لتمييز الإدخالات ذات القيم غير الصالحة.

استخدام JavaScript عند الضرورة

إيقاف/تفعيل عرض كلمة المرور

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

يستخدم الرمز التالي زرًا نصيًا لإضافة وظيفة عرض كلمة المرور.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

في ما يلي CSS لجعل الزر يبدو كنص عادي:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

وJavaScript لعرض كلمة المرور:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

ها هي النتيجة النهائية:

إتاحة إدخالات كلمة المرور

يمكنك استخدام aria-describedby لتوضيح قواعد كلمة المرور من خلال منحها معرّف العنصر الذي يصف القيود. توفر برامج قراءة الشاشة نص التسمية ونوع الإدخال (كلمة المرور)، ثم الوصف.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

عند إضافة وظيفة عرض كلمة المرور، احرص على تضمين علامة aria-label للتحذير من عرض كلمة المرور. وإلا فقد يكشف المستخدمون عن كلمات المرور عن غير قصد.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

يمكنك الاطّلاع على ميزتَي ARIA أثناء العمل من خلال تأثير Glitch التالي:

يتضمن إنشاء نماذج يمكن الوصول إليها مزيدًا من النصائح للمساعدة في جعل النماذج سهلة الوصول.

التحقُّق في الوقت الفعلي وقبل الإرسال

تحتوي عناصر وسمات نماذج HTML على ميزات مضمّنة للتحقق الأساسي، ولكن يجب أيضًا استخدام JavaScript لإجراء عمليات تحقّق أكثر فعالية أثناء إدخال المستخدمين للبيانات وعندما يحاولون إرسال النموذج.

الخطوة 5 من الدرس التطبيقي حول ترميز نموذج تسجيل الدخول تستخدم واجهة برمجة التطبيقات للتحقق من صحة القيد (المتوافقة على نطاق واسع) لإضافة عملية تحقّق مخصّصة باستخدام واجهة مستخدم المتصفّح المضمَّنة لضبط التركيز وعرض الطلبات.

اطّلع على مزيد من المعلومات: استخدِم JavaScript لإجراء تحقّق أكثر تعقيدًا في الوقت الفعلي.

الإحصاءات وRUM

ينطبق "ما لا يمكنك قياسه، ولا يمكنك تحسينه" بشكل خاص على نماذج الاشتراك وتسجيل الدخول. تحتاج إلى تحديد الأهداف وقياس مدى النجاح وتحسين موقعك الإلكتروني والتكرار.

يمكن أن يكون اختبار قابلية الاستخدام المخفّض مفيدًا لتجربة التغييرات، ولكنك ستحتاج إلى بيانات حقيقية لفهم تجربة المستخدمين في نموذج الاشتراك وتسجيل الدخول:

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

يمكنك أيضًا التفكير في تنفيذ اختبار A/B لتجربة أساليب مختلفة للاشتراك وتسجيل الدخول، وعمليات الطرح على مراحل للتحقق من صحة التغييرات على مجموعة فرعية من المستخدمين قبل إصدار التغييرات لجميع المستخدمين.

الإرشادات العامة

يمكن لواجهة المستخدم وتجربة المستخدِم ذات التصميم الجيّد تقليل معدّل التراجع عن نموذج تسجيل الدخول:

• لا تجعل المستخدمين يبحثون عن معلومات تسجيل دخول! ضع رابطًا لنموذج تسجيل الدخول أعلى الصفحة، باستخدام صيغة مفهومة جيدًا مثل تسجيل الدخول أو إنشاء حساب أو تسجيل.
• حافِظ على تركيزك. فنماذج الاشتراك ليست مكانًا لتشتيت انتباه الأشخاص بالعروض وميزات الموقع الأخرى.
• تقليل تعقيد عملية الاشتراك اجمع بيانات المستخدمين الأخرى (مثل العناوين أو تفاصيل بطاقة الائتمان) فقط عندما يرى المستخدمون فائدة واضحة من تقديم تلك البيانات.
• قبل أن يبدأ المستخدمون في نموذج الاشتراك، وضّح عرض القيمة. كيف يستفيدون من تسجيل الدخول؟ امنح المستخدمين حوافز ملموسة لإكمال الاشتراك.
• واسمح للمستخدمين، إن أمكن، تعريف أنفسهم باستخدام رقم هاتف محمول بدلاً من عنوان بريد إلكتروني، حيث إن بعض المستخدمين قد لا يستخدمون البريد الإلكتروني.
• اجعل من السهل على المستخدمين إعادة تعيين كلمة المرور مع توضيح الرابط هل نسيت كلمة المرور؟؟
• رابط إلى بنود الخدمة ومستندات سياسة الخصوصية: وضّح للمستخدمين منذ البداية كيفية حماية بياناتهم.
• أدرِج شعار شركتك أو مؤسستك واسمها في صفحات الاشتراك وتسجيل الدخول، وتأكَّد من أنّ اللغة والخطوط والأنماط تتطابق مع بقية صفحات موقعك الإلكتروني. بعض النماذج لا تشعر أنها تنتمي إلى الموقع نفسه الذي ينتمي إليه محتوى آخر، خاصةً إذا كانت تحتوي على عنوان URL مختلف تمامًا.

مواصلة التعلّم

• إنشاء نماذج رائعة
• أفضل الممارسات لتصميم نماذج الأجهزة الجوّالة
• عناصر تحكُّم أكثر فعالية في النموذج
• إنشاء نماذج تسهيل الاستخدام
• تبسيط عملية تسجيل الدخول باستخدام واجهة برمجة التطبيقات لإدارة بيانات الاعتماد
• التحقّق من أرقام الهواتف على الويب باستخدام WebOTP API

تصوير ميغان شيريك على موقع Unsplash