→ חזרה לבלוג

נגישות אתר מובייל - המדריך המלא לחוויה נגישה בנייד

בעולם שבו יותר מ-60% מהגלישה באינטרנט מתבצעת דרך מכשירים ניידים, נגישות אתר מובייל היא כבר לא בגדר "נחמד שיש" - היא הכרח מוחלט. אנשים עם מוגבלויות משתמשים בסמארטפונים שלהם בדיוק כמו כולם: לקנייה ברשת, לקריאת תוכן, למילוי טפסים ולצריכת שירותים מקוונים. אם האתר שלכם לא נגיש במובייל, אתם למעשה נועלים את הדלת בפני חלק משמעותי מהקהל שלכם.

במדריך הזה נסקור את כל ההיבטים של נגישות אתרים במובייל - מאזורי מגע ועד קוראי מסך, מעיצוב רספונסיבי ועד תמיכה בזום. נלמד מה דורש תקן WCAG 2.2, מה דורש החוק הישראלי, ואיך ליישם את הכל בפועל.

אזורי מגע - הבסיס של נגישות מובייל

אחד ההבדלים המשמעותיים ביותר בין גלישה במחשב לגלישה בנייד הוא אופן האינטראקציה. במחשב יש לנו עכבר עם סמן מדויק, ובנייד יש לנו אצבעות - שהן הרבה פחות מדויקות. עבור אנשים עם מוגבלויות מוטוריות, רעד בידיים או מוגבלויות ראייה, אזורי מגע קטנים מדי הם מכשול אמיתי.

תקן WCAG 2.2 דורש גודל מינימלי של 24x24 פיקסלים לאזורי מגע, אך ההמלצה המוגברת - ומה שגוגל ואפל דורשים בהנחיות שלהם - הוא 44x44 פיקסלים לפחות. גודל זה מבטיח שגם אנשים עם דיוק מוטורי נמוך יוכלו ללחוץ על כפתורים, קישורים ואלמנטים אינטראקטיביים בקלות.

הנה מה שצריך לשים לב אליו:

• כפתורים וקישורים: ודאו שכל אלמנט לחיץ הוא בגודל 44x44 פיקסלים לפחות. אם הטקסט קטן יותר, הגדילו את אזור ה-padding.
• מרווח בין אלמנטים: השאירו רווח של לפחות 8 פיקסלים בין אלמנטים לחיצים סמוכים כדי למנוע לחיצה בטעות על האלמנט הלא נכון.
• תפריטי ניווט: פריטי תפריט במובייל צריכים להיות גבוהים מספיק. אל תדחסו 15 קישורים בתפריט המבורגר עם גודל טקסט זעיר.
• צ'קבוקסים ורדיו באטנס: הגדילו את אזור הלחיצה כך שיכלול גם את הלייבל, לא רק את העיגול או הריבוע הקטן.

חלופות למחוות - כי לא כולם יכולים להחליק

מחוות מגע כמו החלקה (swipe), צביטה (pinch), סיבוב שתי אצבעות או הקשה כפולה הן אינטואיטיביות עבור רוב המשתמשים, אך עבור אנשים עם מוגבלויות מוטוריות הן עלולות להיות בלתי אפשריות לביצוע. תקן WCAG 2.2 דורש במפורש שלכל מחווה מורכבת תהיה חלופה פשוטה.

בפועל, זה אומר:

• החלקה בגלריית תמונות: הוסיפו כפתורי "הבא" ו"הקודם" ברורים לצד אפשרות ההחלקה.
• זום בצביטה על מפה: ספקו כפתורי פלוס ומינוס לשליטה ברמת הזום.
• גרירת רכיבים (drag and drop): הציעו חלופה באמצעות לחיצה בודדת, כמו כפתורי "הזז למעלה" ו"הזז למטה".
• הקשה כפולה: אל תסתמכו על double-tap כפעולה בלעדית. תמיד ספקו גם כפתור ייעודי.

כלל אצבע חשוב: כל פעולה שניתן לבצע במחווה מורכבת חייבת להיות זמינה גם בלחיצה בודדת על כפתור ברור ומסומן.

עיצוב רספונסיבי ונגישות - שני צדדים של אותו מטבע

עיצוב רספונסיבי (Responsive Design) הוא תנאי הכרחי לנגישות מובייל, אך הוא לא מספיק בפני עצמו. אתר רספונסיבי מתאים את עצמו לגודל המסך, אבל אתר נגיש מתאים את עצמו ליכולות המשתמש. הנה ההבדלים המרכזיים:

רספונסיביות לבדה אינה נגישות. אתר יכול להיראות יפה במובייל אבל עדיין להיות בלתי נגיש - למשל, אם הטקסט קטן מדי, הניגודיות נמוכה, או שאלמנטים אינטראקטיביים קרובים מדי זה לזה. מצד שני, עיצוב רספונסיבי נכון הוא בסיס מצוין לנגישות.

עקרונות חשובים לעיצוב רספונסיבי נגיש:

• גודל טקסט גמיש: השתמשו ביחידות rem או em ולא בפיקסלים קבועים, כדי לאפשר למשתמשים להגדיל את הטקסט בהגדרות הדפדפן.
• סדר קריאה הגיוני: כשתוכן עובר מפריסה רב-עמודתית לעמודה אחת, ודאו שסדר הקריאה ההגיוני נשמר.
• תמונות גמישות: השתמשו ב-max-width: 100% כדי שתמונות לא יגלשו מגבולות המסך.
• אל תסתירו תוכן חיוני: לעיתים מפתחים מסתירים תוכן בגרסת המובייל. ודאו שתוכן קריטי ופונקציונליות מלאה זמינים בכל גודל מסך.

קוראי מסך בנייד - TalkBack ו-VoiceOver

אנשים עיוורים או עם לקויות ראייה משתמשים בקוראי מסך גם בסמארטפון שלהם. במכשירי אנדרואיד השירות נקרא TalkBack, ובמכשירי אייפון הוא נקרא VoiceOver. שני הכלים פועלים באופן שונה מקוראי מסך במחשב, ויש לקחת את ההבדלים האלה בחשבון.

כשקורא מסך פעיל בנייד, אופן הניווט משתנה לחלוטין: המשתמש מחליק ימינה ושמאלה כדי לעבור בין אלמנטים, ומקיש פעמיים כדי להפעיל אלמנט. זה אומר שסדר ה-DOM של האתר שלכם חייב להיות הגיוני ורציף.

טיפים קריטיים לתאימות עם קוראי מסך בנייד:

• שימוש נכון ב-ARIA: תייגו אלמנטים אינטראקטיביים בצורה ברורה עם aria-label או aria-labelledby.
• סמנטיקה נכונה: השתמשו בתגיות HTML סמנטיות כמו nav, main, article, button במקום div עם onclick.
• הודעות דינמיות: כשתוכן משתנה (כמו הודעת שגיאה בטופס), השתמשו ב-aria-live כדי שקורא המסך יודיע למשתמש.
• Focus management: כשנפתח חלון מודאלי או נטען תוכן חדש, ודאו שהפוקוס עובר לאלמנט הנכון.

תמיכה בזום ובהגדלה - אל תחסמו את המשתמש

אנשים רבים עם לקויות ראייה מסתמכים על אפשרות הזום (pinch-to-zoom) בדפדפן הנייד כדי להגדיל טקסט ואלמנטים. אחת הטעויות הנפוצות והחמורות ביותר בנגישות מובייל היא חסימת הזום באמצעות התג:

user-scalable=no או maximum-scale=1.0

לעולם אל תחסמו זום. תקן WCAG דורש שמשתמשים יוכלו להגדיל את התצוגה עד 200% לפחות, ועד 400% ברמת AA. ודאו שהתג viewport שלכם מאפשר זאת:

בנוסף לזום, עליכם לוודא שהאתר שלכם תומך בהגדלת טקסט ברמת מערכת ההפעלה. משתמשים רבים מגדירים גודל טקסט גדול יותר בהגדרות הנייד שלהם, והאתר חייב לכבד הגדרה זו ולא לשבור את הפריסה.

תמיכה בכיוון מסך - לאורך ולרוחב

חלק מהמשתמשים עם מוגבלויות פיזיות מחברים את הנייד שלהם למתקן קבוע (mount) בכיוון מסוים - לאורך או לרוחב - ואינם יכולים לסובב את המכשיר. משתמשים אחרים עם לקויות ראייה מעדיפים את מצב לרוחב (landscape) כדי לקבל טקסט גדול יותר.

תקן WCAG 2.1 דורש תמיכה בשני הכיוונים (קריטריון 1.3.4). אל תנעלו את האתר שלכם לכיוון אחד בלבד. האתר חייב לפעול ולהיראות טוב גם לאורך וגם לרוחב, אלא אם כן יש סיבה חיונית לכיוון מסוים (כמו אפליקציית פסנתר, למשל).

טיפים ליישום:

• בדקו שהפריסה מתאימה את עצמה בצורה חלקה בשני הכיוונים.
• אל תשתמשו ב-CSS שנועל את הכיוון (orientation: portrait בלבד).
• ודאו שתוכן לא נחתך או נעלם כשמסובבים את המכשיר.

נגישות טפסים במובייל - חוויה חלקה ללא תסכול

טפסים הם אחד האלמנטים הכי מאתגרים בנגישות מובייל. מסך קטן, מקלדת וירטואלית שמכסה חצי מהמסך, ואצבעות שלא תמיד מדויקות - כל אלה הופכים את מילוי הטפסים למשימה מורכבת, במיוחד עבור אנשים עם מוגבלויות.

הנה הנחיות חיוניות לטפסים נגישים במובייל:

• לייבלים גלויים תמיד: אל תשתמשו ב-placeholder כתחליף ל-label. הטקסט נעלם ברגע שמתחילים להקליד, וזה מבלבל.
• סוג מקלדת מתאים: השתמשו ב-inputmode או type מתאים - מקלדת מספרים לטלפון, מקלדת אימייל לכתובת דוא"ל, וכו'.
• הודעות שגיאה ברורות: הציגו שגיאות ליד השדה הרלוונטי, לא בראש הדף. המשתמש לא צריך לגלול כדי להבין מה השתבש.
• אוטוקומפליט: הפעילו autocomplete עם ערכים מתאימים כמו name, email, tel כדי לחסוך הקלדה מיותרת.
• כפתור שליחה ברור: ודאו שכפתור ה-submit בולט, גדול מספיק, ונמצא במיקום צפוי.

בדיקת נגישות מובייל - כלים ושיטות

בדיקת נגישות מובייל שונה מבדיקת נגישות במחשב. לא מספיק להריץ כלי בדיקה אוטומטי - צריך גם לבדוק ידנית עם מכשיר אמיתי. הנה תהליך בדיקה מומלץ:

1. בדיקה אוטומטית: הריצו כלים כמו Lighthouse של גוגל או axe DevTools במצב מובייל כדי לזהות בעיות בסיסיות.
2. בדיקה ידנית עם TalkBack: הפעילו את TalkBack במכשיר אנדרואיד ונסו לנווט באתר רק באמצעות מחוות. האם כל הפונקציונליות זמינה? האם ההקראה הגיונית?
3. בדיקה ידנית עם VoiceOver: חזרו על אותו תהליך עם VoiceOver באייפון. שימו לב שיש הבדלים בין שתי הפלטפורמות.
4. בדיקת זום: הגדילו את התצוגה ל-200% ואז ל-400%. האם האתר עדיין שמיש? האם תוכן לא נחתך?
5. בדיקת כיוון: סובבו את המכשיר וודאו שהכל עובד בשני הכיוונים.
6. בדיקה עם טקסט מוגדל: שנו את גודל הטקסט בהגדרות המכשיר לגודל המקסימלי ובדקו שהאתר לא נשבר.

טיפ מקצועי: גייסו אנשים עם מוגבלויות לבדיקת נגישות אמיתית. שום כלי אוטומטי לא יכול להחליף את החוויה של משתמש אמיתי שמנווט עם קורא מסך בכל יום.

סרגל הנגישות של מנגיש - מותאם מובייל מהיסוד

כשפיתחנו את סרגל הנגישות של מנגיש, הבנו שנגישות מובייל חייבת להיות בראש סדר העדיפויות. לכן, הסרגל שלנו תוכנן מלכתחילה לעבוד בצורה מושלמת במכשירים ניידים:

• כפתור מותאם מובייל: כפתור ההפעלה של הסרגל מוצג בגודל אופטימלי במובייל, עם אזור מגע של 48x48 פיקסלים לפחות.
• ממשק נגיש במגע: כל הכפתורים בתוך הסרגל מותאמים למגע, עם מרווחים מספיקים ביניהם וגודל נוח ללחיצה.
• לא חוסם תוכן: הסרגל מוצג בצורה שלא מסתיר תוכן חיוני באתר, גם במסכים קטנים.
• ביצועים מהירים: הסקריפט קל ואינו מאט את טעינת האתר במובייל, גם ברשתות סלולריות איטיות.
• תמיכה מלאה בקוראי מסך: כל הפונקציות בסרגל מתויגות כראוי ועובדות עם TalkBack ו-VoiceOver.

ההתקנה פשוטה - שורת קוד אחת באתר שלכם, והסרגל מזהה אוטומטית את סוג המכשיר ומתאים את עצמו בהתאם. בין אם הגולשים שלכם באים ממחשב, טאבלט או סמארטפון, הם מקבלים חוויית נגישות מלאה ואיכותית.

סיכום - נגישות מובייל היא לא אופציונלית

נגישות מובייל היא חובה חוקית בישראל לפי חוק שוויון זכויות לאנשים עם מוגבלות ותקן 5568. היא גם חובה מוסרית - כי כל אדם ראוי לגשת למידע ולשירותים דיגיטליים, ללא קשר למכשיר שבו הוא משתמש או למוגבלות שלו.

הטמעת נגישות מובייל אינה צריכה להיות מסובכת. התחילו מהבסיס: אזורי מגע גדולים מספיק, חלופות למחוות, תמיכה בזום ובכיוון מסך, טפסים נגישים, וקוד סמנטי נכון. ולזכור - כלי נגישות כמו סרגל מנגיש יכול להוסיף שכבת נגישות משמעותית באתר שלכם במינימום מאמץ.

המשתמשים שלכם - כולם - ראויים לחוויית גלישה טובה בנייד. הנגישו את האתר שלכם עוד היום.