انتقل إلى محتوى الدرس

Accessible Loading Skeletons مؤشرات التحميل وإتاحة aria-busy

صمّم واجهات React غير متزامنة تغطي مؤشرات التحميل المتاحة، ورسائل الخطأ الآمنة للمستخدم، وأزرار إعادة المحاولة، وحالة القائمة الفارغة عبر متغير حالة موحد.
2 صفوف تعليمية
ReactJS
3 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تؤدي أيقونات الدوران الصغيرة غير المحجوزة المساحة إلى قفز الفقرات والأزرار لأسفل فور وصول البيانات، مما يضر باستقرار التخطيط البصري. يُفضل دائماً رسم بطاقات هيكلية هادئة (Skeleton Placeholders) تحجز ارتفاعاً قريباً من البطاقات الفعلية.

ولتحقيق معايير الوصول الشامل، أضف السمتين aria-busy="true" وaria-live="polite" إلى حاوية الانتظار حتى تُعلم قارئات الشاشة المستخدم باكتمال التحميل بهدوء ودون مقاطعة.

الصف 2 معاينة حية