נגישות: הכנת האתר לקורא מסך
זמן קריאה: 3 דקות
יכול להיות שחלק מהמשתמשים שמגיעים אל אתר האינטרנט שלכם נעזרים בטכנולוגיות מסייעות כמו קורא מסך כדי לגלוש באתר. קורא מסך הוא יישום לאנשים עם לקויות ראייה. הוא סורק את תוכן האתר ומקריא את התוכן בקול למשתמש או למשתמשת. הרבה מהגולשים שנעזרים בקורא מסך משתמשים גם במקש ה-Tab כדי לגלוש באתר, כי הם לא יכולים לראות איפה צריך להקליק.
סדר ה-DOM של האתר הוא הסדר שבו קורא המסך ומקש ה-Tab מסמנים ו/או מקריאים את התוכן בעמוד. סדר ההקראה צריך להיות סדר הגיוני כדי להבטיח שהגולשים יקבלו את החוויה האופטימלית ויוכלו להבין את התוכן.
הערה:
יש גם גולשים שלאו דווקא משתמשים בקורא מסך, אבל כן משתמשים במקש ה-Tab – למשל אנשים עם מוגבלויות בתנועה. לכן מומלץ תמיד לוודא שסדר ה-DOM של האתר נכון.
הנושאים בעמוד זה:
מידע על סדר ה-DOM של האתר
ה-DOM הוא סדר האלמנטים באתר שלכם. הוא חשוב בעיקר למשתמשים באתר שמשתמשים בקורא מסך ו/או במקש ה-Tab וצריכים לגלוש באתר בסדר הגיוני. לדוגמה, תפריט האתר אמור להופיע ראשון, אחריו שאר האלמנטים שבראש העמוד, אחריהם כותרת העמוד, ואז שאר התוכן של העמוד וכו'. אם סדר ה-DOM שגוי, הוא עלול לגרום לקורא המסך ו/או למקש ה-Tab לדלג על חלק מהתוכן בעמוד או לקפוץ בין אלמנטים בצורה לא הגיונית.
Wix מגדירה את סדר ה-DOM באופן אוטומטי, לפי הרצף הוויזואלי של אלמנטים באתרים ברוב השפות – כלומר משמאל לימין ומלמעלה למטה. כיוון שבעברית הרצף צריך להיות מימין לשמאל ולא משמאל לימין, אם האתר שלכם בעברית עליכם לשנות את סדר ה-DOM באופן ידני. כשאנחנו מפתחים את כלי הנגישות שלנו, אנחנו בודקים את המוצרים שלנו באמצעות קוראי המסך הבאים:
- Windows + Firefox או Chrome: NVDA (קורא חינמי)
- iOS + Safari: Voiceover (קורא מובנה)
זה אומר שכאשר יצרנו את סדר ה-DOM האוטומטי של האתר, הבאנו בחשבון את הפונקציות של היישומים האלה. כדי לבדוק את סדר ה-DOM האוטומטי של האתר, אתם יכולים להשתמש במקש ה-Tab שבמקלדת או בקורא מסך באתר הפעיל.
שינוי סדר ה-DOM של האתר
אם אתם בודקים את סדר ה-DOM של האתר ומגלים שהסדר לא הגיוני, אתם יכולים לשנות אותו ידנית ב-Accessibility Wizard (אשף הנגישות). האשף הוא כלי שסורק את האתר, מאתר בעיות נגישות פוטנציאליות, ומציע פתרונות מעשיים. בנוסף, אתם יכולים גם להשתמש באשף הנגישות כדי לשנות את הגדרות הנגישות המתקדמות של האתר.
חשוב:
אם סדר ההתקדמות של ה-Tab הגיוני, אתם לא צריכים לעשות שום דבר. אם הסדר נכון ותשנו אותו, אתם עלולים לפגוע בחוויית הגלישה של המשתמשים בקורא מסך ו/או במקש ה-Tab.
כדי לשנות את הגדרות ה-DOM:
- הקליקו על Settings (הגדרות) בסרגל העליון של ה-Editor.
- בחרו ב-Accessibility Wizard (אשף הנגישות).
- בחרו באייקון הפעולות הנוספות
בפינה הימנית העליונה של האשף.
- בחרו ב-Advanced accessibility settings (הגדרות נגישות מתקדמות).
- הקליקו על Automatic DOM Order (סדר DOM אוטומטי).
- השביתו את המתג בחלונית.
- בחרו ב-Turn It Off (השבתה) בחלון שיקפוץ.
- הקליקו על אייקון השכבות
בפינה השמאלית התחתונה של ה-Editor. - עברו על הרשימה ומחקו את האלמנטים המיותרים, כולל אלמנטים כפולים שאין להם שימוש באתר ויכולים לבלבל את מי שמשתמש בקורא מסך.
- גררו ושחררו את שאר האלמנטים בסדר הרצוי.
שימו לב:
- כשגולשים מנווטים באתר באמצעות מקש ה-Tab, הם עוברים רק בין האלמנטים האינטראקטיביים ולא בין האלמנטים הסטטיים, כמו טקסט. אם אתם רוצים לבדוק איך קורא מסך מתנהג עם אלמנטים סטטיים כמו טקסט, היעזרו במרכז התמיכה של קורא המסך כדי להבין איך מנווטים באתר באמצעות מקלדת.
- אלמנטים מוצמדים ממוקמים אוטומטית בסוף הרצף של התקדמות ה-Tab. אם אתם רוצים להקדים את המיקום של אלמנט ברצף ה-Tab, כדאי לבטל את ההצמדה שלו ולמקם אותו בראש העמוד.
השלבים הבאים:
- פתחו את Editor המובייל וחזרו על אותם שלבים.
- חזרו אל רשימת הפעולות לשיפור הנגישות כדי להמשיך לעבוד על נגישות האתר.