בדיקה חזותית: עמודות, טקסט ותמונות בכל המסכים
גם דף ללא גלישה מעבר למסך עלול להיות קשה לקריאה. בדקו פרופורציות, תוכן ארוך ואינטראקציות לפני פרסום שינוי.
שש בדיקות שניתן לשחזר
בחירת דפים מייצגים
בדקו דף בית, קטגוריה, מאמר, שירות, טופס וטבלה. כללו כותרת ארוכה, שפה מימין לשמאל ודף עם כמה תמונות.
השוואת עמודות
בדקו רוחבים של 320, 390, 768, 1280, 1440 ו-1920 px. בחנו יישור, סדר קריאה ומרווחים. אל תסתירו פגמים באמצעות הסתרת תוכן גולש.
הגדלת טקסט
בדקו טקסט ב-200 % וזרימה מחדש ברוחב 320 פיקסלי CSS. מידע ופקדים צריכים להישאר נגישים; טבלאות יכולות לגלול בנפרד.
בדיקת תצלומים
בדקו חיתוך, נושא, ממדים וקרדיט. תמונה לא צריכה להימתח לפי גובה הטקסט שלידה. תארו את הנראה וסמנו תמונות ממאגר.
בדיקת אינטראקציות
השתמשו במקלדת בתפריטים, מסננים, שאלות וטפסים. בדקו מיקוד, שגיאות ושמירת קלט בלי לשלוח פנייה אמיתית.
שמירת ראיות
תעדו URL, שפה, רוחב, דפדפן, פגם ותוצאה לאחר תיקון. השלימו מדידות מעבדה בנתוני משתמשים כאשר יש מספיק תנועה.
רשומת בדיקה לשמירה
- URL ושפה
- מסך ורמת הגדלה
- פגם וצילום מסך
- תיקון ותוצאת בדיקה חוזרת
שיטת עבודה, לא אישור תאימות. התאימו את ההיקף ותעדו חריגים.
לפני הפרסום: שש בדיקות תפקוד
- עברו על תפריטים, קישורים, הורדות והחלפת שפה; בדקו את היעד בפועל.
- השתמשו בנתונים בדיוניים: שדות ריקים, כתובות לא תקינות, תווים שונים וטקסטים ארוכים.
- בדקו שהשגיאות מציינות את השדה, נגישות במקלדת ושומרות קלט שימושי.
- בדקו גם אימות בצד השרת; אפשר לעקוף בדיקות בדפדפן.
- הבחינו בין אישור קבלה למסירה בפועל; השתמשו ביעד בדיקה מורשה.
- בדקו עבודה ללא JavaScript, דחייה וחידוש; אל תשמרו סודות בראיות.
מצבים ובדיקות מתאימות
במסך קטן גללו את הטבלה אופקית. במקלדת, העבירו את המיקוד לטבלה והשתמשו בחצים.
| מצב | מה הוא מלמד | בדיקה מועילה |
|---|---|---|
| פקד נעלם כשהטקסט מוגדל ל־200%. | המשימה אינה נשארת נגישה אחרי ההגדלה. | התאימו את הפריסה ובדקו במקלדת. |
| תמונה נמתחת או משאירה רווח גדול במחשב. | הפרופורציות פוגעות באיזון התוכן הסמוך. | בדקו מגבלות גודל וסדר קריאה. |
| overflow: hidden חותך טבלה. | נתונים מוסתרים. | תנו לטבלה גלילה עצמאית הנגישה במקלדת ותאים עם גלישת טקסט. |
| כותרת מתורגמת נחתכת בשפה אחרת. | בדיקת שפה אחת אינה מספיקה. | בדקו טקסטים ארוכים, שפות RTL והחלפת שפה בפועל. |
דוגמה בדיונית
עמוד שירות בדיוני נראה תקין ב־1,440 פיקסלים. ב־320 כותרת מתורגמת ארוכה נחתכת; עם טקסט ב־200% פקד שאלות נפוצות אינו נגיש.
הגבילו תמונה, אפשרו לעמודות להצטמצם ולטקסט לגלוש. חזרו על המשימה ב־320, 390, 768 ו־1,440 פיקסלים, עם הגדלת טקסט ומקלדת. תעדו ליקויים שנותרו ובדקו מחדש אחרי התיקון.
קריטריוני קבלה
- המידע והפקדים קריאים ברוחבים ובשפות מייצגים.
- הגדלת הטקסט והמקלדת עדיין מאפשרות להשלים את המשימה.
- תועדו גרסה, דפדפן, שפה ותוצאות הבדיקה החוזרת.
שאלות מעשיות
האם צילום מסך מספיק?
לא. הוא מציג מצב אחד. בדקו גם תוכן ארוך, מקלדת ומצבים פתוחים, מסוננים או עם שגיאות.
האם יש גודל גופן אחיד לכולם?
לא. בחנו קריאות, אורך שורה, הגדלה וניגודיות. הגודל לבדו אינו מבטיח נגישות או איזון.
איך מפרשים Core Web Vitals?
הספים לחוויה טובה הם LCP ≤ 2.5 s, INP ≤ 200 ms ו-CLS ≤ 0.1 באחוזון 75. הם מודדים טעינה, אינטראקציה ויציבות ואינם מחליפים בדיקה חזותית.
האם נדרש צילום לכל מכשיר אפשרי?
בחרו משפחות עמודים מרכזיות, משימות מועילות ודפדפנים שבהם נצפו הבדלים. תעדו גבולות כיסוי: מעט צילומים אינם מוכיחים שכל מכשיר פועל.
איך לתעדף תיקוני תצוגה?
תחילה תקנו משימות חסומות, מידע מוסתר וקריאות. לאחר מכן שפרו פרופורציות, יישור וריווח ובדקו את תפקוד העמודים האחרים.