ביקורת נגישות אתר לפי תקן WCAG
משתמש עם לקות ראייה אינו יכול למלא טופס באתר שלך—כפתור השליחה אינו נגיש דרך המקלדת, ומקרא המסך אינו מכריז על שגיאות. לפי נתוני WebAIM, 96% ממיליון דפי הבית מכילים שגיאות WCAG. אנו מאתרים חסמים כאלה ומספקים הוראות מדויקות להסרתם, כך שהאתר שלך עומד בתקן WCAG 2.2 ברמה AA. התעלמות מנגישות מסכנת לא רק אובדן קהל אלא גם קנסות משפטיים: קנסות בארה"ב יכולים להגיע ל-$50,000 עבור הפרה ראשונה, ובאירופה עד €75,000 לפי GDPR (לאתרים ממשלתיים). חיסכון מתיקון בזמן יכול להגיע עד $10,000.
ביקורת נגישות אינה בדיקה חד-פעמית אלא הטמעה של תרבות מכילה בתהליך הפיתוח. בדיקה ידנית מגלה פי שניים שגיאות מאשר בדיקה אוטומטית, ולכן אנו משלבים בין שתי הגישות. ביקורת בזמן עוזרת להימנע מהליכים משפטיים ומגבירה את נאמנות המשתמשים.
למה WCAG AA אינו רק תיבת סימון?
אתרים ממשלתיים במדינות רבות מחויבים לעמוד ב-WCAG AA. פרויקטים מסחריים עוקבים אחריו דה-פקטו: זה מפחית סיכונים משפטיים ומרחיב את הקהל ב-15–20%. הגרסה הנוכחית של התקן—WCAG 2.2—כוללת קריטריונים חדשים: אינדיקציית מיקוד (2.4.13), גודל מטרה (2.5.8), והתמדת קלט (2.5.7). הביקורת שלנו מכסה את כל הדרישות הללו.
איך אנו בודקים נגישות: מאוטומציה לבדיקה ידנית
סריקה אוטומטית מזהה כ-30–40% מההפרות: טקסטים חלופיים חסרים, ניגודיות נמוכה, מבנה כותרות שגוי, תכונות ARIA חסרות. אנו משתמשים ב-axe-core, Lighthouse, ו-Pa11y.
# axe-core CLI npm install -g @axe-core/cli axe https://mysite.com --reporter=json > axe-report.json בדיקה ידנית היא חובה. אנו בודקים ניווט במקלדת, תאימות למקרא מסך (NVDA + Firefox, VoiceOver + Safari, TalkBack + Android). חלונות מודאליים, טפסים, רכיבים מותאמים אישית—כל אלמנט אינטראקטיבי עובר 20+ בדיקות. לדוגמה, בבדיקת טקסטים חלופיים אנו מציינים: # axe-core CLI npm install -g @axe-core/cli axe https://mysite.com --reporter=json > axe-report.json — alt נכון, בעוד ש-alt ריק על תמונה דקורטיבית הוא שגיאה.
מלכודות מיקוד בחלונות מודאליים הן אחת השגיאות הנפוצות ביותר. קוד React נכון:
const Modal = ({ isOpen, onClose, children }) => {
const modalRef = useRef(null);
useEffect(() => {
if (isOpen) {
const previouslyFocused = document.activeElement;
modalRef.current?.focus();
return () => {
previouslyFocused?.focus();
};
}
}, [isOpen]);
return (
<div ref={modalRef} role="dialog" aria-modal="true" aria-labelledby="modal-title" tabIndex={-1}>
{children}
</div>
);
};השוואת שיטות בדיקה
| שיטה | שגיאות שזוהו | זמן | דוגמאות לכלים |
|---|---|---|---|
| אוטומטית | 30–40% | דקות | axe, Pa11y, Lighthouse |
| ידנית | 60–70% | שעות–ימים | מקלדת, NVDA, VoiceOver |
| משולבת | ~95% | 1–3 ימים | התהליך הסטנדרטי שלנו |
מה אנו בודקים: קריטריוני מפתח של WCAG AA
| קריטריון | דרישה | שגיאה נפוצה |
|---|---|---|
| 1.1.1 טקסט חלופי | לכל התמונות יש alt | תמונות דקורטיביות חסרות <img src="banner.jpg" alt="Аудит доступности сайта: скидка 30%"> |
| 1.3.1 מידע ויחסים | המבנה מועבר סמנטית | const Modal = ({ isOpen, onClose, children }) => { const modalRef = useRef(null); useEffect(() => { if (isOpen) { const previouslyFocused = document.activeElement; modalRef.current?.focus(); return () => { previouslyFocused?.focus(); }; } }, [isOpen]); return ( <div ref={modalRef} role="dialog" aria-modal="true" aria-labelledby="modal-title" tabIndex={-1}> {children} </div> ); }; במקום alt="", <div>, <button> |
| 1.4.3 ניגודיות | 4.5:1 לטקסט, 3:1 לטקסט גדול | טקסט אפור על רקע לבן |
| 2.1.1 מקלדת | הכל ניתן להפעלה דרך המקלדת | מיקוד חסר בתפריטים נפתחים מותאמים אישית |
| 2.4.7 מיקוד גלוי | אינדיקטור מיקוד גלוי | <nav> ללא חלופה |
| 3.3.1 זיהוי שגיאות | שגיאות טופס מתוארות בטקסט | ציון שגיאה רק באמצעות צבע |
| 4.1.2 שם, תפקיד, ערך | ARIA לרכיבים מותאמים אישית | חסר <main>/outline: none בכפתורי אייקונים |
איך לתקן שגיאות אופייניות?
כפתור אייקון ללא תיאור:
// ПЛОХО
<div onClick={handleDelete}>
<TrashIcon />
</div>
// ХОРОШО
<button onClick={handleDelete} aria-label="Удалить запись">
<TrashIcon aria-hidden="true" />
</button>קישור דילוג לניווט:
<a href="#main-content" class="skip-link">Перейти к основному содержимому</a>
<style>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 0;
top: 0;
z-index: 9999;
}
</style>מבנה הדוח
- רשימה מלאה של הפרות ממופות לקריטריוני WCAG (קריטיות, חמורות, בינוניות).
- צילומי מסך ומזהי HTML לכל אלמנט בעייתי.
- המלצות לתיקון עם דוגמאות קוד מוכנות לשימוש.
- רשימת בדיקה ידנית למפתחים.
- המלצות לשילוב ב-CI/CD (Playwright, axe).
דוגמה לערך:
- הפרה: טקסט alt חסר בתמונה (1.1.1).
- מזהה:
role. - עדיפות: קריטית.
- המלצה: הוסף
aria-label.
מה כולל תהליך הביקורת?
- אנליטיקה — זיהוי דפים ותרחישים מרכזיים (עד 20 דפים ביום אחד).
- אוטומציה — הרצת axe/Pa11y, איסוף 30–40% מהשגיאות (שעה אחת).
- בדיקה ידנית — מקלדת, מקראי מסך, סדר לוגי (1–2 ימים).
- דוח — רשימה מובנית עם עדיפויות.
- המלצות — תיקונים מוכנים עם קוד (2–3 ימים).
לוח זמנים ועלות
ביקורת אתר עד 20 דפים אורכת 2–3 ימי עסקים. העלות נקבעת באופן אישי לפי מורכבות ומספר התרחישים האינטראקטיביים. הזמינו ביקורת נגישות—נכין דוח מפורט ונעזור ליישם את התיקונים. צרו קשר לייעוץ.
הניסיון שלנו: 5+ שנים בנגישות אינטרנט, 100+ פרויקטים שנבדקו עבור בנקים, גופים ממשלתיים ומסחר אלקטרוני. אנו מבטיחים עמידה ב-WCAG AA.