סדר התוכן במסמך חשוב להשגת נגישות האתר. קורא מסך יקריא תוכן על סמך סדר המסמך, באמצעות רכיבי ה-HTML שבחרתם כדי להעניק משמעות לתוכן הזה. אדם שמנווט באתר באמצעות מקלדת, במקום מסך מגע או עכבר, ימשיך לנווט במסמך. במילים אחרות, הם יעברו מהרכיב הפעיל לרכיב הפעיל, ויעברו עם טאב בין קישורים לשדות טופס, שוב לפי הסדר שבו הם קיימים במסמך.
לכן, השלב הראשון ביצירת אתר נגיש הוא להתחיל במסמך בנוי היטב ושימוש בכל רכיבי ה-HTML הנכונים. עם זאת, אפשר לבטל חלק מהפעולות הטובות האלה כשמתחילים להשתמש ב-CSS. בואו נראה את הסיבה לכך.
סדר התצוגה לפי המקור לעומת הסדר החזותי
ניווט באתר מסומן בדרך כלל כרשימה של קישורים. לאחר מכן אפשר להשתמש ב-Flexbox כדי להפוך את העמודות האלה לסרגל אופקי. בדוגמה של התקלה שבהמשך, יצרתי את הדפוס הנפוץ הזה. לוחצים כדי להיכנס לדוגמה ומקישים על Tab בין הקישורים. המיקוד יעבור בכיוון לוגי משמאל לימין, לפי הסדר שבו אנחנו קוראים באנגלית.
אם יצרתם דפוס כזה והתבקשתם להעביר לסוף, את האפשרות Contact Us (יצירת קשר במקום השני במקור), אפשר להשתמש בנכס order שפועל ב-Flexbox.
אפשר לנסות להקיש על Tab כדי לעבור בין הפריטים בדוגמה הבאה, שבה נעשה שימוש במאפיין order כדי לסדר מחדש את הפריטים.
המיקוד לדלג לפריט האחרון ואז בחזרה. מבחינת סדר הכרטיסיות, הפריט הוא הפריט השני. אבל מבחינה חזותית, זהו הפריט האחרון.
הדוגמה שלמעלה מדגישה את הבעיה שבה אנחנו נתקלים אם אנחנו מארגנים מחדש את התוכן או משנים את הסדר שלו באמצעות CSS. אם פתרתם את הבעיה הזו, הדבר הנכון הוא לשנות את הסדר במקור במקום להשתמש ב-CSS.
אילו מאפייני CSS עשויים לגרום לשינוי הסדר?
כל שיטת פריסה שמאפשרת להזיז רכיבים בתמונה עלולה לגרום לבעיה הזו. מאפייני ה-CSS הבאים גורמים בדרך כלל לבעיות הקשורות לסידור התוכן מחדש:
- שימוש ב-
position: absoluteוהוצאת פריט לזרום באופן חזותי. - הנכס
orderב-Flexbox ובפריסת Grid. - הערכים
row-reverseו-column-reverseעבורflex-directionב-Flexbox. - הערך
denseשלgrid-auto-flowבפריסת רשת. - כל מיקום לפי שם או מספר של קו, או עם
grid-template-areasבפריסת רשת.
בדוגמה הבאה יצרתי פריסה באמצעות רשת CSS ומיקמתי את הפריטים באמצעות מספרי שורות, בלי להביא בחשבון את המיקום שלהם במקור.
אפשר להקיש על מקש Tab כדי לראות איך המיקוד קופץ. זה יוצר חוויה מבלבלת מאוד, במיוחד אם מדובר בדף ארוך.
בדיקת הבעיה
בדיקה פשוטה מאוד היא ניווט באמצעות המקלדת בדף. יש לכם גישה לכל הפרטים? האם יש קפיצות מוזרות בזמן הכניסה?
להדגמה חזותית של שינוי סדר התוכן, נסו את הכלי לבדיקת עצירת כרטיסיות בתוסף מדדי נגישות ב-Chrome. בתמונה הבאה מוצגת דוגמה לרשת CSS בכלי הזה. אפשר לראות איך המיקוד צריך לדלג בין הפריסה של הפריסה.
סידור מחדש של תוכן ועיצוב אינטרנט רספונסיבי
אם יש לכם רק מצגת אחת של התוכן, בדרך כלל קשה להציג את המקור בסדר לוגי, ולשקף את זה בפריסה. התהליך עשוי להיות קשה יותר כשלוקחים את הפריסה בנקודות עצירה שונות. לדוגמה, יכול להיות הגיוני שרכיב יועבר לתחתית הפריסה במסכים קטנים יותר.
בשלב זה אין פתרון טוב לבעיה הזו. ברוב המקרים, המפתח "נייד קודם" יעזור לך לשמור על הסדר של המקור והפריסה. הבחירות שלכם לגבי עדיפות בניידים הן לעיתים קרובות נכונות לגבי התוכן באופן כללי. חשוב לשים לב כשיש אפשרות לסידור מחדש של תכנים מהסוג הזה, ולבדוק שחוויית הסיום לא צורמת מדי בכל נקודת עצירה.