مولّد دوّامة CSS يمكن الوصول إليها

ما الذي تغطيه الشيفرة CSS المولّدة وما الذي لا تغطيه

تمنحك الأداة الجزء المرئي: دائرة بحدود ودوران. المؤشر المرئي وحده لا معنى له لتقنيات المساعدة، لأن العنصر فارغ. تأتي إمكانية الوصول من الترميز وقاعدة CSS إضافية تضيفها حوله.

ترميز يعلن حالة التحميل

<div class="loader" role="status" aria-label="جارٍ تحميل النتائج"></div>

يحدد role="status" العنصر كمنطقة حيّة، فيعلن كثير من قارئات الشاشة تسميته عند ظهوره. ينبغي أن تصف aria-label ما يجري تحميله، مثل “جارٍ تحميل النتائج” أو “جارٍ الحفظ”، لا كلمة عامة. أزل العنصر عند انتهاء العمل، واعرض المحتوى الجديد.

يمكنك أيضاً وضع نص مرئي بجوار الحلقة. يساعد النص المرئي الجميع، بمن فيهم من لا يرون الحركة بوضوح.

احترم تقليل الحركة

يفعّل بعض الزوار إعداداً في النظام يطلب من المواقع تقليل الرسوم المتحركة. احترمه بواسطة استعلام وسائط يوضع بعد الشيفرة المولّدة:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

تُبطئ هذه القاعدة الدوران بدلاً من إلغائه، فيبقى المؤشر حياً دون حركة سريعة. إذا فضّلت إشارة ثابتة، فاستخدم animation: none; واعرض النص “جارٍ التحميل” بجوار الحلقة.

قائمة تحقق للتباين والحجم

القيود

• تختار الأداة لون المسار (#eee) نيابةً عنك. عدّله في الشيفرة CSS الملصوقة إذا كانت خلفية صفحتك قريبة منه.
• قيمة سرعة عالية جداً تجعل الحلقة ترتعش. تجنب أي قيمة أقل من نحو 0.5 ثانية.
• لا تعتمد على الدوّامة وحدها في الانتظار الطويل. أخبر الناس بما يحدث بالنص.

اختبر ذلك بسرعة

فعّل خيار تقليل الحركة في نظام التشغيل ثم أعد تحميل الصفحة: يجب أن تدور الحلقة ببطء أكبر. بعد ذلك تنقّل في الصفحة بمفتاح Tab لتتأكد من أن الدوّامة لا تسحب التركيز أبداً من الأداة التي يستخدمها الزائر. أخيراً، شغّل قارئ شاشة وفعّل حالة التحميل مرة واحدة، لتسمع هل تُعلن التسمية عند ظهور العنصر، وهل يمكن الوصول إلى المحتوى الجديد بعد ذلك.