איך מנגישים אתר אינטרנט בפועל? קבלו הסבר מדויק - אקססיבל הנגשת אתרים - אקססיבל - הנגשת אתרים במחיר המשתלם בישראל

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

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

בישראל, ת"י 5568 חלק 1 עוסק בנגישות תכנים באינטרנט ומתבסס על WCAG, עם התאמות ישראליות. כאשר קיימת חובת הנגשה, ההתייחסות היא ככלל לרמת AA בהתאם להוראות הרלוונטיות.

אז איך נראית הנגשת אתר אמיתית? הנה כמה מההתאמות החשובות ביותר.

מהו טקסט חלופי (Alt Text) לתמונות ולמה הוא משמש?

Alt Text, או טקסט חלופי, הוא תיאור טקסטואלי שמוצמד לתמונה בקוד האתר.

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

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

"נעל ריצה אדומה מדגם X, מבט מהצד"

לעומת זאת, כתיבה כמו:

"תמונה123.jpg"

אינה מספקת כמעט שום מידע.

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

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

איך מנגישים טפסים מקוונים באתר?

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

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

כל שדה צריך לקבל Label ברור.

לדוגמה:

• שם מלא
• מספר טלפון
• כתובת דוא"ל
• הודעה

Placeholder שמופיע בתוך השדה אינו תמיד תחליף נכון ל-Label.

בנוסף צריך לבדוק:

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

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

מהי היררכיית כותרות נכונה (H1-H6) מבחינת נגישות?

כותרות באתר אינן רק עניין של עיצוב.

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

לדוגמה:

H1 – איך לבחור ביטוח רכב?

מתחתיו:

H2 – אילו סוגי ביטוח קיימים?

ובתוך אותו נושא:

H3 – ביטוח מקיף

H3 – ביטוח צד ג'

לא נכון לבחור H2 רק משום שהוא "נראה בגודל שמתאים לנו".

הכותרות צריכות לייצג את מבנה התוכן, ואת המראה שלהן אפשר לשנות באמצעות CSS.

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

איך מאפשרים ניווט מלא באמצעות מקלדת בלבד (Tab & Enter)?

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

לחיצה על Tab אמורה לעבור בין רכיבים פעילים, למשל:

קישור → כפתור → שדה בטופס → תפריט → כפתור שליחה.

Shift + Tab מאפשר לחזור אחורה.

Enter או במקרים מסוימים Space אמורים להפעיל רכיבים בהתאם לסוג שלהם.

צריך לוודא שאפשר:

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

חשוב במיוחד שלא יהיה Keyboard Trap – מצב שבו המשתמש מגיע לרכיב מסוים ואינו יכול לצאת ממנו באמצעות המקלדת.

היכולת להפעיל ממשקים באמצעות המקלדת היא אחד מעקרונות הליבה של WCAG.

מהו פוקוס נראה (Focus Indicator) ולמה הוא חשוב?

כאשר משתמש לוחץ Tab, הדפדפן מעביר את ה"פוקוס" מרכיב לרכיב.

אבל המשתמש חייב לדעת איפה הוא נמצא כרגע.

לשם כך נדרש פוקוס ויזואלי ברור.

לדוגמה, כאשר הפוקוס מגיע לכפתור "שליחה", אפשר להציג סביבו מסגרת ברורה.

בעיה נפוצה מתרחשת כאשר מעצב האתר מסיר את:

outline

רק משום שהמסגרת אינה מתאימה לעיצוב.

התוצאה היא שמשתמש מקלדת ממשיך לעבור בין רכיבים – אבל אינו יכול לראות באיזה רכיב הוא נמצא.

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

מהי יחס ניגודיות צבעים (Color Contrast) תקינה לפי התקן?

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

אחד הקריטריונים החשובים עוסק ביחס בין צבע הטקסט לצבע הרקע.

ברמת AA, עבור טקסט רגיל נדרש בדרך כלל יחס ניגודיות של לפחות:

4.5:1

ועבור טקסט גדול:

3:1

הדרישה מופיעה גם במסגרת ת"י 5568.

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

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

איך מנגישים תפריטים נפתחים ומגה-תפריטים (Mega Menus)?

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

תפריט Mega Menu יכול להכיל עשרות קישורים, קטגוריות ותתי-קטגוריות.

צריך לוודא שהוא:

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

במקרים מתאימים ניתן להשתמש גם במקשי חצים ו-Escape, בהתאם לאופן שבו הרכיב בנוי.

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

מהם תגיות ARIA ואיך משתמשים בהן נכון?

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

לדוגמה:

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

ARIA שימושי במיוחד עבור רכיבים דינמיים שנבנו באמצעות JavaScript.

אבל יש כלל חשוב מאוד:

לא מוסיפים ARIA סתם.

W3C מדגיש שהעדיפות היא להשתמש באלמנט HTML תקני כאשר הוא כבר מספק את ההתנהגות והמשמעות הנדרשות. למשל, עדיף להשתמש ב-button אמיתי מאשר לקחת div ולהפוך אותו לכפתור באמצעות ARIA ו-JavaScript.

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

מהו כפתור "דלג לתוכן המרכזי" (Skip to Content)?

דמיינו משתמש במקלדת שנכנס לכל עמוד באתר.

לפני שהוא מגיע למאמר עצמו הוא צריך לעבור שוב ושוב באמצעות Tab על:

לוגו → תפריט → חיפוש → קישורי שירות → כפתורי רשתות חברתיות → ורק לאחר מכן להגיע לתוכן.

באתר גדול זה יכול להיות מאוד מתסכל.

קישור "דלג לתוכן המרכזי" מאפשר למשתמש לדלג על כל האזור החוזר של ראש האתר ולעבור ישירות לתוכן.

קריטריון WCAG בנושא Bypass Blocks דורש לספק מנגנון שמאפשר לעקוף בלוקים שחוזרים בעמודים שונים.

גם אתרי ממשלה בישראל משתמשים בפתרון כזה במסגרת התאמות הנגישות שלהם.

איך מונעים מרובי-מדיה (פלאש/ווידאו/סליידרים) להפריע לגולשים?

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

תוכן שזז או מתחלף באופן אוטומטי יכול להקשות על:

• אנשים עם הפרעות קשב.
• משתמשי קוראי מסך.
• משתמשים עם מוגבלות קוגניטיבית.
• משתמשים שזקוקים ליותר זמן לקריאת הטקסט.

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

גם סרטוני וידאו צריכים לקבל התייחסות מתאימה – למשל כתוביות לתוכן מדובר במקרים הנדרשים.

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

האם אחרי כל התיקונים האתר כבר נגיש?

לא בהכרח.

אחרי ביצוע ההתאמות צריך לבדוק את האתר מחדש.

תהליך מקצועי כולל בדרך כלל שילוב של:

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

הנגשה טובה אינה מסתיימת בכך שהאתר "עובר סריקה".

יש דברים שכלי אוטומטי פשוט אינו יכול להבין.

הוא יכול לזהות שלתמונה יש ALT, אבל לא תמיד לדעת אם ה-ALT באמת מתאר אותה נכון.

הוא יכול לזהות H1, אבל לא תמיד להבין אם היררכיית הכותרות הגיונית.

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

לכן נגישות אתרים היא שילוב בין תקן, תכנות, בדיקות וכללי חוויית משתמש.

אקססיבל – מנגישים את האתר שלכם בפועל

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

המידע במאמר הוא מידע כללי ואינו מהווה ייעוץ משפטי.