الدرس 1 من 8

ألسنة

هدف الدرس

مكوّن يعرفه قارئ الشاشة

01

الشرح

الألسنة ليست أزرارًا تُخفي عناصر. لها عقد معلن: role="tablist" على الحاوية، وrole="tab" مع aria-selected على كل لسان، وrole="tabpanel" على كل لوح.

وبهذا العقد يعرف قارئ الشاشة أنها ألسنة، وكم عددها، وأيّها مفتوح — بلا أن يرى شيئًا.

وأخفِ الألواح بخاصية hidden لا بـ display:none في صنف: hidden يخرجها من شجرة الإتاحة كذلك.

02

المطلوب

اجعل الضغط يبدّل اللسان واللوح معًا، ويحدّث aria-selected.

معايير التصحيح

6 معايير
  1. اللسان الأول مختار واللوح الأول ظاهر
  2. الضغط على الثاني يبدّل الاختيار
  3. ويبدّل اللوح معه
  4. لسان واحد فقط مختار في كل حال
  5. لوح واحد فقط ظاهر
  6. العودة إلى الأول تعمل
03

تلميحات

0/3
منهج المقرّرأنجزت 0 من 8

مكوّنات تبنيها من الصفر وتجدها في كل واجهة: ألسنة ونوافذ وجداول وإشعارات وعارض شرائح.

متقدّم · 8 دروس · ساعتان

index.html
المعاينة
index.html100%
–/6

اضغط «تشغيل» ليبدأ الفحص.

6 معايير في بطاقة «المطلوب».

منهج المقرّرأنجزت 0 من 8

مكوّنات تبنيها من الصفر وتجدها في كل واجهة: ألسنة ونوافذ وجداول وإشعارات وعارض شرائح.

متقدّم · 8 دروس · ساعتان