نمط علامات التبويب: tablist وtab وtabpanel
اربطوا الأدوار الثلاثة التي تحتاج إليها مجموعة علامات التبويب
نمط علامات التبويب: tablist وtab وtabpanel درس مجاني في Web Accessibility Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Web Accessibility Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ما هي مجموعة علامات التبويب فعلًا
تعرض tab set لوحة واحدة في كل مرة، وتتيح للمستخدمين التبديل بينها. ويجب أن تبدو لتقنيات المساعدة كأداة واحدة، لا كروابط منفصلة.
تعمل ثلاثة أدوار معًا
يعتمد هذا النمط على ثلاثة أدوار من ARIA: tablist الذي يحتوي على علامات التبويب، وكل علامة تبويب، واللوحة التي تكشفها كل علامة. احرص على ضبطها جميعًا بشكل صحيح.
الحاوية هي tablist
ضع صف علامات التبويب داخل عنصر يتضمن role="tablist". فهذا يخبر قارئات الشاشة بأن العناصر الفرعية بداخله مجموعة مترابطة من علامات التبويب.
<div role="tablist">...</div>كل علامة تبويب هي زر
أنشئ كل علامة تبويب من button حقيقي مع role="tab". فالزر قابل للتركيز والنقر تلقائيًا، وبذلك تتجنب إعدادًا إضافيًا.
<button role="tab">Profile</button>اللوحة هي tabpanel
يُمنح المحتوى الذي تعرضه كل علامة تبويب role="tabpanel". ويحدد ذلك أنه المنطقة التي تتحكم فيها علامة التبويب المحددة حاليًا.
<div role="tabpanel">Profile details</div>حدّد علامة التبويب المختارة
عيّن aria-selected="true" لعلامة التبويب النشطة، وfalse لبقية العلامات. وتعلن قارئات الشاشة أي علامة تبويب مختارة حاليًا.
<button role="tab" aria-selected="true">Profile</button>اربط علامة التبويب بلوحتها
وجّه كل علامة تبويب إلى لوحتها باستخدام aria-controls، مع تعيينها إلى معرّف اللوحة. وهكذا يعرف المستخدمون المنطقة التي تفتحها العلامة.
<button role="tab" aria-controls="p1">Profile</button>سمِّ اللوحة من علامتها
امنح اللوحة aria-labelledby يشير إلى علامة التبويب الخاصة بها. عندها تستعير اللوحة نص العلامة بوصفه اسمها المتاح.
<div role="tabpanel" aria-labelledby="tab1">...</div>أخفِ اللوحات غير النشطة
يجب عرض لوحة واحدة فقط في كل مرة. أضف السمة hidden إلى اللوحات التي لم تُحدد علامتها حتى تغادر الصفحة.
<div role="tabpanel" hidden>...</div>امنح tablist تسمية
تحتاج tablist إلى aria-label يصف الغرض منها، مثل Account settings. وهكذا يعرف المستخدمون الغرض من مجموعة علامات التبويب بأكملها.
<div role="tablist" aria-label="Account settings">...</div>كيف يبدو كل ذلك عند النطق
عند جمع العناصر معًا، يعلن قارئ الشاشة شيئًا مثل Profile, tab, selected, 1 of 3. وهذا التوجيه هو ما يجعل علامات التبويب قابلة للاستخدام.
تحقق سريع
تُعدّ الحاوية التي تحتوي على صف علامات التبويب. ما الدور الذي ينبغي وضعه عليها؟
مراجعة: نمط علامات التبويب
لقد تعلمت ثلاثية tablist, tab, tabpanel. حدّد علامة التبويب المختارة، واربط كل علامة بلوحتها، وأخفِ العلامات غير النشطة.
الأسئلة الشائعة
هل درس «نمط علامات التبويب: tablist وtab وtabpanel» مجاني؟
نعم — نص درس «نمط علامات التبويب: tablist وtab وtabpanel» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Web Accessibility Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Web Accessibility Academy 4 دروس في المجموع.
ماذا ستتعلم في «نمط علامات التبويب: tablist وtab وtabpanel»؟
اربطوا الأدوار الثلاثة التي تحتاج إليها مجموعة علامات التبويب تتمرن على Web Accessibility Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Web Accessibility Academy؟
لا تُشترط خبرة سابقة. Web Accessibility Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «نمط علامات التبويب: tablist وtab وtabpanel»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Web Accessibility Academy هذا؟
نعم. كل درس في Web Accessibility Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- نمط علامات التبويب: tablist وtab وtabpanel
- التنقل بين علامات التبويب بمفاتيح الأسهم
- لوحات الأكورديون باستخدام Button وaria-expanded
- العنصر القابل للكشف أم علامات التبويب: اختاروا الأنسب