יצירת קרוסלות נגישות

Robert Flack

Penny McLachlan

Lucas Radaelli

פורסם: 29 בספטמבר 2025

אהבתם או לא אהבתם, קרוסלות הן דפוס נפוץ ומבוקש. לכן, כשמטמיעים קרוסלה, היא צריכה להיות חזקה ונגישה. הוא צריך להיות אינטראקטיבי כבר בהצגה הראשונית, דקלרטיבי כדי שיהיה קל יותר לתחזק אותו, ולכלול מבנה סמנטי שנבדק באמצעות טכנולוגיות מסייעות.

עם זאת, הנגשת קרוסלות לרוב מאתגרת. ניהול המיקוד, קבלת ההודעות הנכונות מקורא המסך וטיפול ברכיבים אינטראקטיביים שלא מוצגים במסך הם תהליכים מורכבים, ולכן קרוסלות באתרים רבים לא נגישות. האתגרים האלה הובילו את צוות Chrome לעבוד על קרוסלות CSS אינטראקטיביות כחלק מ-CSS Overflow Module Level 5, שהושק ב-Chrome 135.

אחרי ההשקה הראשונית של התכונה ב-Chrome, קיבלנו הרבה תגובות מהקהילה, ואנחנו פועלים כדי לטפל בהן. הגרסה הזו כוללת פונקציונליות חדשה, כמו תמיכה במצבי סמן גלילה נפרדים וניווט, וגם תיקוני באגים רבים. לדוגמה:

• תמיכה במונים בטקסט חלופי, שנוספה ב-Chrome 140.
• תוקנה בעיה שבה קוראי מסך לא קראו נכון את ::scroll-button state מושבת.
• מוודאים שהרכיב ::scroll-marker מקבל שם תווית ARIA מערך התוכן.
• תוקן באג שבו כל ::scroll-marker פסאודו-אלמנטים נקראו כ'נבחרו'.

אנחנו מאמינים שהתכונות ב-CSS Overflow 5 יכולות ליצור קרוסלות חזקות ונגישות שהן אינטראקטיביות כבר מהרגע הראשון שהן מוצגות. בפוסט הזה נסביר איך לעשות את זה, ונתמקד בשימוש בתכונות האלה כדי לפתור בעיות נגישות קיימות.

למבוא כללי יותר לקרוסלות, אפשר לעיין במאמר קרוסלות עם CSS. חשוב לזכור: אי אפשר להבטיח שכל ממשק משתמש יהיה נגיש כברירת מחדל, ותמיד צריך לבדוק את הנגישות של הדפים.

איזה סוג קרוסלה דרוש לך?

לפני שמתחילים לכתוב קוד, חשוב לדעת איזה סוג קרוסלה רוצים ליצור. האסטרטגיה הנכונה לנגישות תלויה באופן שבו המשתמש אמור לחוות את התוכן. בפוסט הזה נסביר על שלושה סוגים נפוצים:

קרוסלות עם פריט יחיד

בסוג הזה של קרוסלות, רק שקף אחד גלוי במלואו ואינטראקטיבי בכל פעם (לדוגמה, באנרים ראשיים או מצגות).

קרוסלות עם מספור עמודים אוטומטי

קרוסלות עם מספור עמודים אוטומטי מציגות 'דפים' של תוכן, כמו רשימה של מוצרים או תוכניות טלוויזיה.

קרוסלות עם כמה פריטים

בקרוסלות עם כמה פריטים, אפשר לראות כמה פריטים בקרוסלה בבת אחת, אבל עדיין אפשר לגלול בין הפריטים בנפרד בלי חלוקה לדפים.

לכל סוג של קרוסלה יש שיקולים שונים בנושא נגישות ושיטות מומלצות שונות.

קרוסלות עם פריט יחיד

זוהי מצגת קלאסית. אפשר לקרוא רק רכיב צאצא אחד בכל פעם, אבל במקרים רבים המשתמשים יראו הצצה לפריט הבא או הקודם כדי לקבל רמזים לגבי תוכן נוסף. המטרה היא לוודא שרק השקף המרכזי שמוצג במלואו הוא אינטראקטיבי.

כך הופכים את התוכן לנגיש, שלב אחר שלב.

שלב 1: הגדרת מיקוד יחיד באמצעות הצמדה לגלילה

כדי להבטיח שמאגר הגלילה תמיד יתמקם על שקף ולא ישאיר פריט תקוע באמצע, אפשר להשתמש בCSS scroll snapping. כך, אחרי גלילה, הפריט 'נצמד' בצורה מושלמת למיקום הנכון שלו, ונוצרת חוויית משתמש חלקה.

.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: הפיכת השקף הגלוי בלבד לאינטראקטיבי

זה חשוב מאוד לנגישות, כי זה מונע מהמשתמשים להגיע בטעות ללחצנים או לקישורים בשקפים שלא מוצגים במסך באמצעות מקש Tab. כדי לעשות את זה, משתמשים בשאילתת המאגר החדשה 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" בתוכו. התוכן של חלונית הכרטיסיות הזו מתעדכן בהתאם לכרטיסייה או לדף הפעילים.

<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). כל התוכן שמוצג צריך להישאר בעץ הנגישות ולהיות נגיש באמצעות מקש Tab במקלדת.

סיכום

‫CSS Overflow 5 מאפשר לכם ליצור באופן הצהרתי דפוסי קרוסלה אינטראקטיביים נפוצים עם פחות בעיות נגישות. שילוב של HTML סמנטי, CSS מודרני כמו מצב גלילה ואינטראקטיביות, ותפקידי ARIA מתאימים מאפשר ליצור חוויות נגישות עם ביצועים גבוהים ואינטראקטיביות כבר בטעינה הראשונית של הדף.

כדאי לנסות את ממשקי ה-API החדשים האלה. כמו תמיד, למרות שהתבניות וממשקי ה-API האלה נועדו להקל על יצירת רכיבים אינטראקטיביים, מהירים ונגישים, אין תחליף לבדיקות נגישות מלאות. תמיד צריך לוודא שהקוד נגיש ופועל בהתאם ליעד הבסיסי.