בודק הנגישות מבצע בדיקות WCAG 2.1 Level AA אוטומטיות על כל דף אינטרנט ומפיק דוח מסווג של בעיות נגישות. זהה יחסי contrast ratio לא מספיקים, alt text חסר בתמונות, שימוש לא תקין ב-ARIA roles ותכונות, תוויות טופס חסרות, בעיות ניווט במקלדת ואזורי landmark חסרים — עם הדגשת אלמנטים בלחיצה אחת לכל בעיה שנמצאה.
נגישות ווב אינה אופציונלית — היא דרישה חוקית במדינות רבות וחיונית עבור 15% מאוכלוסיית העולם המתמודדת עם מוגבלויות. ובכל זאת, בעיות נגישות בלתי נראות בפיתוח ובדיקות רגילות. כפתור עשוי להיראות תקין אבל להיות בלתי נגיש לחלוטין ל-screen readers כי הוא div מעוצב ללא תכונת role. טקסט עשוי להיות קריא עבורך אך לא לעמוד בדרישות contrast עבור משתמשים עם ליקויי ראייה. בודק הנגישות מציף בעיות בלתי נראות אלה באופן אוטומטי. הוא בודק עשרות קריטריונים של WCAG 2.1 Level AA כולל יחסי contrast ratio (מינימום 4.5:1 לטקסט רגיל, 3:1 לטקסט גדול), alt text חסר בתמונות, תוויות חסרות בשדות טופס, שימוש לא תקין ב-ARIA roles ותכונות, landmark חסרים במסמך (nav, main, footer) ומחווני מיקוד מקלדת. כל בעיה כוללת את האלמנט המושפע, קריטריון WCAG הספציפי שהופר, והמלצה לתיקון. לחץ על כל בעיה כדי להדגיש את האלמנט בדף.
מבצע בדיקות אוטומטיות מול קריטריוני הצלחה של WCAG 2.1 Level AA כולל קטגוריות של תפיסה, תפעול, הבנה ועמידות. כל בדיקה מציגה את הקריטריון הספציפי (למשל, 1.4.3 Contrast, 1.1.1 Non-text Content) ומצב עובר/נכשל.
מחשב את ה-contrast ratio בין צבע הטקסט לצבע הרקע עבור כל אלמנט טקסט בדף. מסמן אלמנטים מתחת ל-4.5:1 לטקסט רגיל או 3:1 לטקסט גדול (18px ומעלה, או 14px ומעלה מודגש). מציג את היחס בפועל ואת המינימום הנדרש.
סורק כל אלמנטי img, svg ו-image role. מסמן תכונות alt חסרות, alt ריק בתמונות לא-דקורטיביות, ו-alt text כללי מדי ("image", "photo"). מציע האם כל תמונה זקוקה ל-alt תיאורי, alt ריק (דקורטיבי), או role="presentation".
בודק שימוש לא תקין ב-ARIA role (roles על אלמנטים לא נכונים), תכונות ARIA חובה חסרות (למשל, aria-label על כפתורי אייקון), מזהים כפולים המוזכרים ב-aria-labelledby, ואזורי landmark חסרים (אין main, אין nav). ממליץ על חלופות semantic HTML.
מוודא שכל שדה קלט בטופס (text, email, password, checkbox, select) מכיל תווית משויכת — דרך אלמנט label עם for/id תואם, aria-label, או aria-labelledby. שדות קלט ללא תווית בלתי נגישים ל-screen readers.
הבעיות מסווגות כשגיאות (חובה לתקן — חסמים לגישה), אזהרות (מומלץ לתקן — חסמים פוטנציאליים) ועברו (נגיש מאושר). מספר השגיאות מוצג בבולטות. לחץ על כל בעיה להדגשת האלמנט המושפע בדף.
לפני השקת דף או פיצ'ר חדש, הפעל את בודק הנגישות לאיתור בעיות מוקדם. alt text חסר, שדות טופס ללא תווית והפרות contrast קל לתקן בשלב הפיתוח אך יקר לגלות בסביבת ייצור.
מדינות רבות מחייבות עמידה ב-WCAG 2.1 Level AA (ADA בארה"ב, EAA באיחוד האירופי). הפעל את הבודק על הדפים הציבוריים שלך כדי לזהות פערי ציות לפני שהם הופכים לסיכונים משפטיים.
כלול בדיקת נגישות כחלק מתהליך ה-QA שלך. לאחר QA חזותי ובדיקות פונקציונליות, הפעל את בודק הנגישות כדי לוודא שהיישום לא מכניס רגרסיות נגישות.
הפעל את הבודק על האתר הנוכחי שלך במהלך פגישת צוות להצגת בעיות נגישות אמיתיות. ההדגשה החזותית וההסברים הברורים עוזרים למפתחים להבין איך נראה markup נגיש ומדוע זה חשוב.
בדוק דפים הכוללים widgets של צד שלישי, תוכן מוטמע, או HTML שנוצר על ידי משתמשים. מקורות אלה לרוב מכניסים בעיות נגישות (alt text חסר, הפרות contrast) שאתה עדיין אחראי להן כבעל הדף.
פתח את ה-floating dock של DevSuite Pro ולחץ על סמל בודק הנגישות. הכלי סורק את ה-DOM של הדף לאיתור בעיות נגישות.
מופיע דוח מסווג עם שגיאות (אדום), אזהרות (צהוב) ועברו (ירוק). כל קטע מפרט בעיות ספציפיות עם האלמנטים המושפעים ומקורות קריטריוני WCAG.
לחץ על כל בעיה כדי להדגיש את האלמנט המושפע בדף עם גבול צבעוני ולגלול אליו. הקשר בין הדוח לאלמנט ב-DOM הוא מיידי.
כל בעיה כוללת המלצה ספציפית: "הוסף alt text המתאר את תוכן התמונה", "הגדל את ניגודיות צבע הגופן לפחות ל-4.5:1", "הוסף אלמנט label עם for='email'".
בצע שינויים בקוד שלך, טען את הדף מחדש והפעל את הביקורת שוב. מספר השגיאות אמור לרדת ככל שהבעיות נפתרות. שאף לאפס שגיאות.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
