קריטריון 1.3.2: רצף בעל משמעות רמה A

בקצרה

קריטריון 1.3.2 רצף בעל משמעות (Meaningful Sequence, רמה A) דורש שכאשר סדר הצגת התוכן משפיע על הבנתו, הסדר הנכון יהיה ניתן לקביעה תכנותית - כלומר שסדר האלמנטים ב-DOM ישקף את הסדר ההגיוני. זהו קריטריון מחייב לפי ת"י 5568.

פרטי הקריטריון

מספר1.3.2
שםרצף בעל משמעות (Meaningful Sequence)
רמהA
גרסהWCAG 2.0
עיקרון1 - מורגש (Perceivable)
הנחיה1.3 - ניתן להתאמה
מחייב לפי ת"י 5568כן

מה דורש קריטריון 1.3.2?

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

  • עמודות טקסט מרובות - בפריסת עמודות CSS, סדר ה-DOM חייב לשקף את סדר הקריאה הנכון (במערכות RTL - מימין לשמאל).
  • טפסים - שדות ה-DOM צריכים להיות מסודרים בסדר ההגיוני שבו ימלא אותם המשתמש.
  • תוכן ממוקם ב-CSS - שימוש ב-position: absolute/fixed או ב-CSS Grid/Flexbox שמשנה את הסדר החזותי מסדר ה-DOM.
  • טבלאות לפריסה - אם משתמשים בטבלה לפריסה (נוהג שאינו מומלץ), סדר התאים ב-DOM חייב להיות הגיוני.

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

למי זה עוזר?

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

איך עומדים בקריטריון?

  • ודאו שסדר האלמנטים ב-HTML מקור משקף את הרצף ההגיוני לקריאה והבנה.
  • הימנעו משימוש ב-order ב-CSS Flexbox/Grid לשינוי סדר חזותי ללא שינוי ה-DOM המקביל.
  • אל תשתמשו ב-position: absolute כדי "לקפץ" אלמנטים למיקום שאינו תואם את מקומם ב-DOM.
  • בפריסת עמודות - בדקו שסדר ה-DOM הוא מימין לשמאל (ב-RTL) ולא מלמעלה-למטה בכל עמודה.
  • בטבלאות נתונים - וודאו שסדר הקריאה הנכון מתקבל גם בקריאה שורה אחר שורה של ה-DOM.

טיפ

בדיקה פשוטה: כבו את ה-CSS בדפדפן ובחנו אם התוכן עדיין קריא ומובן בסדרו. אם לא - כנראה שיש בעיה ברצף ה-DOM.

איך בודקים?

  • בדיקה ידנית: הסירו עיצוב CSS (ב-DevTools: פאנל "Styles" - בטלו את ה-Stylesheet) ובדקו שהסדר הגיוני.
  • קורא מסך (NVDA / VoiceOver): קראו את הדף ליניארית ובדקו שהרצף מובן.
  • בדיקת קוד מקור: בחנו את סדר האלמנטים ב-HTML ישירות, במיוחד כשיש שימוש ב-CSS Grid, Flexbox, או Positioning.
  • כלים אוטומטיים: axe ו-WAVE אינם תמיד מזהים בעיות רצף - נדרשת בדיקה ידנית.

שאלות נפוצות

מה דורש קריטריון 1.3.2?

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

מהי רמת הקריטריון 1.3.2?

רמה A - הרמה הבסיסית. הקריטריון נכלל ב-WCAG 2.0 ולכן מחייב לפי ת"י 5568.

מתי CSS positioning יוצר בעיה של 1.3.2?

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

מקורות

צריכים לעמוד בקריטריון הזה באתר שלכם?

ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.

לצ'ק-ליסט הנגישות