נגישות: בדיקה והתאמה של סדר ה-DOM של אתר
6 דקות
סדר ה-DOM של אתר הוא הסדר שבו קוראי מסך ומקש ה-Tab מדגישים ו/או "קוראים" את התוכן בעמוד. הסדר צריך להיות הגיוני, כדי להבטיח שהגולשים יקבלו את החוויה הטובה ביותר באתר, ויוכלו לנווט בו וליהנות מהתוכן שלו.
סדר DOM באתרים
DOM הוא סדר הטעינה והקריאה של אלמנטים בעמודי האתר. Wix מגדירה באופן אוטומטי את סדר ה-DOM על סמך הסדר הוויזואלי של האלמנטים. כשאנחנו מפתחים את כלי הנגישות שלנו, אנחנו בודקים את המוצרים שלנו באמצעות קוראי המסך הבאים:
- Windows + Firefox או Chrome: NVDA (קורא חינמי)
- iOS + Safari: Voiceover (קורא מובנה)
המשמעות היא שכאשר יצרנו את סדר ה-DOM האוטומטי של האתר, הבאנו בחשבון את הפונקציות של היישומים האלה.
למה סדר ה-DOM חשוב?
חלק מהגולשים עשויים להשתמש בקוראי מסך ובטכנולוגיות מסייעות אחרות כדי לנווט באתר. הטכנולוגיות הללו עוזרות לגולשים עם לקויות ובעיות ראייה בכך שהן סורקות את תוכן האתר ומקריאות אותו בקול רם.
גולשים שמשתמשים בקוראי מסך וגולשים עם קשיי ניידות עשויים להשתמש במקש ה-Tab כדי לנווט בתוכן האתר. לכן, סדר ה-DOM של האתר חשוב לגולשים שמשתמשים בקוראי מסך ו/או במקש ה-Tab, מכיוון שהם צריכים להיות בעלי יכולת לנווט באתר בסדר הגיוני.
לדוגמה, תפריט האתר אמור להופיע ראשון, אחריו שאר האלמנטים שבראש העמוד, אחריהם כותרת העמוד, ואז שאר התוכן של העמוד וכו'. אם סדר ה-DOM שגוי, הוא עלול לגרום לקורא המסך ו/או למקש ה-Tab לדלג על חלק מהתוכן בעמוד או לקפוץ בין אלמנטים בצורה לא הגיונית.
רוצים לבדוק את סדר ה-DOM של האתר?
אפשר לבדוק את סדר ה-DOM האוטומטי של האתר באמצעות שימוש במקש ה-Tab במקלדת או בקורא מסך על הגרסה של האתר הפעיל.
DOM אוטומטי באשף הנגישות
כשתפתחו את אשף הנגישות ב-Studio Editor, יכול להיות שתראו אפשרות לארגן את סדר ה-DOM שלו באופן אוטומטי. מומלץ לבחור באפשרות הזאת, מכייוון שהיא מבטיחה שהסריקה של האשף והמשימות שייווצרו בעקבותיה יהיו נכונות.
לא רואים את תיבת הסימון הזו?
האפשרות לארגן את ה-DOM של האתר לא תעבוד אם:
- האתר נוצר אחרי תחילת נובמבר 2024.
- ארגנתם בעבר את ה-DOM של האתר עם אשף הנגישות.
- ביטלתם את ה-DOM האוטומטי באתר.
שינוי ידני של סדר ה-DOM באתר
אם שמתם לב שסדר ה-DOM של האתר לא הגיוני, אתם יכולים לערוך אותו ידנית כדי להבטיח חוויה משופרת עבור הגולשים.
השתמשו בחלונית הנגישות (Accessibility Wizard) ובחלונית ה-Layers (שכבות) כדי לשנות את ה-DOM באתרי Wix Editor. אם אתם בונים אתר ב-Studio Editor, אתם יכולים לשנות את הסדר באמצעות החלוניות Layers (שכבות) ו-Pages (עמודים) של האתר.
חשוב:
אם סדר ההתקדמות של ה-Tab הגיוני, אתם לא צריכים לעשות שום דבר. אם הסדר נכון ותשנו אותו, אתם עלולים לפגוע בחוויית הגלישה של המשתמשים בקורא מסך ו/או במקש ה-Tab.
כדי לשנות את סדר ה-DOM:
Studio Editor
Wix Editor
מכיוון ש-Wix מגדירה באופן אוטומטי סדר DOM עבור האתר שלכם, אתם צריכים לבטל אותה באשף הנגישות. לאחר מכן תוכלו לשנות ידנית את סדר ה-DOM של האלמנטים בחלונית ה-Layers (שכבות) של האתר לפי הצורך.
כדי לארגן ידנית את סדר ה-DOM:
- עברו ל-editor.
- הקליקו על Settings (הגדרות) למעלה ובחרו באפשרות Accessibility Wizard (אשף הנגישות).
- בחרו באפשרות Scan Site (סריקת אתר) באשף מימין.
- הקליקו על הלשונית Detected issues (בעיות שזוהו).
- בחרו באפשרות Site level (רמת האתר).
- הקליקו על Organize DOM order (ארגון סדר ה-DOM).
- בחרו באפשרות Manually (ידנית).
- הקליקו על Apply (אישור).
- בחרו באפשרות Layers (שכבות)
ב-editor משמאל למטה. - עברו על הרשימה ומחקו את האלמנטים המיותרים, כולל אלמנטים כפולים שאין להם שימוש באתר ויכולים לבלבל את מי שמשתמש בקורא מסך.
- גררו ושחררו את שאר האלמנטים בסדר הרצוי.
השלב הבא:
פתחו את Editor המובייל וחזרו על אותם שלבים.
שימו לב:
- כשגולשים מנווטים באתר באמצעות מקש ה-Tab, הם עוברים רק בין האלמנטים האינטראקטיביים ולא בין האלמנטים הסטטיים, כמו טקסט. אם אתם רוצים לבדוק איך קורא מסך מתנהג עם אלמנטים סטטיים כמו טקסט, היעזרו במרכז התמיכה של קורא המסך כדי להבין איך מנווטים באתר באמצעות מקלדת.
- אלמנטים מוצמדים ממוקמים אוטומטית בסוף הרצף של התקדמות ה-Tab. אם אתם רוצים להקדים את המיקום של אלמנט ברצף ה-Tab, כדאי לבטל את ההצמדה שלו ולמקם אותו בראש העמוד.
מה השלב הבא?
חזרו לצ'קליסט הנגישות כדי להמשיך לעבוד על נגישות האתר.
שפת האתר ו-DOM
לשפות שונות יש כיווני קריאה שונים (למשל באנגלית זה משמאל לימין, ובעברית מימין לשמאל). אם שיניתם את השפה של אתר לשפה עם כיוון קריאה שונה, יכול להיות שהסדר הוויזואלי וה-DOM כבר לא מיושרים.
מומלץ להפעיל את האפשרות האוטומטית של DOM באשף הנגישות כדי להבטיח שסדר האלמנטים יתאים לכיוון הקריאה של שפת האתר.
חשוב:
אם באתר יש תוכן שנכתב גם בשפות משמאל לימין וגם בשפות מימין לשמאל, מומלץ לערוך ידנית את סדר ה-DOM במקום זאת.
כדי להפעיל את ה-DOM האוטומטי באשף:
- סרוק את האתר עם אשף הנגישות.
- הקליקו על הלשונית Detected issues (בעיות שזוהו).
- בחרו באפשרות Site level (רמת האתר).
- הקליקו על Organize DOM order (ארגון סדר ה-DOM).
- בחרו באפשרות Automatically (Recommended) (מומלץ אוטומטית).
- הקליקו על Apply (אישור).
- (לא חובה) בדקו את התצוגה הוויזואלית של האלמנטים באתר כדי לוודא שהם מיושרים.
שימו לב:
- אפשרות זו יכולה לשנות את התצוגה הוויזואלית של אלמנטים, ולכן מומלץ לבדוק את השינויים כדי לוודא שהאתר נראה כמו שאתם רוצים.
- הפיצ'ר הזה לא תומך בכל הרכיבים באתר, ויכול להיות שתצטרכו לשנות את כיוון הקריאה שלהם ידנית.
התחרטתם?
מה-editor אפשר לבטל את סדר ה-DOM האוטומטי:
- Wix Editor: הקליקו על סמל הביטול
בסרגל העליון של ה-editor.
הערה: האפשרות הזו רלוונטית רק אם הפעולה האחרונה שביצעתם הייתה ארגון מחדש אוטומטי של ה-DOM. - Studio Editor: שחזור גרסה קודמת של האתר מהיסטוריית האתר.