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

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

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

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

قائمة التحقق

• استخدام عناصر 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" مثاليًا لأرقام التعريف الشخصي. كل ما أردت معرفته عن وضع الإدخال يحتوي على مزيد من التفاصيل.

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

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

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

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

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

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

تتجنب بعض المواقع (بما في ذلك 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: "يكمل مدير كلمات المرور في Firefox استدلاله باستخدام نظام وصفات طعام".

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

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

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

إليك كيفية قيام Safari بذلك على سطح المكتب.

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

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

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

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

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

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

التأكد من أن الإدخالات والأزرار كبيرة بما يكفي

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

وفقًا لإرشادات تسهيل الاستخدام في نظام التشغيل Android، يبلغ حجم الاستهداف الموصى به لكائنات الشاشة التي تعمل باللمس من 7 إلى 10 ملم. وتقترح إرشادات واجهة Apple مقاس 48×48 بكسل، وتقترح W3C بحجم 44×44 بكسل 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 مختلف تمامًا.

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

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

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