01
ניווט במקלדת
משתמשים עיוורים, אנשים עם מוגבלות מוטורית ומשתמשי מתגים גולשים בלי עכבר. עוברים על כל תבנית רק עם המקלדת ובודקים שכל פעולה אפשרית.
- כל קישור, כפתור ושדה נגישים ב-Tab ומופעלים ב-Enter או ברווח
- אין ״מלכודות מקלדת״ בחלונות קופצים, בנגנים ובמפות
- סדר מעבר שתואם לסדר הקריאה, מימין לשמאל
- סימון פוקוס בולט, שלא מוסתר מתחת לכותרת דביקה או לבאנר עוגיות
- קישור ״דילוג לתוכן״ בראש כל עמוד
- קיצורי מקלדת של תו בודד ניתנים לכיבוי או לשינוי
02
קוראי מסך ושליטה קולית
בודקים בפועל עם ארבעה קוראי מסך, במחשב ובטלפון, ועם תוכנות שליטה קולית. מקשיבים איך כל רכיב מוקרא: מה הוא, באיזה מצב הוא ומה יקרה כשלוחצים עליו.
- NVDA ו-JAWS ב-Windows, VoiceOver ב-iPhone ו-TalkBack באנדרואיד
- לכל כפתור וקישור יש שם ברור, גם כשהוא אייקון בלבד
- מצבים מוכרזים: פתוח או סגור, נבחר, מושבת
- הודעות דינמיות מוקראות: ״נוסף לסל״, ״נשלח בהצלחה״, שגיאות
- שליטה קולית (Voice Access, Voice Control): שמות ייחודיים שאפשר לומר בקול
- טקסט קישור שמובן גם מחוץ להקשר, בלי ״לחצו כאן״
03
ניגודיות וצבע
טקסט אפור בהיר, כפתורים בצבעי פסטל ושדות בלי מסגרת הם מהבעיות הנפוצות באתרים. מודדים כל שילוב צבעים באתר, כולל מצבי ריחוף ופוקוס.
- ניגודיות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול
- ניגודיות 3:1 לגבולות שדות, לאייקונים ולסימון הפוקוס
- מידע שלא מועבר בצבע בלבד: שגיאות, סטטוסים וקישורים בתוך טקסט
- טקסט על גבי תמונות, סליידרים ווידאו
- מצב ניגודיות גבוהה של Windows: שום רכיב לא נעלם
04
מבנה וסמנטיקה
קוראי מסך מנווטים לפי כותרות ואזורים בעמוד. מבנה תקין מאפשר לקפוץ ישר לתוכן הרלוונטי, במקום להאזין לכל העמוד מההתחלה.
- היררכיית כותרות H1 עד H6 הגיונית ורציפה
- אזורי עמוד: כותרת עליונה, ניווט, תוכן ראשי וכותרת תחתונה
- רשימות וטבלאות מסומנות ככאלה, עם כותרות עמודה
- כותרת עמוד (title) ייחודית ותיאורית
- שפה וכיווניות מוגדרות, כולל קטעים בשפה אחרת
- ניווט, עזרה ויצירת קשר באותו מקום בכל עמוד
05
טפסים והודעות שגיאה
טופס שאי אפשר למלא הוא ליד שהלך לאיבוד. בודקים כל טופס באתר, מצור קשר ועד הרשמה וקופה, כולל מה קורה כשממלאים אותו לא נכון.
- תווית קבועה ומקושרת לכל שדה, לא רק placeholder
- הודעות שגיאה ליד השדה, שמוקראות ומסבירות איך לתקן
- שדות חובה מסומנים גם בטקסט, לא רק בכוכבית
- השלמה אוטומטית לשם, אימייל, טלפון וכתובת
- בלי להקליד שוב מידע שכבר נמסר באותו תהליך
- התחברות בלי חידות: הדבקת סיסמה, מנהלי סיסמאות וחלופה ל-CAPTCHA
- אפשרות להאריך זמן בתהליכים עם מגבלת זמן
06
תמונות וטקסט חלופי
משתמש עיוור ״רואה״ תמונה דרך הטקסט החלופי שלה. בודקים שכל תמונה מתוארת לפי התפקיד שלה בעמוד, ושתמונות קישוט לא מפריעות.
- טקסט חלופי לכל תמונת תוכן, שמתאר את התכלית שלה
- תמונות קישוט מוסתרות מקוראי מסך
- גרפים ותרשימים עם תיאור מורחב
- באנרים ואינפוגרפיקות: הטקסט קיים גם כטקסט אמיתי
- לוגואים, אייקונים וקישורים גרפיים עם שם נגיש
07
וידאו, אודיו ותנועה
סרטונים בלי כתוביות, קרוסלות שרצות לבד ואנימציות שאי אפשר לעצור פוגעים במשתמשים חירשים, במשתמשים עם הפרעות קשב ובמשתמשים רגישים לתנועה.
- כתוביות מסונכרנות לסרטונים ותמלול לקבצי שמע
- אין שמע שמתנגן אוטומטית בלי אפשרות לעצור
- סליידרים, קרוסלות ואנימציות ניתנים לעצירה
- כיבוד הגדרת ״הפחתת תנועה״ של מערכת ההפעלה
- אין תוכן שמהבהב יותר משלוש פעמים בשנייה
- נגן וידאו שמופעל במקלדת ובקורא מסך
08
הגדלה ותצוגה
אנשים עם ראייה ירודה מגדילים את המסך פי שניים ואפילו פי ארבעה. בודקים שהאתר ממשיך לעבוד, בלי טקסט חתוך ובלי גלילה לרוחב.
- הגדלת טקסט ל-200% בלי אובדן תוכן או פונקציונליות
- זום 400% (רוחב 320 פיקסלים) בלי גלילה לרוחב
- ריווח טקסט מוגדל שלא שובר את העיצוב
- תוכן שזמין גם לאורך וגם לרוחב
- חלוניות שמופיעות בריחוף או בפוקוס נסגרות ב-Esc
09
מובייל ומסכי מגע
בטלפון כל כפתור קטן וכל מחווה מורכבת הופכים למכשול. בודקים על מכשירי iPhone ואנדרואיד אמיתיים, לא רק בסימולטור.
- אזורי לחיצה בגודל 24×24 פיקסלים לפחות, ו-44×44 לכפתורים ראשיים
- חלופה בלחיצה לכל פעולת גרירה: מחוונים, מיון ומפות
- חלופה פשוטה למחוות של כמה אצבעות
- תפריט המבורגר, חלונות קופצים ומקלדת וירטואלית
- פעולות שלא מופעלות בטעות במגע
10
רכיבים דינמיים ותוספים
הרבה מבעיות הנגישות באתרי וורדפרס מגיעות מרכיבים מוכנים: תוספים, תבניות ובוני עמודים. בודקים כל רכיב אינטראקטיבי, גם אם לא אתם כתבתם אותו.
- תפריטים נפתחים ותפריט הניווט במובייל
- חלונות קופצים: הפוקוס נכנס, נשאר בפנים וחוזר בסגירה
- טאבים, אקורדיונים וסליידרים עם תפקידים ומצבים נכונים
- תוכן מוסתר שלא מקבל פוקוס, ומסגרות iframe עם כותרת
- צ׳אט, באנר עוגיות, מפות, נגנים ורכיבי סליקה
- רכיבים של Elementor, WooCommerce ותוספים נפוצים
11
מסמכים להורדה
תקנון, טופס הרשמה או מחירון ב-PDF הם חלק מהאתר, והם צריכים להיות נגישים בדיוק כמוהו. בודקים את המסמכים שמפורסמים באתר או מציעים חלופה נגישה.
- מסמכים מתויגים עם סדר קריאה נכון
- כותרות, טבלאות ותמונות מסומנות בתוך המסמך
- טפסי PDF שאפשר למלא במקלדת ובקורא מסך
- מסמכים סרוקים: המלצה לחלופה נגישה
12
הצהרת נגישות
התקנות מחייבות לפרסם הצהרת נגישות באתר. בודקים שההצהרה קיימת, שהיא משקפת את מצב האתר בפועל ושיש בה את כל מה שנדרש.
- פירוט ההתאמות שבוצעו באתר
- פירוט החלקים שעדיין אינם נגישים, אם יש כאלה
- פרטי קשר לפניות בנושא נגישות
- תאריך עדכון אחרון
- קישור להצהרה מכל עמוד באתר
שיטת העבודה
הכלים שאיתם אנחנו בודקים
כלים אוטומטיים מוצאים רק חלק מהבעיות, ולכן כל סריקה מלווה בבדיקה ידנית עם טכנולוגיות מסייעות אמיתיות.
סריקה אוטומטית
- axe DevTools
- pa11y
- Lighthouse
- WAVE
קוראי מסך
- NVDA
- JAWS
- VoiceOver
- TalkBack
שליטה קולית
- Voice Access
- Voice Control
מדידה ותצוגה
- Colour Contrast Analyser
- Windows High Contrast
- Zoom 400%
סדר עדיפויות
דרגות חומרה בדוח
כל ממצא מקבל דרגת חומרה, כדי שתדעו מה לתקן קודם.
- קריטיחוסם שימוש: המשתמש לא יכול להשלים פעולה, כמו רכישה או שליחת טופס.
- גבוהפוגע משמעותית בשימוש. יש דרך עקיפה, אבל היא קשה או לא ברורה.
- בינונימקשה על השימוש ומאט את המשתמש, בלי לחסום אותו.
- נמוךשיפור מומלץ שמשפר את החוויה ואת העמידה בתקן.
רוצים לדעת איפה האתר שלכם עומד?
השאירו כתובת אתר ונחזור אליכם עם סריקה ראשונית, ספירת תבניות והצעת מחיר סגורה.