الأزرار

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

الأزرار متوفرة بأربع أشكال:

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

الأزرار متوفرة بأربعة أنماط:

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

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

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

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

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

تعمل الأيقونة التابعة بشكل أفضل كعنصر مكمل لتسمية الزر، خاصة عندما تخدم دورًا تكميليًا أو بصريًا بدلاً من المؤشر الوظيفي الأساسي.

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

• الحاوية: المنطقة القابلة للنقر التي تحتوي على جميع العناصر.
• تسمية الزر: يعرض عنوان الزر.
• الأيقونة البادئة أو التابعة: توفر تمثيلًا مرئيًا للغرض/الاسم الزر.

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

• استخدم دائمًا عنصر HTML <button> للأزرار. يضمن هذا إمكانية الوصول إلى الزر بشكل افتراضي، حيث يدعم تركيز لوحة المفاتيح وسمة disabled بشكل أصلي.
• يجب عدم استخدام عناصر HTML غير الدلالية مثل <div> للإجراءات. إذا اضطررت إلى استخدام كزر، فتأكد من أنه ينفذ التنقل. قدم دائمًا سمة href صالحة.
• إشعارات حرجة وتحذيرية: استخدم role="alert" للإعلان الفوري بواسطة التقنيات المساعدة.
• إشعارات أخرى: قم بتطبيق role="status" للإعلانات المهمة ولكنها أقل إلحاحًا.
• جهز جميع الإشعارات بسمة aria-live للإعلان عن تحديثات المحتوى عبر التقنيات المساعدة. استخدم stopAdvertisings لإدارة هذه الإعلانات.
• استخدم aria-describedby لتوضيح الغرض من الإشعارات عند الإعلان عنها أو التركيز عليها. استخدم محتوى العنوان أو محتوى الإشعار الكامل لهذه السمة، حسب وجود عنوان.
• توفير الملاحظات للحالات المختلفة مثل التمرير والتركيز والنشاط. يساعد هذا المستخدمين على استيعاب أن الزر تفاعلي ويمكن النقر عليه.
• تأكد من أن النص أو الرموز الموجودة على الزر لها نسبة تباين لا تقل عن 4.5: 1 مقابل خلفية الزر للامتثال لمعايير WCAG AA.
• تأكد من أن الأزرار كبيرة بما يكفي للتفاعل معها بسهولة، خاصة للمستخدمين الذين يعانون من إعاقات حركية. يوصى بحجم هدف اللمس الأدنى 44x44 بكسل.
• استخدم aria-label عندما لا يحتوي الزر على نص يصف وظيفته، خاصة بالنسبة للأزرار التي تحتوي على أيقونات. مثال: <button aria-label="close"><img src="icon.svg" alt=""></button>.
• تأكد من أن الأزرار يمكنها تلقي التركيز. الوسيطة الافتراضية <button> قابلة للتركيز، ولكن إذا كنت تستخدم عناصر أخرى (وهو ما يجب تجنبه للإجراءات)، فقم بتعيين tabindex="0".