כלי נגישות חינמי

בדיקת נגישות אתר

מזינים כתובת, ואנחנו בודקים את הדף הזה ועד ארבעה דפים מרכזיים נוספים בדפדפן אמיתי מול כללי WCAG 2.2 ברמות A ו-AA. לכל חסם מצורפים הרכיב, הדף, צילום מסך והסבר על מי הוא משפיע.

חינם. בודק עד חמישה עמודים מרכזיים תוך כדקה.

מה הכלי בודק

  • חמישה דפים שמייצגים את האתר

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

  • כללי WCAG על הדף המרונדר

    כל דף נטען ב-Chromium ברזולוציה 1366 × 900, ו-axe-core, מנוע הכללים בקוד פתוח של Deque, מריץ את כללי WCAG 2.0, 2.1 ו-2.2 ברמות A ו-AA אחרי שהסקריפטים של הדף רצו. כך נתפסות גם בעיות שערכת עיצוב או אפליקציה יוצרות רק אחרי שהדף נבנה בדפדפן.

  • חומרה וקריטריוני הצלחה

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

  • הרכיב שנכשל, מסומן במסגרת

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

  • פריטים שאדם צריך להכריע בהם

    כש-axe-core מוצא משהו שהוא לא יכול להכריע בו, כמו טקסט על תמונת רקע שאת הניגודיות שלו אי אפשר למדוד, הפריט מופיע ברשימה כ"דורש בדיקה". הוא אף פעם לא נספר ככשל.

  • בדיקת מקלדת

    בדף הראשון אנחנו לוחצים 40 פעמים על Tab ומתעדים לאן עובר המיקוד: האם הוא זז בכלל, האם הוא נתקע בלולאה (לרוב בתוך באנר עוגיות), האם העצירה הראשונה היא קישור דילוג, ואילו רכיבים ממוקדים לא מציגים מחוון מיקוד גלוי. הבדיקה האחרונה היא היוריסטיקה, ולכן היא מוצגת כ"דורש בדיקה".

מה הכלי לא יכול לבדוק

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

למה זה חשוב

חסמי נגישות הם לעיתים קרובות טעויות קטנות בתבנית עם השפעה גדולה. כפתור עגלה שמורכב רק מאייקון ואין לו שם נגיש מוקרא פשוט כ"כפתור" (button), כך שמשתמשי קורא מסך לא יכולים לדעת מה הוא עושה. טקסט אפור על רקע לבן שלא מגיע ליחס הניגודיות 4.5:1 קשה לקריאה עבור אנשים רבים עם ליקויי ראייה, וגם עבור כל מי שמשתמש בטלפון באור שמש חזק.

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

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

איך לקרוא את התוצאות

קריטי
החסם יכול למנוע מאנשים מסוימים להשתמש ברכיב לגמרי, למשל שדה טופס בלי תווית או כפתור בלי שם. את אלה כדאי לתקן ראשונים.
חמור
החסם מקשה מאוד על אנשים מסוימים לבצע משימה, למשל טקסט גוף שלא עומד ביחס הניגודיות.
בינוני
החסם גורם לקושי או לבלבול, אבל בדרך כלל אפשר לעקוף אותו.
קל
בעיה קטנה או מטרד. עדיין כדאי לתקן אותה בפעם הבאה שעורכים את התבנית.
קריטריוני הצלחה של WCAG
המספרים שליד כלל, כמו 1.1.1 או 1.4.3, הם הקריטריונים שהוא בודק. כלל שלא מופיע לצידו קריטריון הוא שיטה מומלצת (best practice) ולא דרישה של WCAG.
רכיבים ודפים
כמה רכיבים נכשלו בכלל, ובכמה מהדפים שנבדקו. כלל שנכשל בכל דף נמצא בדרך כלל בחלק משותף כמו הכותרת העליונה, התפריט או הכותרת התחתונה.
דורש בדיקה
axe-core מצא משהו שהוא לא הצליח להכריע בו. כדאי לבדוק את הרכיב בעצמך: הוא עשוי לעבור או להיכשל. הפריטים האלה לא נספרים ככשלים.
מלכודת מיקוד
לחיצה על Tab המשיכה להעביר את המיקוד במעגל בין אותם רכיבים ספורים. אם הם שייכים לבאנר עוגיות, ייתכן שמשתמשי מקלדת לא יוכלו להגיע לשאר הדף.
המיקוד לא זז (Focus doesn’t move)
לחיצה על Tab אף פעם לא העבירה את המיקוד לשום רכיב. ייתכן שקישורים וכפתורים בנויים מרכיבי div או span, או שסקריפט בולע את הלחיצה.
קישור דילוג
האם העצירה הראשונה של Tab היא קישור "דילוג לתוכן" (Skip to content). בלעדיו, משתמשי מקלדת צריכים לעבור עם Tab על כל הכותרת העליונה בכל דף. גם אזורי ציון דרך (landmarks) וכותרות יכולים לעמוד ב-WCAG 2.4.1 Bypass Blocks.
אין מחוון מיקוד גלוי
רכיבים ממוקדים שלא ראינו אצלם קו מתאר (outline), צל (box shadow) או קו תחתון. סגנון אחר, כמו שינוי צבע, עדיין יכול להיות גלוי, ולכן כדאי לעבור עליהם בעצמך עם Tab כדי לוודא.

איך לתקן את הבעיות הנפוצות ביותר

  • טקסט שלא עומד ביחס הניגודיות

    טקסט רגיל צריך יחס של 4.5:1 לפחות מול הרקע שלו, וטקסט גדול (בערך 24 px, או בערך 18.7 px בהדגשה) צריך 3:1. כדאי לשנות את הצבע בהגדרות ערכת העיצוב או ב-design tokens ולא רכיב אחרי רכיב, ואחר כך לבדוק שוב טקסט placeholder, מצבי ריחוף (hover) וטקסט על תמונות.

  • תמונות בלי טקסט חלופי

    לכל תמונה בעלת משמעות יש לתת מאפיין alt שאומר מה היא מציגה או עושה, למשל שם המוצר והצבע. תמונות דקורטיביות מקבלות alt ריק (alt="") כדי שקוראי מסך ידלגו עליהן. ב-Shopify מוסיפים טקסט חלופי דרך התמונה באזור Media של המוצר; ב-WordPress, בשדה "טקסט חלופי" (Alternative Text) בספריית המדיה.

  • שדות טופס בלי תוויות

    יש לקשר תווית לכל שדה קלט באמצעות <label for> שתואם ל-id של השדה, או להשתמש ב-aria-label כשאין טקסט גלוי. אין להסתמך על טקסט placeholder כתווית היחידה: הוא נעלם ברגע שמתחילים להקליד. טפסי הרשמה לניוזלטר ותיבות חיפוש בכותרת העליונה הם החשודים הרגילים.

  • כפתורים וקישורים בלי שם נגיש

    פקדי אייקונים לעגלה, לחיפוש, לתפריט או לפרופילים ברשתות החברתיות מכילים לעיתים קרובות רק SVG. יש להוסיף טקסט גלוי או aria-label שאומר מה הפקד עושה ("פתיחת העגלה", לא "אייקון"), ולהוסיף aria-hidden="true" לרכיב ה-SVG עצמו.

  • באנר עוגיות שלוכד את המיקוד

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

  • קווי מיקוד שהוסרו ב-CSS

    יש לחפש בגיליונות הסגנון outline: none או outline: 0 על קישורים, כפתורים ו-:focus. במקומם יש להשתמש בסגנון גלוי כמו :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

שאלות על הכלי

האם בדיקת הנגישות הזו חינמית?

כן. אין צורך בהרשמה; רק מאשרים שהאתר בבעלותך או בניהולך. דוח תיקוני נגישות בתשלום מוסיף עד 20 דפים נוספים ממפת האתר, מסלול שימוש במקלדת בלבד, בדיקת התאמה (reflow) ברוחב 320 px, קוד לפני ואחרי שנבנה מהקוד הכושל שלך, הנחיות (prompts) ל-AI, קובץ PDF ו-5 בדיקות חוזרות.

איזה חלק מ-WCAG בדיקה אוטומטית יכולה לבדוק?

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

אם הסריקה לא מצאה כלום, האם האתר שלי עומד ב-ADA או ב-WCAG?

לא. שום בדיקה אוטומטית לא יכולה להראות שאתר עומד ב-WCAG, ב-ADA, בחוק הנגישות האירופי (European Accessibility Act) או בכל חוק אחר. תוצאה נקייה פירושה שהכללים האוטומטיים לא מצאו כשלים בדפים שנבדקו.

אפשר לבדוק אתר staging או דפים שמאחורי התחברות?

אי אפשר לבדוק דפים שמאחורי התחברות, סיסמה או הגנה מפני בוטים. אם ההגנה מפני בוטים חוסמת את הסריקה, אפשר לאשר את סוכן המשתמש (user agent) FixReportsScanner או לבדוק עותק staging ציבורי.

תיקנתי בעיה. למה התוצאה נראית אותו דבר?

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

מקורות

כלים קשורים

דוח תיקוני נגישות ($174, תשלום חד-פעמי) מתחיל מהסריקה החינמית המלאה ומוסיף עוד עמודים, את השינוי שצריך לבצע לכל ממצא, קובץ PDF ובדיקות חוזרות לאימות התיקונים.

מידע על דוח תיקוני נגישות