الدرس 7 من 8
عارض شرائح
- 15 دقيقة
- 6 فحوص
- 3 تلميحات
- إلى المطلوب
هدف الدرس
يدور ويعلن موضعه
الشرح
يُظهر عارض الشرائح شريحة واحدة وزرّين للتنقّل، ويعمل بالدوران، فالضغط على «التالي» عند الشريحة الأخيرة يعود بك إلى الأولى، والضغط على «السابق» عند الأولى ينقلك إلى الأخيرة.
ومن لا يرى الشاشة يحتاج إلى أن يعرف أين هو، فإذا وضعت مؤشّرًا مثل «2 من 4» داخل منطقة aria-live="polite" قرأه قارئ الشاشة بعد كل انتقال، فيعرف المستخدم موضعه وعدد الشرائح معًا.
انتبه: باقي القسمة في JavaScript يحتفظ بإشارة العدد، فناتج -1 % 4 هو -1 وليس 3، لذلك تحتاج عند الرجوع من الشريحة الأولى إلى (i + n) % n.
المطلوب
اجعل #next و#prev يُظهران الشريحة التالية والسابقة بالدوران، وأضف hidden إلى بقية الشرائح، ثم اكتب الموضع في #status بالصيغة 3 من 4، واجعله منطقة aria-live="polite".
الفحوص
6 فحوص- شريحة واحدة فقط ظاهرة وهي الأولى
- «التالي» يُظهر الشريحة التالية وحدها
- المؤشّر يعلن الموضع «3 من 4»
- «التالي» بعد الأخيرة يعود إلى الأولى
- «السابق» قبل الأولى يذهب إلى الأخيرة
- المؤشّر منطقة حيّة