→ חזרה לבלוג

איך בודקים אם אתר נגיש? כלים ושיטות בדיקה

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

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

למה בדיקת נגישות חשובה?

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

בדיקת נגישות חשובה מכמה סיבות:

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

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

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

WAVE (Web Accessibility Evaluation Tool)

WAVE הוא אחד הכלים הוותיקים והאמינים ביותר בתחום. הוא זמין כאתר (wave.webaim.org) וכתוסף לדפדפן Chrome ו-Firefox. WAVE מציג את הבעיות ישירות על גבי העמוד, עם סימונים צבעוניים שמראים איפה כל בעיה נמצאת.

יתרונות: קל לשימוש, ויזואלי, מזהה בעיות ברמה גבוהה של דיוק, חינמי.

חסרונות: בודק עמוד אחד בכל פעם, לא תמיד תומך היטב ב-RTL.

Google Lighthouse

Lighthouse מובנה בכלי הפיתוח של Chrome (DevTools). הוא מספק ציון נגישות מ-0 עד 100 יחד עם רשימה מפורטת של בעיות. כדי להפעיל אותו, פתחו את DevTools (F12), עברו ללשונית Lighthouse, בחרו "Accessibility", ולחצו "Analyze page load".

יתרונות: מובנה בדפדפן, נותן ציון מספרי ברור, מספק קישורים ללמידה נוספת.

חסרונות: הציון יכול להיות מטעה - ציון 100 לא אומר שהאתר 100% נגיש.

axe DevTools

axe הוא מנוע בדיקת נגישות מבית Deque Systems, זמין כתוסף לדפדפן ובגרסה מקצועית. הוא נחשב לאחד הכלים המדויקים ביותר עם שיעור False Positive נמוך מאוד.

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

חסרונות: הגרסה החינמית מוגבלת, הגרסה המקצועית יקרה.

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

בדיקות ידניות - מה שהמכונה לא יכולה

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

בדיקת מקלדת

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

• האם אתם יכולים להגיע לכל קישור וכפתור באמצעות Tab?
• האם אתם רואים בבירור איזה אלמנט מקבל פוקוס (focus indicator)?
• האם סדר ה-Tab הגיוני - מימין לשמאל ומלמעלה למטה?
• האם אתם יכולים לפתוח תפריטים נפתחים עם Enter או Space?
• האם אתם יכולים לסגור חלונות קופצים עם Escape?
• האם אתם "נתקעים" בפוקוס בלולאה שאי אפשר לצאת ממנה (focus trap)?

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

בדיקת ניגודיות צבעים

השתמשו בכלי כמו WebAIM Contrast Checker או Color Contrast Analyzer כדי לבדוק שיחס הניגודיות בין הטקסט לרקע עומד בדרישות:

• טקסט רגיל (פחות מ-18px): יחס ניגודיות של לפחות 4.5:1
• טקסט גדול (18px ומעלה, או 14px bold): יחס ניגודיות של לפחות 3:1
• אלמנטים גרפיים ואייקונים: יחס ניגודיות של לפחות 3:1

בדיקת תוכן

עברו על התוכן ובדקו:

• האם לכל תמונה יש טקסט חלופי משמעותי?
• האם הכותרות יוצרות היררכיה הגיונית?
• האם טקסט הקישורים ברור מחוץ להקשר ("קראו עוד על נגישות" ולא "לחצו כאן")?
• האם יש כתוביות לסרטוני וידאו?
• האם הודעות שגיאה בטפסים ברורות ומקושרות לשדה הרלוונטי?

בדיקה עם קורא מסך

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

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

VoiceOver מובנה בכל Mac ו-iPhone. הפעילו אותו (Cmd+F5 ב-Mac) ונסו לנווט באתר.

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

• עצמו את העיניים או כבו את המסך - האם אתם מצליחים להבין את המבנה?
• נסו לבצע פעולה מרכזית באתר (רכישה, מילוי טופס, חיפוש) - האם זה אפשרי?
• שימו לב לתמונות - האם קורא המסך מתאר אותן בצורה משמעותית?
• בדקו טפסים - האם קורא המסך מכריז על שם כל שדה ומטרתו?

איך מנגיש Pro כולל סריקה מובנית?

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

הסריקה של מנגיש Pro מבוססת על בינה מלאכותית ובודקת את האתר מול עשרות קריטריונים של WCAG 2.1 AA. היא מזהה:

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

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

תדירות בדיקות - כמה פעמים צריך לבדוק?

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

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

סיכום: מפת דרכים לבדיקת נגישות

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

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

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