العنصر القابل للكشف أم علامات التبويب: اختاروا الأنسب

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

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

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

عنصر الإظهار والإخفاء الواحد هو إفصاح: زر واحد ومنطقة واحدة. استخدموه عندما تكون هناك كتلة واحدة فقط من التفاصيل الاختيارية المطلوب كشفها.

تستخدم هذه الأنماط ARIA بشكل مختلف. تحتاج علامات التبويب إلى tablist and arrow keys؛ أما الإفصاح أو الأكورديون فلا يحتاج إلا إلى زر ذي aria-expanded.

تعمل علامات التبويب بأفضل صورة عندما يكون كل عنوان قصيرًا ويتسع الصف عبر الجزء العلوي. وإذا كانت العناوين طويلة، فستكون قراءة الأكورديون المكدس رأسيًا أفضل.

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

اسألوا ما إذا كانت الأقسام مستقلة. فإذا استفاد المستخدمون من قراءة عدة أقسام معًا، فاختاروا أكورديون؛ وإذا كان عرض واحد فقط مناسبًا، فاختاروا علامات التبويب.

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

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

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

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