לדעת מה הבעיה מקצר את הדרך לפתרון
הודעות שגיאה
הודעת השגיאה אינה מתארת את הבעיה
הודעות שגיאה עמומות אינן מסייעות למשתמשים להבין מה השתבש. יש לתאר את הבעיה בבירור, לדוגמה במקום "שגיאה" לכתוב "כתובת האימייל אינה בפורמט תקין".
הודעת השגיאה אינה נשמעת בתוכנה קוראת מסך
הודעות שאינן מקושרות כראוי לשדות לא יוקראו אוטומטית בעת שהן מופיעות. יש לקשר הודעות שגיאה לשדות הרלוונטיים באמצעות aria-describedby ולעדכן אותן דינמית.
השגיאה אינה מכילה הסבר לתיקון
הודעות כמו "שגיאה" או "לא תקין" אינן מסבירות כיצד לתקן את הבעיה. יש לספק הנחיות ברורות לתיקון, למשל "נא להזין מספר טלפון בפורמט XXX-XXXXXXX".
חיווי השגיאה מודגש באמצעות צבע בלבד
משתמשים עם לקויות ראייה או עיוורי צבעים עלולים לא להבחין בשגיאות המסומנות בצבע בלבד. יש להוסיף סימנים גרפיים (כמו אייקון), טקסט מפורש או שינויים במבנה בנוסף לצבע.
לא ניתן להבין לשדה שדה השגיאה שייכת
כאשר הודעת שגיאה אינה מקושרת בבירור לשדה ספציפי, משתמשים מתקשים להבין איזה שדה דורש תיקון. יש לקשר כל הודעת שגיאה לשדה הרלוונטי באמצעות aria-describedby.
טבלאות
בטבלה לא נמצאו תאי כותרת ויש להגדיר תאי כותרת לכל ראש עמודה
ללא תאי כותרת (<th>), משתמשי קוראי מסך לא יכולים להבין את הקשר בין התאים והמידע שבטבלה. יש להגדיר כותרות עמודות ושורות באמצעות תגית <th>.
חסר הסבר על הטבלה באמצעות <caption> או חוקי ARIA
ללא כותרת או תיאור, משתמשים לא יודעים מה תוכן הטבלה לפני שהם מנווטים בה. יש להוסיף <caption> או להשתמש ב-aria-describedby להסבר על מטרת הטבלה.
טבלה אינה מכילה כלל טקסטים - יש להגדיר אותה כעיצובית
טבלה ללא טקסט (למשל עם תמונות בלבד) צריכה להיות מוגדרת כעיצובית עם role="presentation" כדי שקוראי מסך יתעלמו ממבנה הטבלה ויתמקדו בתוכן.
נראה כי הטבלה משמשת לעיצוב בלבד (אין תגיות <th> ותגיות <td>)
שימוש בטבלאות לעיצוב בלבד (במקום לתצוגת נתונים) אינו מומלץ ומקשה על קוראי מסך. יש להשתמש ב-CSS לעיצוב ולהשאיר טבלאות רק להצגת נתונים טבלאיים.
כותרות
דילוג היררכי לא תקין
דילוג ברמות כותרות (למשל מ-H1 ישירות ל-H3) שובר את מבנה הדף עבור משתמשי קוראי מסך שמסתמכים על היררכיה תקינה. יש לשמור על רצף היררכי נכון (H1, אחריו H2, אחריו H3 וכו').
חסרה כותרת ראשית H1 בעמוד.
ללא כותרת H1, משתמשי קוראי מסך מתקשים להבין את הנושא המרכזי של העמוד. יש לספק כותרת H1 משמעותית המתארת את תוכן העמוד.
כותרת מכילה טקסטים שאינם צריכים להיות כותרות כמו: רק מספר טלפון או רק תאריך וכדומה.
כותרות צריכות לתאר נושאים או סעיפים, לא נתונים בודדים. נתונים כמו מספרי טלפון או תאריכים צריכים להופיע בתוך פסקאות או רכיבים מתאימים אחרים, לא ככותרות.
נמצאה כותרת ריקה. כותרות צריכות להכיל טקסט משמעותי.
כותרות ריקות מבלבלות משתמשי קוראי מסך שמסתמכים על היררכיית כותרות לניווט. יש למלא את הכותרות בתוכן משמעותי או להסירן לחלוטין.
נמצאו מספר כותרות H1. יש להשתמש רק בכותרת H1 אחת.
ריבוי כותרות H1 מבלבל את מבנה העמוד עבור משתמשי קוראי מסך ופוגע ב-SEO. יש להשתמש בכותרת H1 אחת בלבד לכל עמוד, שתייצג את הנושא המרכזי.
כפתורים
אלמנטים קליקבילים שאינם מוגדרים ככפתורים
אלמנטים שמבצעים פעולות (כמו <div> עם onClick) לא נגישים למשתמשי מקלדת וקוראי מסך. יש להשתמש בתגית <button> או להוסיף role="button", tabindex="0" וטיפול מלא במקלדת.
הכפתור ללא תיאור
כפתורים ללא טקסט או תיאור אינם מובנים למשתמשי קוראי מסך. יש להוסיף טקסט בתוך הכפתור או להשתמש ב-aria-label/aria-labelledby עבור כפתורים עם אייקונים בלבד.
הכפתור מוסתר לעיוורים אבל לא למשתמשים רגילים. יש להסתיר או להציג לכלל המשתמשים
הסתרה סלקטיבית יוצרת חוויה לא שוויונית. אלמנטים צריכים להיות גלויים לכולם או מוסתרים מכולם כדי ליצור חוויית משתמש עקבית.
הכפתור מכיל aria-describedby שמצביעים על אלמנט שאינו קיים.
כאשר aria-describedby מפנה ל-id לא קיים, קוראי מסך לא יכולים לקבל את התיאור המורחב של הכפתור. יש לוודא שה-id קיים או להסיר את המאפיין aria-describedby.
הכפתור מכיל aria-labelledby שמצביעים על אלמנט שאינו קיים.
כאשר aria-labelledby מפנה ל-id לא קיים, קוראי מסך לא יכולים לזהות את תפקיד הכפתור. יש לוודא שה-id קיים או להשתמש בשיטה חלופית לתיאור הכפתור.
הכפתור מכיל תמונה אך חסר alt או aria-label.
כפתורים עם תמונות ללא טקסט חלופי אינם מובנים למשתמשי קוראי מסך. יש להוסיף alt לתמונה או aria-label לכפתור המתאר את פעולת הכפתור.
כפתור לא אמור להכיל role שערכו שונה מ-button.
שינוי ה-role של כפתור משבש את התנהגותו הצפויה ומבלבל משתמשי קוראי מסך. אלמנט <button> צריך להישאר עם ברירת המחדל שלו או role="button".
כפתור מכיל href. יש להשתמש ב-<a> לנווט לדפים.
ערבוב בין תפקידים גורם לבלבול. אם האלמנט מנווט למקום אחר (URL), יש להשתמש ב-<a>. אם הוא מבצע פעולה, יש להשתמש ב-<button>.
מקלדת
בלחיצה על כפתור בעזרת מקש אנטר לא קורה שום פעולה אבל עם עכבר הכל עובד.
חוסר תמיכה במקשי Enter או Space לכפתורים מונע ממשתמשי מקלדת להפעיל פונקציונליות. יש להוסיף מאזיני אירועים למקשים (keydown/keyup) בנוסף לאירועי עכבר.
בניווט עם כפתור הטאב לא ניתן להגיע לכל מקום בדף לדוגמה תתי תפריטים, קישורים וכדומה.
משתמשים שמסתמכים על המקלדת בלבד לא יכולים לגשת לתוכן שאינו נגיש עם מקש Tab. יש לוודא שכל האלמנטים האינטראקטיביים נגישים עם מקלדת, כולל תפריטים נפתחים ותפריטי משנה.
לא ניתן לראות איכן מנווטים עם מקש הטאב
ללא סימון פוקוס ברור, משתמשי מקלדת לא יודעים היכן הם נמצאים בדף. יש לספק סגנון outline ברור וגבוה-ניגודיות לאלמנטים שמקבלים פוקוס ולעולם לא להסיר את outline:none ללא חלופה ויזואלית מספקת.
פופאפים
הפוקוס יוצא מחוץ לפופאפ אבל הפופאפ עדין פתוח
יציאת הפוקוס מפופאפ פתוח יוצרת מצב מבלבל עבור משתמשי מקלדת. יש ל"לכוד" את הפוקוס בתוך הפופאפ (באמצעות focus trap) כל עוד הוא פתוח, או לסגור את הפופאפ כשהפוקוס יוצא ממנו.
הפוקוס לא חוזר לכפתור שפתח את הפופאפ בעת הסגירה
כשפופאפ נסגר, משתמשי מקלדת עלולים "לאבד" את מיקומם בדף. יש להחזיר את הפוקוס לאלמנט שהפעיל את הפופאפ בעת סגירתו כדי לאפשר המשך ניווט טבעי.
התוכן בתוך הפופאפ אינו נגיש
פופאפים שבהם התוכן לא נגיש (למשל חסרים תיאורים לכפתורים או התוכן לא ניתן לניווט עם מקלדת) מונעים ממשתמשים רבים גישה לפונקציונליות. יש לוודא שכל תוכן הפופאפ נגיש בהתאם להנחיות WCAG.
פוקוס המקלדת לא נכנס לתוך החלונית ברגע הפתיחה
כאשר פופאפ נפתח, הפוקוס צריך לעבור אליו אוטומטית כדי שמשתמשי מקלדת וקוראי מסך יוכלו לאינטראקט עם תוכן הפופאפ מיד. יש להעביר את הפוקוס לפופאפ או לאלמנט הראשון בתוכו בעת הפתיחה.
קישורים
<a href=""> הוא קישור עם כתובת ריקה – כלומר לא מבצע ניווט. לעיתים משתמשים בזה לשם הפעלת פעולה (כמו פתיחת מודאל).
הקישור אינו נחשב תקין ויכול לגרום לבעיות בניווט. גם לחיצה עליו עלולה לגרום לטעינת הדף מחדש. אם מדובר בפעולה – לא בקישור – השתמש ב-<button> או קישור עם role="button" וטיפול מלא באירועי נגישות (קליטה בלחיצה ובמקש Enter/Space).
אלמנט <a> שמשמש כקישור אך אין לו מאפיין href. כך הוא אינו נתפס כקישור ע"י הדפדפן.
הקישור לא ניתן להפעלה באמצעות מקלדת, ואינו מתפקד כקישור עבור קוראי מסך או משתמשי מקלדת בלבד. אם הכוונה היא לקישור – חובה להוסיף href. אם מדובר בכפתור – עדיף להשתמש ב-<button> או להוסיף role="button" ולטפל בניווט מקלדת בעצמך (לא מומלץ).
הקישור מוסתר לעיוורים אבל לא למשתמשי עכבר. יש להסתיר או להציג לכלל המשתמשים
הסתרה סלקטיבית גורמת לחוסר עקביות בחוויית המשתמש. מה שמוסתר ממשתמשי קוראי מסך צריך להיות מוסתר גם ממשתמשים רואים ולהיפך, כדי ליצור חוויה שוויונית.
הקישור מכיל role='button' אך יש לו href
סתירה בהגדרות האלמנט - אם זה קישור (עם href) אל תשתמש ב-role='button', ואם זה כפתור השתמש בתגית <button>. שימוש בשניהם יחד גורם לבלבול בהתנהגות האלמנט.
טקסט הקישור זהה ל-title, מיותר
כפילות מידע מיותרת שגורמת לקוראי מסך לקרוא פעמיים את אותו המידע. יש להסיר את מאפיין title או לשנות את הערך שלו כך שיספק מידע משלים לטקסט הקישור.
לקישור יש aria-disabled='true' אך עדיין יש לו href
קישור עם aria-disabled='true' אמור להיות מושבת, אבל הוא עדיין קליקבילי כל עוד יש לו href. יש להסיר את ה-href או לטפל בהשבתה מלאה באמצעות JavaScript.
לקישור יש disabled אך הוא לא מבטל ניווט
מאפיין disabled אינו עובד על אלמנטי קישור (<a>). משתמשים עדיין יכולים ללחוץ עליו. יש להשתמש ב-aria-disabled='true' ולמנוע את הניווט בעזרת JavaScript.
נמצא קישור עוגן אבל הוא מפנה לאלמנט שאינו קיים בדף
קישורי עוגן שמפנים לאלמנטים לא קיימים גורמים לניווט שבור. יש לוודא שהאלמנט אליו מפנה הקישור (בד"כ בעזרת id) אכן קיים בדף.
קיים אך ריק title
מאפיין title ריק עלול לגרום לקוראי מסך לקרוא "ריק" או להתעלם ממנו, מה שיכול לבלבל משתמשים. יש להסיר אותו או למלא אותו בתוכן רלוונטי.
קישור עם href #. יש להגדיר ככפתור
שימוש ב-href=# גורם לקפיצת הדף לראש העמוד בלחיצה, דבר המבלבל משתמשים ושובר את הניווט. אם נדרשת פעולה ולא ניווט, יש להשתמש בתגית <button>.
שני קישורים או יותר מופיעים ברצף (אחד אחרי השני) ומפנים לאותה כתובת. לעיתים גם עם אותו טקסט.
משתמשים עם קוראי מסך או ניווט מקלדת שומעים או נתקלים באותם קישורים שוב ושוב, דבר שגורם לבלבול ולמצב שבו הם לא יודעים אם התוכנה נתקעה ובגלל זה היא מקריאה פעמיים או יותר את אותו הקישור
שדות קלט
aria-describedby מפנה ל-id שאינו קיים:
כאשר aria-describedby מפנה ל-id לא קיים, קוראי מסך לא יכולים למצוא את התיאור הנוסף לשדה. יש לוודא שה-id קיים ומכיל מידע רלוונטי.
אין סימון לשדות חובה
ללא סימון ברור, משתמשים לא יודעים אילו שדות הם חובה לפני שהם מנסים לשלוח את הטופס. יש לסמן שדות חובה באופן חזותי ובקוד עם aria-required="true".
אין תיאור לשדה.
שדות ללא תיאור אינם מובנים למשתמשי קוראי מסך. יש להוסיף תווית <label> או לחלופין להשתמש ב-aria-label או aria-labelledby.
הודעות שגיאה מוצגות בתוך תגית LABEL
הצגת הודעות שגיאה בתוך תווית השדה גורמת לקוראי מסך לקרוא את השגיאה בכל פעם שהמשתמש ניגש לשדה. יש להפריד את השגיאה מהתווית ולקשר אותה לשדה באמצעות aria-describedby.
ישנם מספר תגיות מסוג LABEL שמפנים לאותו שדה קלט
כאשר יש מספר תוויות לשדה אחד, קוראי מסך עלולים לקרוא את כולן או רק חלק מהן, מה שגורם לבלבול. יש להשתמש בתווית אחת בלבד ולהוסיף מידע נוסף באמצעות aria-describedby.
כוכבית מסמלת שדה חובה אבל אין הגדרה בקוד לעיוורים.
סימון חזותי בלבד (כוכבית) אינו נגיש לקוראי מסך. יש להוסיף aria-required="true" לשדה או לכלול את המילה "חובה" בתווית או בתיאור השדה.
לשדה יש תגית LABEL אבל היא אינה מכילה טקסט המסביר את השדה.
תווית ריקה אינה מועילה למשתמשים. יש למלא את התווית בטקסט ברור המתאר את מטרת השדה.
קבוצת כפתורי רדיו אינה נמצאת בתוך <fieldset> עם <legend> או role="group" עם aria-labelledby / aria-label.
ללא קיבוץ, משתמשי קוראי מסך לא יודעים שהרדיו באטנים שייכים לאותה קבוצה. יש לקבץ אותם ב-fieldset עם legend המתאר את מטרת הקבוצה.
שונות
אותו ID נמצא זהה במספר אלמנטים
מזהה ID חייב להיות ייחודי בדף. שימוש באותו ID במספר אלמנטים גורם לבעיות בהפניות של aria-labelledby, aria-describedby וקישורי עוגן, ומפר את כללי ה-HTML. יש לתת ID ייחודי לכל אלמנט.
השפה בה כתוב האתר שונה ממה שמוגדר במאפיין LANG שבתגית HTML
אי התאמה בין השפה בפועל לשפה המוגדרת גורמת לקוראי מסך להקריא את התוכן בהגייה שגויה. יש להתאים את מאפיין lang לשפה בה כתוב האתר בפועל.
חסרה תגית <title>
תגית title היא הדבר הראשון שקוראי מסך מקריאים כשנכנסים לדף. ללא title, משתמשים לא יודעים באיזה דף הם נמצאים וזה מקשה על ניווט בין דפים או בלשוניות. יש להוסיף תגית title משמעותית לכל דף.
טקסט שתגית <title> חוזר על עצמו במספר דפים בעלי נושאים שונים
כותרות זהות בדפים שונים מקשות על משתמשים לזהות באיזה דף הם נמצאים, במיוחד בעת ניווט עם קוראי מסך או בלשוניות מרובות. יש להתאים את כותרת הדף לתוכן הייחודי שלו.
תגית <br> חסרה role='presentation' או role='none'
תגיות <br> עלולות להיות מזוהות כאלמנטים נפרדים ע"י קוראי מסך. הוספת role='presentation' או role='none' מבטיחה שהם יתפקדו רק כמרווחים ויזואליים ולא יפריעו לקריאה הרציפה.
תגית <html> חסרה תכונת lang
ללא הגדרת שפה, קוראי מסך עלולים להשתמש בשפה לא נכונה להקראת התוכן, מה שיכול להקשות מאוד על הבנת התוכן. יש להגדיר את מאפיין lang בתגית <html> (למשל lang="he" לעברית).
תגית <title> היא ללא טקסט.
תגית title ריקה משמעותה שקוראי מסך לא יכולים לזהות את הדף. יש למלא את התגית בטקסט משמעותי המתאר את תוכן ומטרת הדף.
תמונות
התמונה חסרת מאפיין ALT
ללא מאפיין alt, קוראי מסך יקריאו את שם הקובץ או יתעלמו מהתמונה, מה שמונע ממשתמשים עיוורים לקבל את המידע שהתמונה מעבירה. חובה לספק alt לכל תמונה משמעותית.
התמונה עם ALT אבל ללא תיאור בתוכו.
מאפיין alt ריק (alt="") מסמן לקוראי מסך שהתמונה היא דקורטיבית ויש להתעלם ממנה. אם התמונה מעבירה מידע משמעותי, יש למלא את ה-alt בתיאור מתאים.
תיאור התמונה (ALT) מכיל שם קובץ. צריך לשנות את התיאור לתיאור המסביר את המסר שבתמונה.
שם קובץ (כגון image001.jpg) אינו מספק מידע שימושי למשתמשים. יש לתאר את התוכן והמשמעות של התמונה באופן תמציתי.
תיאור תמונה קליקבילית (alt) זהה נמצא במספר תמונות שונות שהם קישור או כפתור.
זה עלול לגרום לבלבול עבור משתמשים עם קוראי מסך, מכיוון שהתיאור לא משקף את התוכן הייחודי של כל תמונה. כדי לתקן את הבעיה, יש לספק תיאורים מדויקים לכל תמונה בהתאם לתוכנה וההקשר שלה.
אם לא מצאתם מושג שלכם, אל דאגה
צוות המומחים שלנו זמין לענות לכם באמצעות טופס שכאן.