קריטריון 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, ולא לפי המיקום החזותי.
מקורות
- W3C - Understanding SC 1.3.2 Meaningful Sequence (w3.org/WAI)
- W3C - How to Meet WCAG (Quick Reference) (w3.org/WAI/quickref)
צריכים לעמוד בקריטריון הזה באתר שלכם?
ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.
לצ'ק-ליסט הנגישות