تعمل البطاقة كحاوية للمعلومات والإجراءات المتعلقة بمفهوم أو عنصر محدد. وهي عادة تجمع بين الصور والنصوص وبعض العناصر التفاعلية.
تعزز البطاقات إبراز المعلومات وتساعد في التنبؤ بالأنماط.
المتغيرات
البطاقة متاحة بثلاثة أنماط أساسية:
- البطاقة الافتراضية: الحالة الافتراضية للبطاقة عندما لا يتم التفاعل معها تظهر في الحالة الأولية دون أي تفاعل.
- البطاقة القابلة للتوسع: يسمح للمستخدمين بالتبديل بين عرض مصغر ومكبر للمحتوى الإضافي داخل البطاقة.
- البطاقة المحددة: تشير بأنه يمكن للمستخدم التفاعل مع محتوى البطاقة أو عناصرها أو اختيارها.
تتوفر البطاقة القابلة للاختيار والبطاقة القابلة للتوسع في أربع حالات:
- الافتراضية: الحالة الافتراضية للبطاقة عندما لا يتم التفاعل معها تظهر في الحالة الأولية دون أي تفاعل.
- التمرير: تحدث عندما يمر المستخدم بالمؤشر فوق البطاقة دون النقر عليه.
- التركيز: تشير هذه الحالة إلى البطاقة عند اختيارها أو تنشيطها، وعادةً من خلال التنقل على لوحة المفاتيح باستخدام مفتاح «Tab».
- المعطلة: تظهر هذه الحالة على البطاقة عندما لا تكون تفاعلية، للإشارة بأنه لا يمكن التفاعل مع العنصر في ظل الظروف الحالية.
المظهر
عادةً ما تظهر البطاقات بشكل مستطيل مع زوايا مستديرة، حيث تحتوي على مجموعة من الصور والنصوص أو عناصر تفاعلية مثل الأزرار أو الأيقونات.
التركيب
- صورة: عنصر بصري يعزز من سياق المحتوى المعروض داخل البطاقة.
- الأيقونة المميزة: تشير بشكل بصري إلى نوع البطاقة.
- عنوان البطاقة: هو العنوان الرئيسي أو العلامة التي تقدم وصفاً موجزًا أو عنوانًا للمحتوى الموجود داخل البطاقة.
- الوصف: يقدم وصف نصي للبطاقة.
- العنصر المخصص (مثل Avatar): يشير إلى عنصر واجهة مستخدم متخصص، مدمج في تخطيط البطاقة لوظيفة محددة أو عرض محتوى معين.
- العلامات: عناصر بصرية صغيرة الحجم تستخدم لنقل معلومات أو حالة محددة تتعلق بالمحتوى.
- التقييم: يمثل تقييم المستخدم أو المجتمع للمحتوى المعروض داخل البطاقة.
- الإجراءات: تتضمن عناصر تفاعلية مثل الأزرار الثانوية لتعزيز تفاعل المستخدم.
- الحاوية: المنطقة التي تحتوي على جميع العناصر.
إمكانية الوصول
يجب تصميم البطاقات كمكونات تفاعلية مع مراعاة إمكانية الوصول إليها لضمان استخدامها من قبل الجميع بما فيهم الأشخاص ذوي الإعاقة. فيما يلي توجد السمات والممارسات الرئيسية لإمكانية الوصول التي يجب مراعاتها عند تنفيذ الأكورديون:
الخصائص والممارسات الرئيسية لإمكانية الوصول:
سمات ARIA (تطبيقات الإنترنت الغنية بإمكانية الوصول):
استخدام سمات ARIA (تطبيقات الإنترنت الغنية بإمكانية الوصول) لتعزيز إمكانية الوصول:
- role="button": يطبق على كل رأس أكورديون للإشارة إلى أنه تفاعلي.
- Aria-expanded: يجب تعيين هذه السمة إلى «صحيح» أو «خاطئ» اعتمادًا على ما إذا كان قسم الأكورديون مفتوحًا أو مغلقًا، على التوالي.
- Aria-controls: تقوم بربط مقدمة الأكورديون بالمحتوى الذي يتسع، مما يساعد قارئ الشاشة في فهم العلاقة.
- Aria-disabled: يتم استخدامه إذا كان هناك مقدمة أكورديون غير تفاعلي.
التنقل باستخدام لوحة المفاتيح:
- يجب أن تكون البطاقات قابلة للتنقل بالكامل باستخدام اختصارات لوحة المفاتيح. بحيث يكون لدى المستخدمين القدرة على تبويب كل رأس أكورديون باستخدام مفاتيح مثل Enter أو Space لتوسيع وإغلاق الأقسام.
إدارة التركيز:
- تأكد من إدارة التركيز بشكل مناسب عند فتح لوحة الأكورديون عن طريق نقل التركيز إلى داخل المحتوى أو بقائه على رأس الصفحة.يجب أن تكون مؤشرات التركيز (مثل الخطوط العريضة أو الحدود حول العنصر النشط) واضحة ومتميزة لمساعدة المستخدمين الذين يتنقلون باستخدام لوحة المفاتيح.
دعم قارئ الشاشة:
- يجب أن يكون محتوى مقدمة كل أكورديون واضحًا ومفيدًا بالدرجة الكافية التي تتيح المستخدمين فهم الغرض من المحتوى القابل للطي.
التصميم المرئي:
تأكد من أن جميع النصوص داخل الأكورديون -بما في ذلك المقدمات والمحتوى- لها نسب تباين وألوان كافية وفقًا لمعيار WCAG (إرشادات إمكانية الوصول إلى محتوى الويب) من أجل مساعدة المستخدمين ذوي الإعاقات البصرية. بالإضافة إلى ذلك تأكد بأن العناصر التفاعلية مثل الأيقونات أو الأزرار مرئية وقابلة للتمييز بسهولة.