נגישות: בדיקה והתאמה של סדר ה-DOM של אתר
5 דקות
סדר ה-DOM של אתר הוא הסדר שבו קוראי מסך ומקש ה-Tab מדגישים ו/או "קוראים" את התוכן בעמוד. הסדר צריך להיות הגיוני, כדי להבטיח שהגולשים יקבלו את החוויה הטובה ביותר באתר, ויוכלו לנווט בו וליהנות מהתוכן שלו.
סדר DOM באתרים
DOM הוא סדר הטעינה והקריאה של אלמנטים בעמודי האתר. Wix מגדירה אוטומטית סדר DOM על סמך הסדר הוויזואלי של האלמנטים ברוב השפות – משמאל לימין ומלמעלה למטה. כשאנחנו מפתחים את כלי הנגישות שלנו, אנחנו בודקים את המוצרים שלנו באמצעות קוראי המסך הבאים:
- Windows + Firefox או Chrome: NVDA (קורא חינמי)
- iOS + Safari: Voiceover (קורא מובנה)
המשמעות היא שכאשר יצרנו את סדר ה-DOM האוטומטי של האתר, הבאנו בחשבון את הפונקציות של היישומים האלה.
חשוב:
סדר ה-DOM האוטומטי באתרי Wix במחשב נבנה עבור סקריפטים שנכתבים משמאל לימין (למשל אנגלית, ספרדית וכו'). אם יש לכם אתר בשפה שנכתבת מימין לשמאל, כמו עברית או ערבית, אתם צריכים לארגן מחדש באופן ידני את סדר ה-DOM דרך החלונית Layers (שכבות).
למה סדר ה-DOM חשוב?
חלק מהגולשים עשויים להשתמש בקוראי מסך ובטכנולוגיות מסייעות אחרות כדי לנווט באתר. הטכנולוגיות הללו עוזרות לגולשים עם לקויות ובעיות ראייה בכך שהן סורקות את תוכן האתר ומקריאות אותו בקול רם.
גולשים שמשתמשים בקוראי מסך וגולשים עם קשיי ניידות עשויים להשתמש במקש ה-Tab כדי לנווט בתוכן האתר. לכן, סדר ה-DOM של האתר חשוב לגולשים שמשתמשים בקוראי מסך ו/או במקש ה-Tab, מכיוון שהם צריכים להיות בעלי יכולת לנווט באתר בסדר הגיוני.
לדוגמה, תפריט האתר אמור להופיע ראשון, אחריו שאר האלמנטים שבראש העמוד, אחריהם כותרת העמוד, ואז שאר התוכן של העמוד וכו'. אם סדר ה-DOM שגוי, הוא עלול לגרום לקורא המסך ו/או למקש ה-Tab לדלג על חלק מהתוכן בעמוד או לקפוץ בין אלמנטים בצורה לא הגיונית.
רוצים לבדוק את סדר ה-DOM של האתר?
אפשר לבדוק את סדר ה-DOM האוטומטי של האתר באמצעות שימוש במקש ה-Tab במקלדת או בקורא מסך על הגרסה של האתר הפעיל.
DOM אוטומטי באשף הנגישות
כשתפתחו את אשף הנגישות ב-Studio Editor, יכול להיות שתראו אפשרות לארגן את סדר ה-DOM שלו באופן אוטומטי. מומלץ לבחור באפשרות הזאת, מכייוון שהיא מבטיחה שהסריקה של האשף והמשימות שייווצרו בעקבותיה יהיו נכונות.
לא רואים את תיבת הסימון הזו?
האפשרות לארגן את ה-DOM של האתר לא תעבוד אם:
- האתר נוצר אחרי תחילת נובמבר 2024.
- ארגנתם בעבר את ה-DOM של האתר עם אשף הנגישות.
- כיביתם את ה-DOM האוטומטי באתר.
שינוי ידני של סדר ה-DOM באתר
אם שמתם לב שסדר ה-DOM של האתר לא הגיוני, אתם יכולים לערוך אותו ידנית כדי להבטיח חוויה משופרת עבור הגולשים.
השתמשו באשף הנגישות ובחלונית 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, כדאי לבטל את ההצמדה שלו ולמקם אותו בראש העמוד.
מה השלב הבא?
חזרו אל צ'קליסט הנגישות כדי להמשיך לעבוד על נגישות האתר.