إنشاء لوحات دوّارة مناسبة لذوي الاحتياجات الخاصة

Robert Flack

Penny McLachlan

Lucas Radaelli

تاريخ النشر: 29 سبتمبر 2025

سواء كنت من محبّي البطاقات الدوّارة أو لا، فهي نمط مستخدَم ومطلوب على نطاق واسع. لذلك، عند تنفيذ لوحة عرض دوّارة، يجب أن تكون قوية وسهلة الاستخدام. يجب أن يكون المحتوى تفاعليًا عند أول عرض، وأن يكون تعريفيًا لتسهيل صيانته، وأن يتم إنشاؤه باستخدام بنية دلالية يتم اختبارها باستخدام التكنولوجيات المساعدة.

ومع ذلك، غالبًا ما يكون توفير إمكانية الوصول إلى العروض الدوّارة أمرًا صعبًا. إنّ إدارة التركيز وتلقّي الإشعارات من قارئ الشاشة بشكل صحيح والتعامل مع العناصر التفاعلية خارج الشاشة أمر معقّد، لذا لا يمكن الوصول إلى لوحات العرض الدوّارة على العديد من المواقع الإلكترونية. دفعت هذه التحديات فريق Chrome إلى العمل على لوحات دوّارة تفاعلية بلغة CSS كجزء من وحدة CSS Overflow من المستوى 5، والتي تم طرحها في الإصدار 135 من Chrome.

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

• إتاحة استخدام العدادات في النص البديل، وهي ميزة تم طرحها في الإصدار 140 من Chrome
• تم إصلاح المشكلة المتمثلة في عدم قراءة ::scroll-button state غير مفعَّل بشكل صحيح على برامج قراءة الشاشة.
• التأكّد من أنّ ::scroll-marker يحصل على اسم تصنيف ARIA من قيمة المحتوى
• تم إصلاح خطأ كان يؤدي إلى قراءة جميع ::scroll-marker العناصر الزائفة على أنّها "محدّدة".

نعتقد أنّ الميزات المتوفّرة في CSS Overflow 5 يمكن أن تنشئ لوحات دائرية قوية وسهلة الاستخدام وتتضمّن عناصر تفاعلية عند عرض الصفحة لأول مرة. توضّح لك هذه المشاركة كيفية إجراء ذلك مع التركيز على كيفية استخدام هذه الميزات لحل مشاكل تسهيل الاستخدام التي طال أمدها.

للاطّلاع على مقدمة عامة حول لوحات العرض الدوّارة، يمكنك قراءة المقالة لوحات العرض الدوّارة باستخدام CSS. تذكَّر أنّه لا يمكن ضمان إمكانية الوصول إلى أي واجهة مستخدم بدون الحاجة إلى إجراء أي تعديلات، بل عليك دائمًا اختبار إمكانية الوصول إلى صفحاتك.

ما هو نوع لوحة العرض الدوّارة التي تحتاج إليها؟

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

لوحات العرض الدوّارة التي تحتوي على عنصر واحد

في منصات العرض الدوّارة التي تتضمّن عنصرًا واحدًا، لا يظهر سوى شريحة واحدة بشكل كامل ويمكن التفاعل معها في كل مرة (على سبيل المثال، إعلانات البانر الرئيسية أو عروض الشرائح).

لوحات العرض الدوّارة المقسّمة تلقائيًا إلى صفحات

تعرض العروض الدوّارة المقسّمة تلقائيًا إلى صفحات "صفحات" من المحتوى، مثل قائمة بالمنتجات أو البرامج التلفزيونية.

لوحات العرض الدوّارة التي تتضمّن عناصر متعددة

في لوحات العرض الدوّارة التي تتضمّن عناصر متعدّدة، تظهر عناصر متعدّدة في لوحة العرض الدوّارة في الوقت نفسه، ولكن يمكنك التنقّل بينها بشكل فردي بدون تقسيم إلى صفحات.

لكل نوع من أنواع لوحات العرض الدوّارة اعتبارات مختلفة بشأن تسهيل الاستخدام وأفضل الممارسات.

لوحات العرض الدوّارة التي تحتوي على عنصر واحد

هذا عرض شرائح تقليدي. من المفترض أن يتم قراءة عنصر ثانوي واحد في كل مرة، ولكن في كثير من الحالات، سيرى المستخدمون "لمحة" عن العنصر التالي أو السابق لتقديم إشارات سياقية حول المحتوى الإضافي. والهدف هو التأكّد من أنّ الشريحة الوسطى المرئية بالكامل فقط هي التفاعلية.

في ما يلي كيفية إتاحة الوصول إلى هذه البيانات، خطوة بخطوة.

الخطوة 1: فرض تركيز واحد باستخدام ميزة "محاذاة التمرير"

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

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

الخطوة 2: الإعلان عن التغييرات في لوحة العرض الدوّارة والشرائح

يحتاج المستخدم الذي يستعين بقارئ شاشة إلى معرفة أنّه دخل إلى لوحة دوّارة ومتى تتغيّر الشريحة. يتطلّب ذلك توفّر بعض سمات ARIA في حاوية لوحة العرض الدوّارة:

في ما يلي بنية HTML:

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

الخطوة 3: جعل الشريحة المرئية فقط تفاعلية

وهذا أمر بالغ الأهمية لتسهيل الاستخدام، لأنّه يمنع المستخدمين من الانتقال عن طريق الخطأ إلى الأزرار أو الروابط في الشرائح غير الظاهرة على الشاشة. لتحقيق ذلك، استخدِم طلب البحث الجديد الخاص بالحاوية scroll-state والسمة interactivity.

أولاً، اجعل كل عنصر من عناصر الشريحة غير تفاعلي تلقائيًا باستخدام interactivity: inert. بعد ذلك، استخدِم طلب بحث الحاوية scroll-state لاستهداف الشريحة التي يتم حاليًا "محاذاتها" في إطار العرض وضبط محتواها على interactivity: auto.

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

باستخدام CSS هذا، يحدّد المتصفّح تلقائيًا العناصر التي يمكن التركيز عليها. لن تحتاج إلى JavaScript بعد الآن لإدارة tabindex. يجعل طلب البحث scroll-state كل الشرائح غير الشريحة الحالية غير نشطة.

لوحات عرض دوّارة مقسّمة إلى صفحات

يتم استخدام هذا النمط غالبًا لمعارض المنتجات أو الخيارات التي يتم فيها تجميع المحتوى في صفحات. يمكن التعامل مع تسهيل الاستخدام بطريقتَين، وذلك حسب الطريقة التي تريد عرض المحتوى بها.

لوحة عرض دوّارة تتضمّن صفحات منفصلة

استخدِم حاوية تتضمّن role="region" مع عنصر واحد يتضمّن role="tabpanel". سيعدّل عنصر tabpanel هذا محتواه ليعكس علامة التبويب أو الصفحة النشطة.

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

لإدارة التفاعلية، استخدِم حيلة ذكية للحركة مرتبطة view() بالمخطط الزمني. يضمن ذلك ألا يصل ترتيب علامات التبويب إلا إلى العناصر المرئية حاليًا على الشاشة.

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

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

إذا كان المحتوى عبارة عن قائمة بشكل أساسي، استخدِم العنصر <ul> للحصول على الدلالات الصحيحة.

على سبيل المثال:

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

في هذا النمط، لا تستخدِم خاصية التفاعل لجعل المحتوى خارج الشاشة غير نشط. سيؤثر ذلك في عدد العناصر التي تعلن عنها برامج قراءة الشاشة، لذا يجب أن يظل كل المحتوى في شجرة تسهيل الاستخدام.

لوحات العرض الدوّارة التي تتضمّن عناصر متعددة

هذا النمط مخصّص لعناصر العرض الدوّار التي يمكن فيها عرض وقراءة عدة عناصر ثانوية في الوقت نفسه. على سبيل المثال، رفّ "المنتجات ذات الصلة" على موقع للتجارة الإلكترونية.

تختلف طريقة عمل هذه اللوحات الدوّارة حسب إجابتك عن السؤال التالي: هل تريد توجيه تركيز المستخدم إلى عنصر واحد في كل مرة، أم تريد السماح له بالوصول إلى كل المحتوى المرئي بحرية؟

النمط 1: عنصر تفاعلي واحد ضمن العناصر المرئية

في هذا النموذج، تكون عناصر متعددة مرئية، ولكن العنصر الأساسي أو "الحالي" فقط هو التفاعلي. العناصر الأخرى المرئية غير نشطة. يفيد هذا النمط في توجيه المستخدم خلال مجموعة من العناصر واحدًا تلو الآخر.

لإنشاء هذا العنصر بشكل صحيح، عليك استخدام نمط تسهيل الاستخدام نفسه الذي تمّت مناقشته سابقًا في ما يتعلّق بلوحة العرض الدوّارة التي تتضمّن عنصرًا واحدًا. ويشمل ذلك ما يلي:

• استخدِم طلب بحث عن حاوية بحالة التمرير لتطبيق التفاعل: من غير نشط إلى العناصر غير النشطة.
• أضِف مساحة كافية حول العناصر لضمان إمكانية محاذاة كل عنصر مع الموضع الأساسي (على سبيل المثال، منتصف نافذة العرض القابلة للتمرير). يؤدي ذلك إلى جعل نموذج التنقّل واحدًا تلو الآخر يبدو مقصودًا وسلسًا.

النمط 2: جميع العناصر المرئية تفاعلية

إذا كان هدفك هو السماح للمستخدمين بالتفاعل بحرية مع جميع العناصر المرئية، فإنّ أفضل ممارسة هي التأكّد من أنّ أيًا من المحتوى ليس غير تفاعلي.

بالنسبة إلى هذا النمط:

• استخدِم عنصر <ul> إذا كان المحتوى عبارة عن قائمة من الناحية الدلالية، لأنّ ذلك يوفّر السياق الصحيح لمستخدمي برامج قراءة الشاشة.
• لا تستخدِم إدارة التفاعل (interactivity: inert). يجب أن يظل كل المحتوى المرئي في شجرة تسهيل الاستخدام وأن يكون قابلاً للوصول إليه باستخدام التنقّل بلوحة المفاتيح.

ملخص

تتيح لك CSS Overflow 5 إنشاء أنماط شائعة وتفاعلية للوحات العرض الدوّارة بشكل تصريحي، مع تقليل المشاكل المتعلقة بإمكانية الوصول. من خلال الجمع بين HTML الدلالي وCSS الحديثة، مثل حالة التمرير والتفاعل، وأدوار ARIA المناسبة، يمكنك إنشاء تجارب عالية الأداء وسهلة الاستخدام وتفاعلية عند أول عرض.

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