كيفية جعل الوصول إلى علامات التبويب والطي قابلة للنفاذ

التبويب

WAI-ARIA

• الأدوار: تحديد ما هو العنصر أو ما يفعله.
  1. role=”tablist” لمجموعة من علامات التبويب.
  2. role=”tab” لكل تسمية / عنوان لوحة علامة التبويب.
  3. role=”tabpanel” للمحتوى المرتبط بعلامة تبويب.
• الخصائص: تُستخدم لمنحهم معنى أو دلالات إضافية.
  1. aria-controls: العلاقة بين علامات التبويب ولوحات علامات التبويب.
  2. aria-labelledby: يوفر للمستخدم اسمًا مميزًا لعلامة التبويب.
  3. tabindex: اضافة -1 لل javascript للتحريك الى عنصر اخر.
• الحالة: تحديد الشروط الحالية للعناصر.
  1. aria-selected: للإعلام عند تحديد عنصر واحد أو أكثر.
  2. aria-hidden: للإشارة إلى أن العنصر وجميع عناصرة الداخلية غير مرئية أو محسوسة.

JAVASCRIPT

• انقل التركيز إلى المحتوى عن طريق جافا سكريبت بمجرد تشغيل علامة التبويب.

 

Collapse

WAI-ARIA

• الأدوار: تحديد ما هو العنصر أو ما يفعله.
  1. role=”tablist” لمجموعة من علامات التبويب.
  2. role=”tab” لكل تسمية / عنوان لوحة علامة التبويب.
• الخصائص: تُستخدم لمنحهم معنى أو دلالات إضافية.
  1. aria-controls: العلاقة بين علامات التبويب ولوحات علامات التبويب.
  2. aria-labelledby: يوفر للمستخدم اسمًا مميزًا لعلامة التبويب.
  3. tabindex: اضافة -1 لل javascript للتحريك الى عنصر اخر.
• الحالة: تحديد الشروط الحالية للعناصر.
  1. aria-expanded: للإشارة إلى حالة العنصر القابل للطي.
  2. aria-hidden: للإشارة إلى أن العنصر وجميع عناصره الداخلية غير مرئية أو محسوسة.

JAVASCRIPT

• انقل التركيز إلى المحتوى عن طريق جافا سكريبت بمجرد تشغيل علامة التبويب.