الدرس 1 من 8
ألسنة
- 16 دقيقة
- 6 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
مكوّن يعرفه قارئ الشاشة
01
الشرح
الألسنة ليست أزرارًا تُخفي عناصر. لها عقد معلن: role="tablist" على الحاوية، وrole="tab" مع aria-selected على كل لسان، وrole="tabpanel" على كل لوح.
وبهذا العقد يعرف قارئ الشاشة أنها ألسنة، وكم عددها، وأيّها مفتوح — بلا أن يرى شيئًا.
وأخفِ الألواح بخاصية hidden لا بـ display:none في صنف: hidden يخرجها من شجرة الإتاحة كذلك.
02
المطلوب
اجعل الضغط يبدّل اللسان واللوح معًا، ويحدّث aria-selected.
معايير التصحيح
6 معايير- اللسان الأول مختار واللوح الأول ظاهر
- الضغط على الثاني يبدّل الاختيار
- ويبدّل اللوح معه
- لسان واحد فقط مختار في كل حال
- لوح واحد فقط ظاهر
- العودة إلى الأول تعمل